Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility with CSS: Making Websites Better for Everyone

6,366 views

Published on

When we make our sites more accessible we make them easier for everyone to use.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Accessibility with CSS: Making Websites Better for Everyone

  1. 1. ACCESSIBILITY WITH CSS: MAKING WEBSITES BETTER FOR EVERYONE
  2. 2. WHAT IS ACCESSIBILITY?
  3. 3. SCREEN READER Page has fifty-eight headings and two hundred seventy-one links BBC dash Homepage Link Graphic BBC Heading level two Heading level two BBC navigation List of nine items bullet Link News bullet Link Sport bullet Link Weather bullet Link Capital bullet Link Future bullet Link Shop bullet Link TV bullet Link Radio bullet Link More…List end Search term colon Edit Graphic Search Heading
  4. 4. HIGH CONTRAST
  5. 5. HIGH CONTRAST
  6. 6. VOICE RECOGNITION
  7. 7. VOICE RECOGNITION
  8. 8. VOICE RECOGNITION
  9. 9. TRACKBALL
  10. 10. KEYBOARD
  11. 11. YOU SHOULD CARE ABOUT ACCESSIBILITY
  12. 12. 1: UX Content Information Architecture Interface Design
  13. 13. 2: HTML WCAG (Web Content Accessibility Guidelines)
  14. 14. 3: JAVASCRIPT ARIA Roles (Accessible Rich Internet Applications)
  15. 15. 4: CSS
  16. 16. DON’T SCREW IT UP Don’t disable outlines. Don’t forget :focus. Don’t write in ALL CAPS. Style the right element.
  17. 17. MAKE IMPROVEMENTS
  18. 18. LINKS Bigger is better. Be descriptive. Underline on :hover.
  19. 19. LINKS
  20. 20. LINKS
  21. 21. <a href="article.html"> <h3>Heavy-duty…</h3> <p>Government is providing… transportation programs.</p> </a>
  22. 22. LINKS
  23. 23. LINKS
  24. 24. GENERATED CONTENT
  25. 25. GENERATED CONTENT button[type=submit]:after { content: " >"; speak: none; } <button type="submit"> Next</button>
  26. 26. GENERATED CONTENT
  27. 27. GENERATED CONTENT
  28. 28. SPRITES
  29. 29. SPRITES
  30. 30. SPRITES .icon { overflow: hidden; } .icon:before { content: url(sprite.png); position: absolute; top: -30px; left: -30px; }
  31. 31. SPRITES
  32. 32. SPRITES
  33. 33. ICON FONTS <span class="icon icon_check"></span> .icon_check { content: 'e00e'; }
  34. 34. ICON FONTS <span class="icon"> <span class="icon_check" aria-hidden=“true”></span> <span class=“offscreen”> Good</span> </span>
  35. 35. ARIA AS A HOOK .summary[aria-expanded=false]{ /* make it look clickable */ } .details[aria-hidden=true] { display: none; }
  36. 36. SPECIAL FEATURES .offscreen Skip navigation link
  37. 37. .OFFSCREEN .offscreen { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); }
  38. 38. SKIP LINK
  39. 39. SKIP LINK
  40. 40. FORM LABELS
  41. 41. FORM LABELS
  42. 42. TRY IT YOURSELF ChromeVox Windows High Contrast Theme Turn off your mouse
  43. 43. BETTER FOR EVERYONE
  44. 44. I LIKE TO MAKE WEBSITES EVERYONE CAN USE @stephaniehobson Stephaniehobson.ca
  45. 45. RESOURCES - webaim.org - wave.webaim.org - alistapart.com/article/the-accessibility-of-wai-aria - 24ways.org/2009/dont-lose-your-focus/ - blog.paciellogroup.com/2010/01/high-contrast-proof-css- sprites - http://snook.ca/archives/html_and_css/floated-label-pattern- css - www.wufoo.com/guides/custom-radio-buttons-and-checkboxes - adam.co/lab/jquery/customselect - filamentgroup.com/lab/bulletproof_icon_fonts.html - www.nczonline.net/blog/2013/01/15/fixing-skip-to-content- links

×