Accessible css
- 1. Savitribai Phule Pune University
- 2. Provides ability to separate content from presentation, and to allow for more precise control over layout. Allow you modify properties of existing HTML elements. Instructs the browser how to display individual items or elements in your page. Styles are easy to edit and change; you may change the style that was defined for that element and all occurrences of the element in the web page (or entire web site) will be changed. Savitribai Phule Pune University
- 3. CSS is called "cascading" because there is a hierarchy or precedence for how styles are applied: Savitribai Phule Pune University
- 4. CSS-disabled view CSS-enabled view Savitribai Phule Pune University
- 5. visibility: hidden; and/or display: none; Do not use this CSS if you want the content to be read by a screen reader. width:0px;height:0px An element with no height or width is removed from the flow of the page, most screen readers will ignore this content. text-indent: -1000px; It moves the content to the left 1000 pixels - thus off the visible screen. Screen readers will still read text with this style. Savitribai Phule Pune University
- 6. Style for visually hiding content that will be read by a screen reader. .hidden {position: absolute; //remove the element from the page flow and to begin positioning it. left:-10000px; //moves the content 10000 pixels to the left. top: auto; width:1px; // to visually hide everything that does not height:1px; // fit into these dimensions. overflow: hidden;} The .hidden CSS class should then be referenced as- <div class="hidden">This text is hidden.</div> Savitribai Phule Pune University
- 7. Fonts are the style of "type face" used to display text, numbers, characters and other "glyphs“. Real Text vs. Text Within Graphics- The enlarged image of the word "University" above is difficult to read because it has become pixelated. Font Variations- 1. Bold and Italic 2. Capitalization Savitribai Phule Pune University
- 8. Font Readability – Some natively provided fonts are- Font Family – Serif font(Extra strokes) Sans-serif font Cursive font Fantasy font Monospace font Savitribai Phule Pune University
- 9. Specifying font families - The CSS specifies a number of font faces or families. body { font-family: Helvetica, Arial, sans- serif; } h1 { font-family: Georgia, Times, "Times New Roman", serif; } Savitribai Phule Pune University
- 10. Color Contrast – Font Size – 1. Relative Units such as percentage and ems 2. Absolute Units such as pixels and points Blinking and Moving Text – Blinking text and moving text can distract the reader's attention. Blinking or animating text should be avoided. Text alignment and text margins , padding – p {margin: auto 15% auto 15%; text- align:left;} .another_p {margin-left:15%; margin- right:15%;} Savitribai Phule Pune University
- 11. CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file. Savitribai Phule Pune University
- 12. Thank You Savitribai Phule Pune University