This presentation introduces HTML5 and ARIA accessibility. It also introduces best practices and common problems. It was created for Intuit and PayPal/eBay engineers.
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
HTML5 and ARIA accessibility - Bangalore 2013
1. HTML5 and ARIA
ಪ"#ೕ%&'( )*ಯ,-
Ted Drake, Intuit Accessibility
Bengaluru, 2013
Wednesday, May 22, 13
Goddess Durga, Shri Hanuman, Goddess Kali and Shiva Family
Accessibility Warriors
2. In the good ol’ days...
Wednesday, May 22, 13
ancient funfare by abrinsky
3. We had text
Wednesday, May 22, 13
Original internet pages were text based and accessible.
Images were introduced and pages were still easy to read.
Yahoo! circa 197
4. Then came design
Wednesday, May 22, 13
“Geocities 1996” a tribute to Geocities web designs on CSS Zen Garden
animated gifs, clashing colors, flashing images, and more
“Creating Killer Web Sites” released in 1997 by David Siegel introduces the spacer gif, table-
based layout, and so much more
5. Salvation Arrived
Wednesday, May 22, 13
Jeffrey Zeldman and friends introduce web standards
Return to semantic, structural markup.
design and interactions are separated from markup.
6. “Design” returned
Some rights reserved by DanCentury on Flickr
Wednesday, May 22, 13
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.
7. Take a deep breath
Wednesday, May 22, 13
photo: truck stop By Meanest Indian
9. a reality check
Wednesday, May 22, 13
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
10. HTML5 includes
• More powerful
forms
• CSS3
• Canvas and SVG
• Audio and Video
• JavaScript tools
• Device Integration
• Semantic structure
• WAI-ARIA
Wednesday, May 22, 13
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 flash
Audio and Video specs are still devloping.
JavaScript enhanced with web workers, sockets, local storage, browser api
11. Good Stuff
• Native Interactions
• Enhanced Form Elements
• Semantic Structure
• Universal Mobile Platform
Wednesday, May 22, 13
browsers handle interactions natively, no need for JS
improved form structure
new tags
12. Native Support
• Browsers replace plugins and
JavaScript
• Consistency
• Extensible
• Device specific
Wednesday, May 22, 13
consistent interactions across the web as browsers replace adhoc js and plugins
browsers provide hooks for extending experience via CSS and JS
13. Super Forms
Wednesday, May 22, 13
• New input types: email, url, date, number...
• New attributes: placeholder, autofocus, required...
• Combine with ARIA: aria-required, aria-describedby...
• Backwards compatible
14. Super Forms
Wednesday, May 22, 13
• New input types: email, url, date, number...
• New attributes: placeholder, autofocus, required...
• Combine with ARIA: aria-required, aria-describedby...
• Backwards compatible
15. No More ‘Divitis’!
Wednesday, May 22, 13
the generic div and span tags have been abused. HTML5 introduces new semantic containers
to avoid a page filled with nothing but divs.
16. 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
Wednesday, May 22, 13
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.
17. 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”>
Wednesday, May 22, 13
<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.
18. New Attributes
• Custom data attribute:
• data-dosa=”paneer”
• Timestamps: datetime=”2011-03-16”
• Microdata
Wednesday, May 22, 13
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/
19. Use Today
• Geolocation
• Form attributes
• ARIA
• CSS3
• Offline storage
• Web Workers, Web Sockets
• Audio, Video (with fallback)
Wednesday, May 22, 13
20. Accessible Rich Internet Applications
Bridge for Accessibility
Wednesday, May 22, 13
ARIA best practices
http://www.w3.org/TR/wai-‐aria-‐practices/
photo: Krishnarajapuram Bridge By sravi_in (Busy at work)
21. ARIA Rules
1. Don’t use ARIA if
native tag is available.
2. See #1
Wednesday, May 22, 13
The best user experience is created with the semantic HTML tags. ARIA is meant to fix 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”
22. ARIA... the tag snatcher
Wednesday, May 22, 13
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
23. ARIA... the tag snatcher
Wednesday, May 22, 13
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
24. 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
Wednesday, May 22, 13
W3C Web Accessibility Initiative: Accessible Rich Internet Applications
26. 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>
Wednesday, May 22, 13
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
27. States
• <iframe aria-hidden=”true”></iframe>
• <input aria-invalid=”true”>
• <a aria-selected=”true”>Home</a>
• <input aria-disabled=”true”>
Wednesday, May 22, 13
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.
28. • <input aria-label=”Search”>
• <h3 id=”addressHome”>Home</h3>
<input aria-labelledby=”addressHome”>
• <input aria-invalid=”true” aria-
describedby=”pwordError”>
Wednesday, May 22, 13
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
29. 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”>
Wednesday, May 22, 13
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
30. 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”
Wednesday, May 22, 13
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
31. ARIA Quick Fixes
• <a href=”#” role=”button”>
• <input aria-label=”enter search
term” ...>
• <input aria-describedby=”error” ...>
• <table role=”presentation>
Wednesday, May 22, 13
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.
32. Form with table layout
aria-describedby restores fieldset/legend
semantics
Wednesday, May 22, 13
aria-describedby points to the header’s id. This adds the text after the radio button’s label.
33. Form with table layout
aria-describedby restores fieldset/legend
semantics
Wednesday, May 22, 13
aria-describedby points to the header’s id. This adds the text after the radio button’s label.
34. Fix Pseudo-Table
Wednesday, May 22, 13
The ARIA grid roles allow us to re-define the table structure and provides accessibility when
the display is comprised of multiple tables, divs, and other markup
35. Fix Pseudo-Table
Wednesday, May 22, 13
The ARIA grid roles allow us to re-define the table structure and provides accessibility when
the display is comprised of multiple tables, divs, and other markup
36. Wednesday, May 22, 13
Use aria-describedby to point to the error message
use aria-invalid to define which inputs are invalid.
37. Wednesday, May 22, 13
Use aria-describedby to point to the error message
use aria-invalid to define which inputs are invalid.
38. Wednesday, May 22, 13
This progress bar was previously not available to screen reader, but had a title attribute to
clarify the progress information.
This was fixed via tabindex and ARIA
39. Wednesday, May 22, 13
This progress bar was previously not available to screen reader, but had a title attribute to
clarify the progress information.
This was fixed via tabindex and ARIA
40. Combining
HTML5 & ARIA
Wednesday, May 22, 13
specification for HTML5 + ARIA http://www.w3.org/html/wg/drafts/html/master/dom.html#wai-aria
photo: Durga riding her lion, preceded by Hanuman
41. 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
Wednesday, May 22, 13
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
42. • <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”>
Wednesday, May 22, 13
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 defines 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.
44. • <div role=”button” tabindex=”0”>
• <div role=”application”>
• <canvas>[text]</canvas>
• <img role=”presentation”>
Wednesday, May 22, 13
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 flow.
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://
45. Ted DRAKE
Sr. Accessibility Engineer
Intuit Accessibility, CTO
ted_drake@intuit.com
h: last-child.com
t: @ted_drake
s: slideshare.net/7mary4
f: flickr.com/draket
Wednesday, May 22, 13
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