Real World Accessibility Becky Gibson Dojo Accessibility Lead IBM Web Accessibility Architect

2 Top 3 Reasons People Don’t Implement Accessibility

3 3. My site IS accessible - it’s up 24x7!

4 2. People with Disabilities don’t use my site

5 1. Adding A11y is too hard and will ruin my design is doing it UI is doing it

6 All these companies are doing it

7 ARIA - Accessible Rich Internet Applications

8 ARIA - What is it? Accessible Rich Internet Applications W3C Specification, like HTML, CSS, XML etc. Within Protocols & Formats Working Group which is part of WAI - Web Accessibility Initiative In Last Call Status Implemented in Firefox, IE8 with Opera and Safari under development Gaining increasing support by browsers, Web toolkits and assistive technologies

9 ARIA Overview Add role semantics to scripted UI elements Update state information dynamically Make items focusable via tabindex attribute Add keyboard event handling –Mimic the keyboard behavior of the rich client UI –Minimize tab key navigation Add live region info and notification to support Ajax

10 ARIA Example - Tree Role = tree (on outer container) Role = treeitem expanded=true (on open Africa node) Role = treeitem expanded=false (on closed Australia node) Role = treeitem selected=true (on highlighted Egypt child node with no children)

11 ARIA Roles link combobox, option checkbox radio, radiogroup button progressbar slider spinbutton tree, treeitem alert application presentation group grid, gridcell tab, tabcontainer, tablist, tabpanel list, listitem menubar, menu toolbar more……

12 ARIA- States StateValues checkedtrue | false | mixed disabledtrue | false readonlytrue | false expandedtrue | false valuemin, valuemax, valuenow CDATA owns, haspopupIDREF describedby. labelledbyIDREF Many more …….

13 ARIA Landmark Roles Makes finding and navigating to sections of the page easier –Application –Banner –Complementary –Contentinfo –Main –Navigation –search

14 Landmarks Example banner Navigation Main contentinfo

15 Landmark Example <div dojoType="dijit.layout.ContentPane" region="top" class="banner" role="banner"> WebA11y <div id="content" dojoType="dijit.layout.ContentPane" title="Content" role="main" aria-live="assertive" aria-atomic="true" > Info from selected tree item is loaded here <div dojoType="dijit.layout.ContentPane" region="bottom" role="contentinfo" >

16 ARIA Live Regions Perceivable sections are identified with region role Live indicates region is updated –Values of: Off, Polite, Assertive, Rude Atomic identifies the extent of updates –True – entire region is updated and relevant –False – only changed element needs to be presented to user

17 Live Region Example

18 Live Region Example <div id="message" dojoType="dijit.layout.ContentPane" region="center" minSize="20" role="region" aria-live="assertive" aria-atomic="true" > Message Contents loaded here

19 Summary JS Toolkits are implementing ARIA - use them! –Dojo dijits are all fully accessible ARIA makes Ajax accessible Make your websites dynamic AND accessible!