HTML5 and ARIA accessibility - Bangalore 2013

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...


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


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.

http://creativecommons.org/licenses/by-nc/2.0/

http://creativecommons.org/licenses/by-nc/2.0/

http://www.flickr.com/photos/dancentury/

http://www.flickr.com/photos/dancentury/

Take a deep breathWednesday, May 22, 13

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


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


browsers handle interactions natively, no need for JSimproved form structurenew tags

Native Support• Browsers replace plugins and

JavaScript

• Consistency

• Extensible

• Device specific


consistent interactions across the web as browsers replace adhoc js and pluginsbrowsers 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

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


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.

http://december.com/html/4/element/script.html

http://december.com/html/4/element/script.html

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, 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)


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


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


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


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


W3C Web Accessibility Initiative: Accessible Rich Internet Applications

ARIA Landmarksrole=”banner” | role=”search” | role=”main” | role=”complementary”


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>


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”>


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”>


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”>


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”


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>


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


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


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-define the table structure and provides accessibility when the display is comprised of multiple tables, divs, and other markup

Fix Pseudo-Table


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


Use aria-describedby to point to the error messageuse aria-invalid to define which inputs are invalid.


Use aria-describedby to point to the error messageuse aria-invalid to define 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 fixed via tabindex and ARIA


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


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


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 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.


•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 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


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

mailto:[email protected]

mailto:[email protected]