Successfully reported this slideshow.
Your SlideShare is downloading. ×

the 5 layers of web accessibility - Open Web Camp II

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 95 Ad

the 5 layers of web accessibility - Open Web Camp II

Download to read offline

Dirk Ginader, part of the Yahoo! Accessibility Taskforce, will talk about the “5 Layers of Web Accessibility”. He extents the commonly known 3 layers model consisting of HTML, CSS and JavaScript with 2 new layers for more accessibility. He shows how easy it can be to make a website or web application more accessible by following simple rules.

see:
http://openwebcamp.org/agenda/#5_layers_of_accessibility

Dirk Ginader, part of the Yahoo! Accessibility Taskforce, will talk about the “5 Layers of Web Accessibility”. He extents the commonly known 3 layers model consisting of HTML, CSS and JavaScript with 2 new layers for more accessibility. He shows how easy it can be to make a website or web application more accessible by following simple rules.

see:
http://openwebcamp.org/agenda/#5_layers_of_accessibility

Advertisement
Advertisement

More Related Content

Viewers also liked (20)

Advertisement
Advertisement

the 5 layers of web accessibility - Open Web Camp II

  1. 1. The 5 Layers of Web Accessibility Open Web Camp II 07/17/2010 Dirk Ginader http://ginader.com http://twitter.com/ginader
  2. 2. Common Frontend Development knows 3 Layers
  3. 3. The Markup is the first and most important Layer of all
  4. 4. Source order = tab order
  5. 5. Best matching HTML Element for the job?
  6. 6. Have you really found an awesome new use for a <dl>? think again...
  7. 7. Is the page understandable and usable without CSS?
  8. 8. Interaction is done using links, forms and reloads
  9. 9. CSS can make inaccessible too
  10. 10. display:none and visibility:hidden hide from everyone
  11. 11. :hover only works with a mouse
  12. 12. :focus to the rescue!
  13. 13. always use them combined: a:hover, a:focus{ /*awesome CSS*/ }
  14. 14. CSS is for Design not for Interaction
  15. 15. Javascript is the icing on the cake
  16. 16. Does anything, you need the user to do, work without Javascript?
  17. 17. then we can add some Magic
  18. 18. hijack existing interaction elements
  19. 19. create new buttons for JS only interactions
  20. 20. Screenreaders do know JS. They often just don’t know what happens...
  21. 21. focus() to the rescue!
  22. 22. mind the tab order
  23. 23. focus() to the rescue!
  24. 24. tabindex=0 makes even a <div> keyboard accessible
  25. 25. tabindex=-1 for JS only tab access
  26. 26. yeah focus()
  27. 27. Ajax = delays = tricky to communicate
  28. 28. inform about what happens!
  29. 29. you guessed it: focus()
  30. 30. Screenreaders update their Virtual Buffer “regularly”
  31. 31. while in Forms Mode they update in realtime
  32. 32. use the Forms Mode to update the Buffer when you need to
  33. 33. Make sure the Element you want to focus() is already in the Buffer
  34. 34. Position offscreen buffers, display:none does not
  35. 35. .hideOffscreen{ position: absolute; left: -999em; }
  36. 36. Problems in right-to-left Layouts! Marcel Duran found Solution:
  37. 37. .hideVisually{ overflow: hidden; position: absolute; text-indent: -999em; }
  38. 38. another layer: different CSS if Javascript is available
  39. 39. Change the interface for the JS version
  40. 40. CSS is much faster than Javascript
  41. 41. Tell CSS that there’s JS: document.documentElement.className += ” js”;
  42. 42. .module{ /* nice CSS for the non JS Layout */ } .js .module{ /* awesome CSS for the JS Layout */ }
  43. 43. How does your Design react when the text size changes?
  44. 44. It should survive 3x text zoom
  45. 45. Screen Magnifiers only show a very small part of the screen
  46. 46. make sure everybody knows what happens right now
  47. 47. focus() + “yellow fade” help to find and understand
  48. 48. the top Layer the new Hotness
  49. 49. WAI-ARIA maps existing and well known OS concepts to custom Elements in the Browser
  50. 50. Adds semantics to non semantic Markup
  51. 51. provides instant updates and notifications
  52. 52. Roles
  53. 53. • alert • banner • button • menuitem • slider
  54. 54. Document Landmark Roles
  55. 55. • application • banner • complementary • contentinfo • main • navigation • search
  56. 56. States and Properties
  57. 57. • aria-valuemin • aria-valuemax • aria-valuenow • aria-valuetext • aria-labelledby
  58. 58. Live Regions informing about changes
  59. 59. • off • polite • assertive
  60. 60. You can use it today!
  61. 61. • it does no validate • you can simply add the properties using Javascript as it depends on it anyway
  62. 62. • everybody can add Landmark roles now • aria-required=”true” makes a dream come true
  63. 63. Don’t rely on it
  64. 64. • 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...
  65. 65. Examples
  66. 66. without Javascript http://finance.yahoo.com/currency-converter
  67. 67. without Javascript http://finance.yahoo.com/currency-converter
  68. 68. without Javascript http://finance.yahoo.com/currency-converter
  69. 69. with Javascript http://finance.yahoo.com/currency-converter
  70. 70. with Javascript http://finance.yahoo.com/currency-converter
  71. 71. with Javascript http://finance.yahoo.com/currency-converter
  72. 72. http://uk.tv.yahoo.com/
  73. 73. with Javascript http://finance.yahoo.com/news
  74. 74. with Javascript http://finance.yahoo.com/news
  75. 75. without CSS http://finance.yahoo.com/news
  76. 76. without Javascript http://finance.yahoo.com/news
  77. 77. without anything http://finance.yahoo.com/news
  78. 78. Easy Youtube http://icant.co.uk/easy-youtube/
  79. 79. with Javascript http://ginader.com
  80. 80. without CSS http://ginader.com
  81. 81. without anything http://ginader.com
  82. 82. http://ginader.com http://twitter.com/ginader

