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">&nbsp;</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

HTML5accessibility.com

“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?