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.

of

HTML5 Accessibility - Is it ready yet? Slide 1 HTML5 Accessibility - Is it ready yet? Slide 2 HTML5 Accessibility - Is it ready yet? Slide 3 HTML5 Accessibility - Is it ready yet? Slide 4 HTML5 Accessibility - Is it ready yet? Slide 5 HTML5 Accessibility - Is it ready yet? Slide 6 HTML5 Accessibility - Is it ready yet? Slide 7 HTML5 Accessibility - Is it ready yet? Slide 8 HTML5 Accessibility - Is it ready yet? Slide 9 HTML5 Accessibility - Is it ready yet? Slide 10 HTML5 Accessibility - Is it ready yet? Slide 11 HTML5 Accessibility - Is it ready yet? Slide 12 HTML5 Accessibility - Is it ready yet? Slide 13 HTML5 Accessibility - Is it ready yet? Slide 14 HTML5 Accessibility - Is it ready yet? Slide 15 HTML5 Accessibility - Is it ready yet? Slide 16 HTML5 Accessibility - Is it ready yet? Slide 17 HTML5 Accessibility - Is it ready yet? Slide 18 HTML5 Accessibility - Is it ready yet? Slide 19 HTML5 Accessibility - Is it ready yet? Slide 20 HTML5 Accessibility - Is it ready yet? Slide 21 HTML5 Accessibility - Is it ready yet? Slide 22 HTML5 Accessibility - Is it ready yet? Slide 23 HTML5 Accessibility - Is it ready yet? Slide 24 HTML5 Accessibility - Is it ready yet? Slide 25 HTML5 Accessibility - Is it ready yet? Slide 26 HTML5 Accessibility - Is it ready yet? Slide 27 HTML5 Accessibility - Is it ready yet? Slide 28 HTML5 Accessibility - Is it ready yet? Slide 29 HTML5 Accessibility - Is it ready yet? Slide 30 HTML5 Accessibility - Is it ready yet? Slide 31 HTML5 Accessibility - Is it ready yet? Slide 32 HTML5 Accessibility - Is it ready yet? Slide 33 HTML5 Accessibility - Is it ready yet? Slide 34 HTML5 Accessibility - Is it ready yet? Slide 35 HTML5 Accessibility - Is it ready yet? Slide 36 HTML5 Accessibility - Is it ready yet? Slide 37 HTML5 Accessibility - Is it ready yet? Slide 38 HTML5 Accessibility - Is it ready yet? Slide 39 HTML5 Accessibility - Is it ready yet? Slide 40 HTML5 Accessibility - Is it ready yet? Slide 41 HTML5 Accessibility - Is it ready yet? Slide 42
Upcoming SlideShare
H5C3 meetup - Accessibility & WebGL
Next
Download to read offline and view in fullscreen.

9 Likes

Share

Download to read offline

HTML5 Accessibility - Is it ready yet?

Download to read offline

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?

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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. HTML5accessibility.com<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 />
  • dotjay

    Apr. 8, 2011
  • mobiletexas

    Apr. 3, 2011
  • alopezblanes

    Dec. 22, 2010
  • amyschan

    Oct. 19, 2010
  • sindrewimberger

    Oct. 18, 2010
  • mcturvey

    Oct. 15, 2010
  • rubenmedios

    Oct. 13, 2010
  • webaxe

    Oct. 13, 2010
  • cidboechat

    Oct. 13, 2010

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?

Views

Total views

6,626

On Slideshare

0

From embeds

0

Number of embeds

675

Actions

Downloads

47

Shares

0

Comments

0

Likes

9

×