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.

HTML5 Accessibility - Is it ready yet?


Published on

What are the features in HTML5 that have the potential to:
make it easier for developers to provide a more accessible user experience?
make it harder for developers to provide a more accessible user experience?
Where does WAI-ARIA fit into the HTML5 accessibility story? How can WAI-ARIA fill the gaps in HTML5 UI accessibility?

Published in: Design, Technology
  • Login to see the comments

HTML5 Accessibility - Is it ready yet?

  1. 1. HTML5 accessibility<br />is it ready yet?<br />Steve Faulkner & Hans Hillen <br />The Paciello Group (TPG)<br />
  2. 2. HTML5 process<br />W3WHATWGC<br />W3C<br />WHATWG<br />
  3. 3. and then there’s the rest who <br />probably don’t care<br />photo by Joel bez<br />
  4. 4. “accessibility<br />is about more than <br />screen readers...”<br />
  5. 5. ...but in this session we are talking about assistive technology support, if you are expecting more you will be disappointed<br />
  6. 6. Accessibility APIs<br />MSAA<br />Iaccessible2<br />UI automation<br />AX<br />STK<br />roles<br />states<br />properties<br />interaction<br />+ device independent<br />interaction<br />
  7. 7. Accessibility API<br />Input device<br />browser<br />role=button<br />state=focused<br />value=submit query<br />action=press<br />
  8. 8. so, is it ready yet?<br />HTML5 accessibility<br />that is????<br />
  9. 9. short answer:<br />NO!<br />
  10. 10. long answer is:<br />NOT BY A<br />LONG SHOT<br />
  11. 11. NIT BY A LING SHIT<br />LING<br />(HTML5)<br /> <------ NIT (accessibility)<br />
  12. 12. AccessibleHTML5<br />will be a beautiful thing<br />
  13. 13. HTML5 is <br />a work <br />in progress<br />
  14. 14. <ul><li>form controls
  15. 15. structures
  16. 16. canvas
  17. 17. video
  18. 18. audio
  19. 19. ARIA
  20. 20. ‘fallback’
  21. 21. ‘text alternatives’</li></li></ul><li>whoaretheheroes?<br />
  22. 22. who are <br />thevillains?<br />
  23. 23. ?<br />?<br />when will browsers<br />implement HTML5 UI features in a way that developers will want to use them?<br />when will browsers<br />expose HTML5features via accessibility APIs<br />when will browsers<br />implement HTML5 UI features?<br />?<br />?<br />?<br />
  24. 24. bolt-on<br />VS<br />built-in<br />
  25. 25. a tale of 2 browsers<br />
  26. 26. a tale of 2 browsers<br />Opera mini<br />Safari<br />Using VoiceOver<br />
  27. 27. accessibilityisalways<br />bolted on, <br />sometimes by<br />Browsers<br /> ATs<br />CMS/tool developers<br /> library developers<br />web developers<br />users<br />more<br />less<br />
  28. 28. generally speaking,the earlier it is bolted on,themore robust<br />Browsers<br /> ATs<br />CMS/tool developers<br /> library developers<br />web developers<br />users<br />more<br />less<br />
  29. 29. but if it’s done right <br />it makes no difference<br />to the end user...<br />
  30. 30. <DIV class="J-K-I J-J5-Ji J-K-I-Js-Zq J-K-I-Js-Zj J-K-I-JW" role=button tabIndex=0 <br />unselectable="on" act="9" closure_uid_1bjdqs="1012"><DIV class="J-J5-Ji J-K-I-Kv-H" unselectable="on"><br /><DIV class="J-J5-Ji J-K-I-J6-H" unselectable="on"><br /><DIV class=J-K-I-KC unselectable="on"><br /><DIV class=J-K-I-K9-KP unselectable="on">&nbsp;</DIV><br /><DIV class=J-K-I-Jz unselectable="on">Report spam</DIV> </DIV></DIV></DIV></DIV><br />...and no matter what is bolted on by the browser, developers will find a reason to want something else<br />
  31. 31. which is why WAI-ARIA is needed<br />preaching abstinence does not work<br />accessibility = the art of the killjoy<br />accessibility = the art of creative inclusivity<br />
  32. 32.<br />
  33. 33. “So if HTML5 A11Y is not ready…<br />WHAT IS!?!?”<br />
  34. 34. The answer is simple really… <br />
  35. 35. …websites built in the 90's!<br />Cause only web 1.0 can be accessible<br />WRONG<br />
  36. 36. Some HTML5 works tomorrow…<br />WAI-ARIA works today!<br />Why not use it in the meantime?<br />
  37. 37. ARIA Landmark Roles<br />Identify and label commonly used , relevant sections on a web page<br />Screen readers users can quickly locate these sections and navigate between them<br />Demo<br />
  38. 38. Some Landmark Roles actually map to HTML5 Section Elements , some don't<br />ARIA<br />HTML5<br />role="banner"<br />role="main"<br />role="navigation"<br />role="search"<br />role="contentinfo"<br />role="complementary"<br />role="form"<br />role="application"<br /><ul><li><header>?
  39. 39. No equivalent
  40. 40. <nav>
  41. 41. <input type="search">?
  42. 42. No equivalent
  43. 43. <aside>
  44. 44. <form>
  45. 45. no equivalent</li></li></ul><li>What's with the Question Marks?<br />For banner, main, contentinfo roles… <br /><header>, <article>, <footer>…<br />THERE CAN BE ONLY ONE!<br />For each (nested) application or document<br />Use as many as you like!<br />
  46. 46. And Search?<br />Role="search" represents the entire search module<br />Hints, instructions, etc.<br />Complex search options<br />Role Can be set on containers<br /><input type="search"> is just the form control<br />But, in some use cases they can be equivalent<br />
  47. 47. What about Widgets?<br />
  48. 48. Well, What about Them?<br />Many HTML5 widgets are either<br />Not implemented yet<br />Not exposing accessibility information yet<br />So for now just use ARIA widgets<br />They work!<br />Demos <br />
  49. 49. LEAVE HTML5 ALONE!<br />Do we really have to use ARIA instead of HTML5 elements?<br />
  50. 50. Why not do Both?<br />
  51. 51. Combining Landmarks<br /><header role="banner"><br /><div role="search"><input type="search" /></div><br /><article role="main"><br /><aside role="complementary"><br /><footer role="contentinfo"><br />
  52. 52. Combining Widgets<br />A bit more tricky<br />You either want a working HTML5 widget, or a working ARIA widget<br />Modularize your widgets using libraries<br />Perform browser sniffing to decide whether to generate an HTML5 or ARIA component<br />
  53. 53. In a nutshell<br />HTML5 is going to be great <br />Until then, use ARIA for an accessible rich UI<br />Combine where possible<br />
  54. 54. Questions?<br />