1.
HTML5 accessibility<br />is it ready yet?<br />Steve Faulkner & Hans Hillen <br />The Paciello Group (TPG)<br />

2.
HTML5 process<br />W3WHATWGC<br />W3C<br />WHATWG<br />

3.
and then there’s the rest who <br />probably don’t care<br />photo by Joel bez<br />

4.
“accessibility<br />is about more than <br />screen readers...”<br />

5.
...but in this session we are talking about assistive technology support, if you are expecting more you will be disappointed<br />

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.
Accessibility API<br />Input device<br />browser<br />role=button<br />state=focused<br />value=submit query<br />action=press<br />

8.
so, is it ready yet?<br />HTML5 accessibility<br />that is????<br />

9.
short answer:<br />NO!<br />

10.
long answer is:<br />NOT BY A<br />LONG SHOT<br />

11.
NIT BY A LING SHIT<br />LING<br />(HTML5)<br /> <------ NIT (accessibility)<br />

12.
AccessibleHTML5<br />will be a beautiful thing<br />

13.
HTML5 is <br />a work <br />in progress<br />

14.
<ul><li>form controls

15.
structures

16.
canvas

17.
video

18.
audio

19.
ARIA

20.
‘fallback’

21.
‘text alternatives’</li></li></ul><li>whoaretheheroes?<br />

22.
who are <br />thevillains?<br />

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.
bolt-on<br />VS<br />built-in<br />

25.
a tale of 2 browsers<br />

26.
a tale of 2 browsers<br />Opera mini<br />Safari<br />Using VoiceOver<br />

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.
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.
but if it’s done right <br />it makes no difference<br />to the end user...<br />

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

33.
“So if HTML5 A11Y is not ready…<br />WHAT IS!?!?”<br />

34.
The answer is simple really… <br />

35.
…websites built in the 90's!<br />Cause only web 1.0 can be accessible<br />WRONG<br />

36.
Some HTML5 works tomorrow…<br />WAI-ARIA works today!<br />Why not use it in the meantime?<br />

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.
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.
No equivalent

40.
<nav>

41.
<input type="search">?

42.
No equivalent

43.
<aside>

44.
<form>

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.
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.
What about Widgets?<br />

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.
LEAVE HTML5 ALONE!<br />Do we really have to use ARIA instead of HTML5 elements?<br />

50.
Why not do Both?<br />

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.
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.
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.
Questions?<br />