Transcript of Real World Accessibility Becky Gibson Dojo Accessibility Lead IBM Web Accessibility Architect.
- 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!