HTML5 and ARIA accessibility - Bangalore 2013

HTML5 and ARIA
ಪ"#ೕ%&'( )*ಯ,-
Ted Drake, Intuit Accessibility
Bengaluru, 2013
Wednesday, May 22, 13
Goddess Durga, Shri Hanuman, Goddess Kali and Shiva Family
Accessibility Warriors

In the good ol’ days...
ancient funfare by abrinsky

We had text
Original internet pages were text based and accessible.
Images were introduced and pages were still easy to read.
Yahoo! circa 197

Then came design
“Geocities 1996” a tribute to Geocities web designs on CSS Zen Garden
animated gifs, clashing colors, ﬂashing images, and more
“Creating Killer Web Sites” released in 1997 by David Siegel introduces the spacer gif, table-
based layout, and so much more

Salvation Arrived
Jeffrey Zeldman and friends introduce web standards
Return to semantic, structural markup.
design and interactions are separated from markup.

“Design” returned
Some rights reserved by DanCentury on Flickr
Web 2.0 introduced application-like web sites.
AJAX for dynamic content changes, drag and drop interfaces, semantic elements transform
into forms
elements no longer behave naturally.

Take a deep breath
photo: truck stop By Meanest Indian

What is HTML5?
Accessibility
support:
www.HTML5accessibility.com

a reality check
HTML5 is the result of recognizing web sites were moving from documents to web
applications.
Initial spec written by WHATWG
Combine best of XHTML with HTML
Enthusiasts began lumping the various elements under the HTML5 moniker

HTML5 includes
• More powerful
forms
• CSS3
• Canvas and SVG
• Audio and Video
• JavaScript tools
• Device Integration
• Semantic structure
• WAI-ARIA
XForms became HTML5 forms
CSS3 has been under development for years, browsers are rapidly adopting it.
Canvas and SVG are not new, browser support is allowing them to replace ﬂash
Audio and Video specs are still devloping.
JavaScript enhanced with web workers, sockets, local storage, browser api

Good Stuff
• Native Interactions
• Enhanced Form Elements
• Semantic Structure
• Universal Mobile Platform
browsers handle interactions natively, no need for JS
improved form structure
new tags

Native Support
• Browsers replace plugins and
JavaScript
• Consistency
• Extensible
• Device speciﬁc
consistent interactions across the web as browsers replace adhoc js and plugins
browsers provide hooks for extending experience via CSS and JS

Super Forms
• New input types: email, url, date, number...
• New attributes: placeholder, autofocus, required...
• Combine with ARIA: aria-required, aria-describedby...
• Backwards compatible

No More ‘Divitis’!
the generic div and span tags have been abused. HTML5 introduces new semantic containers
to avoid a page ﬁlled with nothing but divs.

Semantic Tags
• New containers: article, section, aside,
footer, header, nav, and now main
• New & improved tags: dl, time, datalist,
ruby
• Shift from document to modular design
ARIA and new elements can be combined for fallback. Avoid wrapping element in a div with
the same role, <div role=”navigation”><nav>
http://diveintohtml5.org/semantics.html#new-elements
time also uses datetime and optional pubdate attributes for expanding publish date in
machine readable timestamp.

Support for Tags
• Most browsers will treat them as inline.
Use display:block
• Firefox 4 = IAccessible2
• Internet Explorer needs JS
<script>document.createElement("header")</script>
• Safe to mix with ARIA
<nav role=”navigation”>
<script>document.createElement("header")</script>
IAccessible2 is an engineered accessibility interface allowing application developers to leverage their investment in MSAA while also providing an Assistive Technology (AT) access to rich document
applications such as the IBM Workplace productivity editors and web browsers such as Firefox. The additional functionality includes support for rich text, tables, spreadsheets, Web 2.0 applications, and other
large mainstream applications.

New Attributes
• Custom data attribute:
• data-dosa=”paneer”
• Timestamps: datetime=”2011-03-16”
• Microdata
the data-foo pattern avoids placing related information in hidden divs, rel/rev/title
attributes.
http://html5doctor.com/microdata/ - similar to microformats, uses itemtype, itemprop,
itemscope
add pubdate to the time tag to show this was a published event <time datetime=”” pubdate>
Native drag and drop, integrate with aria http://html5doctor.com/accessibility-native-drag-
and-drop/

Use Today
• Geolocation
• Form attributes
• ARIA
• CSS3
• Ofﬂine storage
• Web Workers, Web Sockets
• Audio, Video (with fallback)

Accessible Rich Internet Applications
Bridge for Accessibility
ARIA best practices
http://www.w3.org/TR/wai-‐aria-‐practices/

photo: Krishnarajapuram Bridge By sravi_in (Busy at work)

ARIA Rules
1. Don’t use ARIA if
native tag is available.
2. See #1
The best user experience is created with the semantic HTML tags. ARIA is meant to ﬁx areas
that cannot use existing native elements.
Use <button> instead of role=”button”
Use <table> instead of role=”grid”
Use <img> instead of role=”img”

ARIA... the tag snatcher
ARIA trumps the value of anything it is applied to.
role attribute changes the host tag to the role’s value
aria-label will replace the inline text or alt value
aria-describedby, depending on the use, replaces the title attribute value.
invasion of the body snatchers: http://www.youtube.com/watch?v=WFnSxeDfENk

ARIA
• Web application functionality
• Landmark structure: navigation, banner,
search, main
• Meta information: aria-hidden, aria-label
• Live regions for dynamic content
• Attributes placed on HTML tags
W3C Web Accessibility Initiative: Accessible Rich Internet Applications

