Five Layers of Accessibility

This post originally appeared on the Yahoo! Accessibility blog.

accessibility-205x85Dirk Ginader gave this presentation on the 5 layers of accessibility at a Skills Matter event in London in 2009. It's an oldie, but a goodie.

Dirk pushes the traditional view of web development as three layers (HTML, CSS, JavaScript) by adding CSS for JavaScript enabled users and ARIA functionality. This presentation also uses the Yahoo! Finance Currency Converter as an example of progressive enhancement.

You can follow along with these slides or transcript.

5 Layers of Accessibility - Slides

The 5 Layers of Web Accessibility

The 5 Layers of Web Accessibility - Presentation Transcript

  1. Hi there! :-)
  2. Ogres = Onions = Web Standards?
  3. LAYERS!
  4. Common Frontend Development knows 3 Layers
  5. The 5 Layers of Web Accessibility YDN Tuesday 5.5.2009 Dirk Ginader
    Twitter: @ginader
  6. The Markup is the most important Layer of all
  7. Source order = tab order
  8. Best matching HTML Element for the job?
  9. Is the page understandable and usable without CSS?
  10. Interaction using links, forms and reloads
  11. CSS can make inaccessible too
  12. display:none and visibility:hidden hide from everyone
  13. :hover only works for a mouse
  14. :focus to the rescue!
  15. always use them combined: a:hover, a:focus{ /*awesome CSS*/ }
  16. CSS is for Design not for Interaction
  17. Javascript is the icing on the cake
  18. Does anything, you need the user to do, work without Javascript?
  19. then we can add some Magic
  20. hijack existing interaction elements
  21. create new buttons for JS only interactions
  22. Screenreaders do know JS. They often just don’t know what happens...
  23. focus() to the rescue!
  24. mind the tab order
  25. focus() to the rescue!
  26. tabindex=0 makes even divs keyboard accessible
  27. tabindex=-1 for JS only tab access
  28. yeah focus()
  29. Ajax = delays = tricky to communicate
  30. inform about what happens!
  31. you guessed it: focus()
  32. Screenreaders update their Virtual Buffer “regularly”
  33. while in Forms Mode they update in realtime
  34. use the Forms Mode to update the Buffer when you need to
  35. Another layer: different CSS if Javascript is available
  36. Change the interface for the JS version
  37. CSS is much faster than Javascript
  38. Tell CSS that there’s JS: document.documentElement.className += ” js”;
  39. .module{ /* nice CSS for the non JS Layout */ } .js .module{ /* awesome CSS for the JS Layout*/ }
  40. How does your CSS react when the text size changes?
  41. Screen Magni?er only show a very small part of the screen
  42. make sure everybody knows what happens right now
  43. yellow fades + focus() help to ?nd and understand
  44. The last Layer the new Hotness
  45. WAI-ARIA maps existing and well known OS concepts to custom Elements in the Browser
  46. Adds semantics to non semantic Markup
  47. provides instant updates and noti?cations
  48. Roles
  49. • alert
    • banner
    • button
    • menuitem
    • slider
  50. Document Landmark Roles
  51. • application
    • banner
    • complementary
    • contentinfo
    • main
    • navigation
    • search
  52. States and Properties
  53. • aria-valuemin
    • aria-valuemax
    • aria-valuenow
    • aria-valuetext
    • aria-labelledby
  54. Live Regions informing about changes
  55. • off
    • polite
    • assertive
    • (rude)
  56. You can use it today
  57. • it does no validate
    • you can simply add the properties using Javascript as it depends on it anyway
  58. • everybody can add Landmark roles now
    • aria-required=”true” makes a dream come true
  59. Don’t rely on it
  60. • There are no stats but we know that still a lot of Screenreader users are stuck on old versions without ARIA support
    • Progressive Enhancement all over again...
  61. Yahoo! Finance Currency Converter Examples
    • without Javascript http://?nance.yahoo.com/currency-converter
    • without Javascript http://?nance.yahoo.com/currency-converter
    • without Javascript http://?nance.yahoo.com/currency-converter
    • with Javascript http://?nance.yahoo.com/currency-converter
    • with Javascript http://?nance.yahoo.com/currency-converter
    • with Javascript http://?nance.yahoo.com/currency-converter
    • http://uk.tv.yahoo.com/
  62. more
    • Introduction to WAI ARIA
    • jQuery Accessible Tabs - How to make tabs REALLY accessible
    • Accessibility Tips
    • Todd Kloots: "Developing Accessible Widgets Using ARIA" on Yahoo! Video
  63. Ginader.Com Twitter: @ginader

Related Information