Editor's Notes






























































  • over 90 different roles to map existing OS concepts onto your Markup

  • article
    Content that makes sense in its own right, such as a complete blog post, a comment on a blog, a post in a forum, and so on.
    banner
    Site-orientated content, such as the title of the page and the logo.
    complementary
    Supporting content for the main content, but meaningful in its own right when separated from the main content. For example, the weather listed on a portal.
    contentinfo
    Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on.
    main
    Content that is directly related to or expands on the central content of the document.
    navigation
    Content that contains the links to navigate this document and/or related documents.
    search
    This section contains a search form to search the site.

  • aria-valuemin
    Stores the lowest value a range may have.
    aria-valuemax
    Stores the highest value a range may have.
    aria-valuenow
    Stores the current value in a range.
    aria-valuetext
    Stores readable text to help the user understand the context. For example, &quot;30 dollars&quot;.
    aria-labelledby
    Stores the id attribute of a text label containing an appropriate prompt for this widget.

  • off
    This is the default value, and indicates that the region is not live.
    &lt;ul aria-live=&quot;off&quot;&gt;
    polite
    This is normal operation and the expected behaviour for live regions. A value of polite indicates that it is not necessary to respond until user completes their current activity.
    &lt;ul aria-live=&quot;polite&quot;&gt;
    assertive
    This value is a higher priority than normal but does not necessarily interrupt the user immediately.
    &lt;ul aria-live=&quot;assertive&quot;&gt;

  • off
    This is the default value, and indicates that the region is not live.
    &lt;ul aria-live=&quot;off&quot;&gt;
    polite
    This is normal operation and the expected behaviour for live regions. A value of polite indicates that it is not necessary to respond until user completes their current activity.
    &lt;ul aria-live=&quot;polite&quot;&gt;
    assertive
    This value is a higher priority than normal but does not necessarily interrupt the user immediately.
    &lt;ul aria-live=&quot;assertive&quot;&gt;
  • off
    This is the default value, and indicates that the region is not live.
    &lt;ul aria-live=&quot;off&quot;&gt;
    polite
    This is normal operation and the expected behaviour for live regions. A value of polite indicates that it is not necessary to respond until user completes their current activity.
    &lt;ul aria-live=&quot;polite&quot;&gt;
    assertive
    This value is a higher priority than normal but does not necessarily interrupt the user immediately.
    &lt;ul aria-live=&quot;assertive&quot;&gt;

























×