Roles Restore Semantics
• <div role=”img”></div>
• <a role=”button”></div>
• <div role=”grid”></div>
• <ul role=”navigation”></ul>
• <p role=”header” aria-level=”3”></p>
ARIA roles restore semantics when HTML tags are used incorrectly.
Developers should use the correct tag before adding ARIA roles
http://www.w3.org/TR/wai-aria/roles
roles may be better supported than HTML5 tags

States
• <iframe aria-hidden=”true”></iframe>
• <input aria-invalid=”true”>
• <a aria-selected=”true”>Home</a>
• <input aria-disabled=”true”>
Use aria-hidden on iframes that contain beacons and other non-content
place aria-invalid on inputs that have been determined are invalid. combine with aria-
describedby, which points to an error message
aria-selected=”true” is helpful for showing the selected option in navigation or for pseudo
inputs.
aria-disabled replicates the disabled attribute on an input.

• <input aria-label=”Search”>
• <h3 id=”addressHome”>Home</h3>
<input aria-labelledby=”addressHome”>
• <input aria-invalid=”true” aria-
describedby=”pwordError”>
aria-label provides a label to assistive technology.
aria-labelledby and aria-describedby point to an element on the page that provides a label or description. This element can be
hidden with display:none.
aria-label and aria-labelledby may not satisfy automated accessibility testing. The standard label is still preferred.
photo: Taj Mahal Palace Hotel, Bombay By born1945

Widgets
ARIA announces widget purpose,
JavaScript is needed for interaction
• <a role=”slider”>Volume</a>
• <div role=”alert”></div>
• <ul role=”tree”></ul>
• <input role=”combobox”>
These widget roles let the user know what to expect from complex interactions.
User experience should match desktop software usage
ARIA does not provide the functionality, developer must create this with JavaScript
DHML Style Guide is good start for interaction behavior http://dev.aol.com/
dhtml_style_guide/
http://www.w3.org/TR/wai-aria/roles#widget_roles

Live Regions
Announce content when there are changes
• aria-live=”polite” - waits until user stops typing
• aria-live=”assertive” - immediately spoken
• role=”alert” - implicitly sets aria-live=”assertive”
• Other roles:
• “alertdialog”
• “timer”
• “log”
• “marquee”
• “status”
aria-atomic=”true|false” - speak the whole content or just what changed
aria-relevant=”additions | removals | text | all” what to announce
aria-busy=”true” - announces a loading, false is default

ARIA Quick Fixes
• <a href=”#” role=”button”>
• <input aria-label=”enter search
term” ...>
• <input aria-describedby=”error” ...>
• <table role=”presentation>
Use role=”button” on links that trigger an action, not take the user to a new page
aria-label for adding a label to an input that has no label.
aria-describedby points to invalid input alert. points to a section of content with id
role=”presentation” on layout table tells the screen reader its not for data.

Form with table layout
aria-describedby restores ﬁeldset/legend
semantics
aria-describedby points to the header’s id. This adds the text after the radio button’s label.

Fix Pseudo-Table
The ARIA grid roles allow us to re-deﬁne the table structure and provides accessibility when
the display is comprised of multiple tables, divs, and other markup

Use aria-describedby to point to the error message
use aria-invalid to deﬁne which inputs are invalid.

This progress bar was previously not available to screen reader, but had a title attribute to
clarify the progress information.
This was ﬁxed via tabindex and ARIA

Combining
HTML5 & ARIA
speciﬁcation for HTML5 + ARIA http://www.w3.org/html/wg/drafts/html/master/dom.html#wai-aria
photo: Durga riding her lion, preceded by Hanuman

When to Choose
• Use ARIA when HTML5 element is not
well supported <ul role=”navigation”>
• Use HTML5 when it provides more
functionality and equally supported
<input required>
• Use both: <nav role=”navigation”>
• ARIA trumps native semantics
the required attribute will be announced by assistive technology. It also triggers browser
based validation and valid/invalid states can be targeted via CSS and JS.
Place ARIA attribute on the HTML5 tag that it matches, not on a child.
ARIA is meant to replace the semantics of a tag. It’s like !important

• <div id=”maincontent” role=”main”>
<main id=”maincontent” role=”main”>
• Good: <form role=”search”>
Wrong: <input type=”search” role=”search”>
• <nav>
<ul role=”navigation”>
• <input required aria-required=”true”>
The main tag was added to HTML5 in 2013. Safe to combine with role=”main”. Continue to
use id for skip link.
The search role deﬁnes the form’s purpose. input type=”search” has its own semantics.
required attribute is well enough supported that you do not need to duplicate with aria-
required.

•Invalid code
•no text
•mouse only

• <div role=”button” tabindex=”0”>
• <div role=”application”>
• <canvas>[text]</canvas>
• <img role=”presentation”>
Common problems:
role=”button” should be for elements that trigger an action, i.e. javascript link.
It is not needed for keyboard focus.
Don’t place tabindex=”0” on elements that should not be in keyboard ﬂow.
Use a link or button instead of div or span
Don’t use role=”application” unless you know what you are doing. It is very complex.
Text nodes are not surfaced via canvas. Starting to be supported http://

Ted DRAKE
Sr. Accessibility Engineer
Intuit Accessibility, CTO
ted_drake@intuit.com
h: last-child.com
t: @ted_drake
s: slideshare.net/7mary4
f: ﬂickr.com/draket
I am always available for questions and advice. Do not hesitate to send emails with questions,
I will try to answer, possibly with sample code, as soon as possible.
Follow me on twitter and slideshare

HTML5 and ARIA accessibility - Bangalore 2013

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (10)

Similaire à HTML5 and ARIA accessibility - Bangalore 2013

Similaire à HTML5 and ARIA accessibility - Bangalore 2013 (20)

Plus de Ted Drake

Plus de Ted Drake (20)

Dernier

Dernier (20)

HTML5 and ARIA accessibility - Bangalore 2013