Post on 18-Dec-2014
description
HTML5 accessibility
is it ready yet?
Steve Faulkner & Hans Hillen The Paciello Group (TPG)
W3C
HTML5 process
WHATWG
W3WHATWGC
and then there’s the rest who probably don’t care
photo by Joel bez
“accessibility is about more than
screen readers...”
...but in this session we are talking about assistive technology support, if you are expecting more you will be disappointed
rolesstatespropertiesinteraction
Accessibility APIs
MSAAIaccessible2UI automationAXSTK
+ device independentinteraction
Accessibility API
role=button
action=press
state=focused
value=submit query
browser
Input device
so, is it ready yet?
HTML5 accessibilitythat is????
short answer:
NO!
LONG SHOT
long answer is:
NOT BY A
NIT BY A LING SHIT
LING(HTML5)
<------ NIT (accessibility)
Accessible HTML5
will be a beautiful thing
HTML5 is a work in progress
•form controls•structures•canvas•video•audio•ARIA•‘fallback’•‘text alternatives’
who are theheroes?
who are the villains?
when will browsers expose HTML5 features via accessibility APIs
?
?
?
?
?
when will browsers implement HTML5 UI features?
when will browsers implement HTML5 UI features in a way that developers will want to use them?
bolt-on
VS
built-in
a tale of 2 browsers
a tale of 2 browsersOpera mini Safari
Using VoiceOver
accessibility is always bolted on, sometimes by
more
less
1. Browsers
2. ATs
3. CMS/tool developers
4. library developers5. web developers
6. users
generally speaking, the earlier it is bolted on, the more robust
more
less
1. Browsers
2. ATs
3. CMS/tool developers
4. library developers5. web developers
6. users
but if it’s done right it makes no difference to the end user...
<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 unselectable="on" act="9" closure_uid_1bjdqs="1012"><DIV class="J-J5-Ji J-K-I-Kv-H" unselectable="on"><DIV class="J-J5-Ji J-K-I-J6-H" unselectable="on"><DIV class=J-K-I-KC unselectable="on"><DIV class=J-K-I-K9-KP unselectable="on"> </DIV><DIV class=J-K-I-Jz unselectable="on">Report spam</DIV> </DIV></DIV></DIV></DIV>
...and no matter what is bolted on by the browser, developers will find a reason to want something else
which is why WAI-ARIA is needed
preaching abstinence does not work
accessibility = the art of creative inclusivity
accessibility = the art of the killjoy
“So if HTML5 A11Y is not ready…
WHAT IS!?!?”
The answer is simple really…
…websites built in the 90's!Cause only web 1.0 can be accessible
WRONG
Some HTML5 works tomorrow…
WAI-ARIA works today!
Why not use it in the meantime?
ARIA Landmark Roles
• Identify and label commonly used , relevant sections on a web page
• Screen readers users can quickly locate these sections and navigate between them
• Demo
Some Landmark Roles actually map to HTML5 Section Elements , some don't
ARIA
role="banner"role="main"
role="navigation"role="search"
role="contentinfo"role="complementary"
role="form"role="application"
HTML5 <header>? No equivalent <nav> <input
type="search">? No equivalent <aside> <form> no equivalent
What's with the Question Marks?
• For banner, main, contentinfo roles…
• <header>, <article>, <footer>…
THERE CAN BE ONLY ONE!For each (nested) application or document
Use as many as you like!
And Search?
• Role="search" represents the entire search moduleoHints, instructions, etc.oComplex search optionsoRole Can be set on containers
• <input type="search"> is just the form control
• But, in some use cases they can be equivalent
What about Widgets?
Well, What about Them?
• Many HTML5 widgets are eitheroNot implemented yetoNot exposing accessibility information
yet
• So for now just use ARIA widgetso They work!oDemos
LEAVE HTML5 ALONE!
Do we really have to use ARIA instead of HTML5 elements?
Why not do Both?
Combining Landmarks
• <header role="banner">• <div role="search"><input type="search"
/></div>• <article role="main">• <aside role="complementary">• <footer role="contentinfo">
Combining Widgets
• A bit more trickyo You either want a working HTML5
widget, or a working ARIA widgetoModularize your widgets using librarieso Perform browser sniffing to decide whether to
generate an HTML5 or ARIA component
In a nutshell
• HTML5 is going to be great • Until then, use ARIA for an accessible
rich UI• Combine where possible
Questions?