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 24x7!
3
2. People with Disabilities don’t use
my site
4
1. Adding A11y is too hard and will
ruin my design
is doing it
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
• 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
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
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 dojoType="dijit.layout.ContentPane" region="top"
class="banner" role="banner">
<span class="logo">WebA11y</span>
</div><!-- end of top -->
<div id="left" dojoType="dijit.layout.ContentPane" region="left"
role="navigation">
<!-- Tree goes here -->
</div><!-- end of left -->
<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><!-- end of center -->
<div dojoType="dijit.layout.ContentPane" 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" dojoType="dijit.layout.ContentPane"
region="center" minSize="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