Real World Accessibility Becky Gibson Dojo Accessibility Lead

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

Top 3 Reasons People Don’t Implement Accessibility 2

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

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

1. Adding A 11 y is too hard and will ruin my design is doing it UI is doing it 5

All these companies are doing it 6

ARIA - Accessible Rich Internet Applications 7

ARIA - What is it? • Accessible Rich Internet Applications • W 3 C 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, IE 8 with Opera and Safari under development • Gaining increasing support by browsers, Web toolkits and assistive technologies 8

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 9

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

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

ARIA- States State Values checked disabled true | false | mixed true | false readonly true | false expanded true | false valuemin, valuemax, valuenow owns, haspopup CDATA describedby. labelledby Many more ……. IDREF 12

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

Landmarks Example banner Navigation Main contentinfo 14

Landmark Example <div dojo. Type="dijit. layout. Content. Pane" region="top" class="banner" role="banner"> <span class="logo">Web. A 11 y</span> </div><!-- end of top --> <div id="left" dojo. Type="dijit. layout. Content. Pane" region="left" role="navigation"> <!-- Tree goes here --> </div><!-- end of left --> <div id="content" dojo. Type="dijit. layout. Content. Pane" title="Content" role="main" aria-live="assertive" aria-atomic="true" > Info from selected tree item is loaded here </div><!-- end of center --> <div dojo. Type="dijit. layout. Content. Pane" region="bottom" role="contentinfo" > <!-- footer goes here --> </div><!-- end of bottom --> 15

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 16

Live Region Example 17

Live Region Example <!-- message preview pane --> <div id="message" dojo. Type="dijit. layout. Content. Pane" region="center" min. Size="20" role="region" aria-live="assertive" aria-atomic="true" > Message Contents loaded here </div> <!-- end of "message" --> 18

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