1 / 20

Accessibility with CSS

Accessibility with CSS. Lisa Seeman. Accessibility – not the “average user”. Getting your content to everyone: Disabilities Visual disabilities Hearing disabilities Physical disabilities Cognitive or neurological disabilities Other interoperability Scenarios AT

clover
Download Presentation

Accessibility with CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Accessibility with CSS Lisa Seeman

  2. Accessibility – not the “average user” Getting your content to everyone: • Disabilities • Visual disabilities • Hearing disabilities • Physical disabilities • Cognitive or neurological disabilities • Other interoperability Scenarios • AT • Screen readers, brail readers, magnification, key pad etc

  3. Our hero W3C WAI - United approach so that all different player work together • WCAG (Web Content Accessibility Guidelines) • UAG (User Agent Accessibility Guidelines (UAAG) • ATAG (Authoring tools accessibility guidelines) • WAI-ARIA (Accessible Rich Internet Applications) • Other specifications via PF

  4. WCAG • Principles – the idea • Checkpoints – what • Success criteria – more detailed what • Techniques – how • See WCAG techniques for CSS

  5. WCAG 2.0 WCAG 2.0 Guidelines – not for the “average user”, using a flat screen, mouse ….. • 1 Perceivable • 1.1 Provide text alternatives. • 1.2 Alternatives time-based media. • 1.3 Adaptable - without losing information or structure. • 1.4 Distinguishable (such as color contrast). • 2 Operable • 2.1 Keyboard accessible • 2.2 time to read and use content. • 2.3 seizures. • 2.4 navigatable,. • 3 Understandable • 3.1 readable. • 3.2 predictable. • 3.3 Help users • 4 Robust

  6. Well formed CSS A bit like separating form and content • Text / function / structure in the mark up • Presentation in CSS Perceivable, adaptable, operable, understandable, robust CSS Techniques - how to do it in CSS • The good • The bad

  7. CSS is beautiful • Chapter 1 introduction to accessibility • 1.2 Accessibility and CSS • Key points • Clear structure in mark up via heading levels • Easier to follow • Tools • :before for symbols • Colors for heading levels

  8. Using CSS to control visual presentation of text Accessible relationships, Resizable, accessible text CSS can be used to control the visual presentation of text. This will allow users to modify, via the user agent, the visual characteristics of the text to meet their requirement. The text characteristics include aspects such as size, color, font family and relative placement. Text within images has several accessibility problems, including the inability to: • be scaled according to settings in the browser • be displayed in colors specified by settings in the browser or rules in user-defined style sheets • honor operating system settings, such as high contrast

  9. Control visual presentation of text >h1 class="overlap"><span class="upper">News</span><br /> >span class="byline">today</span></h1> .overlap { line-height:0.2em; } .upper { text-transform:uppercase; letter-spacing:1em; text-align:left;} .byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; } --------- >p class="startletter">Once upon a time...</p> startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }

  10. Resizable text Specifying the size of text containers using em units #nav_menu { width: 20em; height: 100em } #nav_list { font-size: 100%; } input.pick { font-size: 100%; width: 10em; } Scaling form elements which contain text p, label, input { font-size: 1em; } input.geomsize {width: 1.2em;height: 1.2em;} (IE only)

  11. Stay on the page Allows users to view content in such a way that line length can average 80 characters or less #main_content {max-width: 70em}

  12. Margin and padding Using CSS margin and padding rules instead of spacer images for layout design (Non-text Content) table {margin: .5em; border-collapse: collapse; } And better knowledge processing

  13. User interface Using CSS to change the presentation of a user interface Component when it receives focus - focus visible, not reliant on color #mainnav a:hover, #mainnav a:active, #mainnav a:focus { background-color: #DCFFFF; color:#000066;}

  14. Hide and show • Accessible scripts • Class = visible / invisible.. • Hide a portion of the link text span Eg jump to main }height: 1px; width: 1px; position: absolute; overflow: hidden; top:10px; }

  15. ARIA Accessible Rich Internet Applications ARIA exposes what is going on in Applications to Assistive technology (adds semantics) • With ARIA States and author-Settable Properties become explicit in internet applications • State … Checked, pressed, value, selected • ARIA states are used to track the state of each control or widget and expose it to the user device • In scripts event toggles state and often class for the visual effect <span class="checkbox" id="chbox1" role="checkbox" aria-checked="true" onkeydown="return checkBoxEvent(event);" onclick="return checkBoxEvent(event);" > Include decorative fruit basket </span> </div>

  16. Bad: Inserting non-decorative content Inserting non-decorative content By using :before and :after pseudo-elements and the 'content' property in CSS p.jim:before {content: "Jim: " } p.mary:before { content: "Mary: " } q:before { content: open-quote } q:after { content: close-quote } <p class="jim"> <q>Do you think he's going to make it?</q></p> <p class="mary"> <q>It's not looking good.</q></p> p.fact:before { content: "Fact: "; font-weight: bold; } p.opinion:before { content: "Opinion: "; font-weight: bold; } <p class="fact"> The defendant was at the scene of the crime when it occurred. </p> <p class="opinion"> The defendant committed the crime. </p> Inserting non-decorative content Check pictures are decorative only - with no message or redundant message NOT CSS as intended

  17. Bad: Losing the mark up structure • <p class=“heading1”> • <img class=“button”> CSS is presentation Accessibility is interoperability

  18. Bad: Changing the meaning of content by positioning information out of the DOM menu1 { position: absolute; top: 3em; left: 0em; margin: 0px; color: red; background-color: white } .menu2 { position: absolute; top: 3em; left: 10em; margin: 0px; color: red; background-color: white } .item1 { position: absolute; top: 7em; left: 0em; margin: 0px } .item2 { position: absolute; top: 8em; left: 0em; margin: 0px }

  19. Make sure the DOM makes sense When style sheets are applied, the data are displayed in two columns of "Products" and "Locations." When the style sheets are not applied, the text appears in a definition list which maintains the structure and reading order. <div class="box"> <dl> <dt class="menu1">Products</dt> <dd class="item1">Telephones</dd> <dd class="item2">Computers</dd> <dd class="item3">Portable MP3 Players</dd> <dt class="menu2">Locations</dt> <dd class="item4">Idaho</dd> <dd class="item5">Wisconsin</dd> </dt> </dl> </div> Mark up is content, CSS is the presentation

  20. CSS is beautiful – When used for form, not content • Chapter 1 introduction to accessibility • 1.2 Accessibility and CSS • Key points • Clear structure in mark up via heading levels • Easier to follow • Tools • :before for symbols • Colors for heading levels

More Related