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!