HTML5 and ARIAಪ"#ೕ%&'( )*ಯ,-
Ted Drake, Intuit AccessibilityBengaluru, 2013
Wednesday, May 22, 13
Goddess Durga, Shri Hanuman, Goddess Kali and Shiva Family Accessibility Warriors
In the good ol’ days...
Wednesday, May 22, 13
ancient funfare by abrinsky
We had textWednesday, May 22, 13
Original internet pages were text based and accessible.Images were introduced and pages were still easy to read.Yahoo! circa 197
Then came designWednesday, May 22, 13
“Geocities 1996” a tribute to Geocities web designs on CSS Zen Gardenanimated 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
Salvation ArrivedWednesday, May 22, 13
Jeffrey Zeldman and friends introduce web standardsReturn to semantic, structural markup.design and interactions are separated from markup.
“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 formselements no longer behave naturally.
Take a deep breathWednesday, May 22, 13
photo: truck stop By Meanest Indian
What is HTML5?
Wednesday, May 22, 13
Accessibility support: www.HTML5accessibility.com
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 WHATWGCombine best of XHTML with HTMLEnthusiasts 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
Wednesday, May 22, 13
XForms became HTML5 formsCSS3 has been under development for years, browsers are rapidly adopting it.Canvas and SVG are not new, browser support is allowing them to replace flashAudio 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
Wednesday, May 22, 13
browsers handle interactions natively, no need for JSimproved form structurenew tags
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 pluginsbrowsers provide hooks for extending experience via CSS and JS
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
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
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.
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-elementstime 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”>
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.
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, itemscopeadd 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
• Offline storage
• Web Workers, Web Sockets
• Audio, Video (with fallback)
Wednesday, May 22, 13
Accessible Rich Internet Applications
Bridge for AccessibilityWednesday, May 22, 13
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
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”
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 valuearia-label will replace the inline text or alt valuearia-describedby, depending on the use, replaces the title attribute value.invasion of the body snatchers: http://www.youtube.com/watch?v=WFnSxeDfENk
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 valuearia-label will replace the inline text or alt valuearia-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
Wednesday, May 22, 13
W3C Web Accessibility Initiative: Accessible Rich Internet Applications
ARIA Landmarksrole=”banner” | role=”search” | role=”main” | role=”complementary”
Wednesday, May 22, 13
role=”banner” | role=”search” | role=”main” | role=”complementary”
Don’t over-use complementary and section
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 roleshttp://www.w3.org/TR/wai-aria/rolesroles 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”>
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 messagearia-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”>
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
WidgetsARIA 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 usageARIA does not provide the functionality, developer must create this with JavaScriptDHML 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 RegionsAnnounce 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 changedaria-relevant=”additions | removals | text | all” what to announcearia-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>
Wednesday, May 22, 13
Use role=”button” on links that trigger an action, not take the user to a new pagearia-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 idrole=”presentation” on layout table tells the screen reader its not for data.
Form with table layoutaria-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.
Form with table layoutaria-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.
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
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
Wednesday, May 22, 13
Use aria-describedby to point to the error messageuse aria-invalid to define which inputs are invalid.
Wednesday, May 22, 13
Use aria-describedby to point to the error messageuse aria-invalid to define which inputs are invalid.
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
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
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
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
• <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.
Wednesday, May 22, 13
•Invalid code•no text•mouse only
• <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 spanDon’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://blog.paciellogroup.com/2012/06/html5-canvas-accessibility-in-firefox-13/ role=”presentation” removes semantics, it doesn’t hide contentphoto: How do I get out of here??
Ted DRAKESr. Accessibility EngineerIntuit Accessibility, [email protected]
h: last-child.comt: @ted_drakes: slideshare.net/7mary4f: 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
Top Related