Slide 1

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

Slide 2

2 Top 3 Reasons People Dont Implement Accessibility

Slide 3

3 3. My site IS accessible - its up 24x7!

Slide 4

4 2. People with Disabilities dont use my site

Slide 5

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

Slide 6

6 All these companies are doing it

Slide 7

7 ARIA - Accessible Rich Internet Applications

Slide 8

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

Slide 9

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

Slide 10

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)

Slide 11

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

Slide 12

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

Slide 13

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

Slide 14

14 Landmarks Example banner Navigation Main contentinfo

Slide 15 WebA11y WebA11y Info from selected tree item is loaded here "> WebA11y WebA11y

15 Landmark Example WebA11y Info from selected tree item is loaded here

Slide 16

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

Slide 17

17 Live Region Example

Slide 18 Message Contents loaded here">

18 Live Region Example Message Contents loaded here

Slide 19

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!