Accessibility with CSS


    Lisa Seeman
Accessibility – not the “average user”
Getting your content to everyone:

   Disabilities
       Visual disabilities
   ...
Our hero

W3C WAI - United approach so that all different player
 work together

   WCAG (Web Content Accessibility Guide...
WCAG

   Principles – the idea
   Checkpoints – what
   Success criteria – more detailed what
   Techniques – how



...
WCAG 2.0
WCAG 2.0 Guidelines – not for the “average user”, using a flat screen,
  mouse …..

   1 Perceivable
       1.1...
Well formed CSS

A bit like separating form and content
   Text / function / structure in the mark up
   Presentation in...
CSS is beautiful

   Chapter 1 introduction to accessibility
   1.2 Accessibility and CSS


       Key points           ...
Using CSS to control visual presentation
of text
Accessible relationships,
Resizable, accessible text

CSS can be used to ...
Control visual presentation of text
>h1 class="overlap"><span class="upper">News</span><br />
>span class="byline">today</...
Resizable text

Specifying the size of text containers using em units

#nav_menu { width: 20em; height: 100em }

#nav_list...
Stay on the page


Allows users to view content in such a way that
  line length can average 80 characters or less

#main_...
Margin and padding

Using CSS margin and padding rules instead of
 spacer images for layout design (Non-text
 Content)

ta...
User interface

Using CSS to change the presentation of a user
  interface

Component when it receives focus -focus visibl...
Hide and show

   Accessible scripts
       Class = visible / invisible..


   Hide a portion of the link text span
   ...
ARIA Accessible Rich Internet
Applications
   ARIA exposes what is going on in Applications to Assistive
     technology (...
Bad: Inserting non-decorative content
Inserting non-decorative content
By using :before and :after pseudo-elements and the...
Bad: Losing the mark up structure

   >p class=“heading1”>

   >img class=“button”>

CSS is presentation

Accessibility ...
Bad: Changing the meaning of content by
positioning information out of the DOM

menu1 {                        .item1 {
  ...
Make sure the DOM makes sense
When style sheets are applied, the data are displayed in two columns of "Products" and
   "L...
CSS is beautiful – When used for form,
not content
   Chapter 1 introduction to accessibility
   1.2 Accessibility and C...
Upcoming SlideShare
Loading in …5
×

Accessibility and css - Lisa Seeman

2,342 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,342
On SlideShare
0
From Embeds
0
Number of Embeds
254
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Accessibility and css - Lisa Seeman

  1. 1. Accessibility with CSS Lisa Seeman
  2. 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. 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. 4. WCAG  Principles – the idea  Checkpoints – what  Success criteria – more detailed what  Techniques – how  See WCAG techniques for CSS
  5. 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. 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. 7. CSS is beautiful  Chapter 1 introduction to accessibility  1.2 Accessibility and CSS Key points Tools • Clear structure in • :before for symbols mark up via heading • Colors for heading levels levels • Easier to follow
  8. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. Bad: Losing the mark up structure  >p class=“heading1”>  >img class=“button”> CSS is presentation Accessibility is interoperability
  18. 18. Bad: Changing the meaning of content by positioning information out of the DOM menu1 { .item1 { position: absolute; position: absolute; top: 3em; top: 7em; left: 0em; left: 0em; margin: 0px; margin: 0px } color: red; background-color: white } .item2 { position: absolute; .menu2 { top: 8em; position: absolute; left: 0em; top: 3em; margin: 0px } left: 10em; margin: 0px; color: red; background-color: white }
  19. 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. 20. CSS is beautiful – When used for form, not content  Chapter 1 introduction to accessibility  1.2 Accessibility and CSS Key points Tools • Clear structure in • :before for symbols mark up via heading • Colors for heading levels levels • Easier to follow

×