2. Agenda
What is Accessibility?
Why Accessibility?
Enabling Accessibility
Use Dijit
ARIA
Demo
Mobile
Can Stephen Hawking Use your Dojo App? DojoConf 2011 2
2
3. What is Accessibility?
Can Stephen Hawking Use your Dojo App? DojoConf 2011 3
3
Accessibility does not mean “open 24 hours”!
4. What is Accessibility?
Can Stephen Hawking Use your Dojo App? DojoConf 2011 3
3
Accessibility does not mean “open 24 hours”!
5. What is Accessibility?
Can Stephen Hawking Use your Dojo App? DojoConf 2011 3
3
Accessibility does not mean “open 24 hours”!
6. Vision Issues
Can Stephen Hawking Use your Dojo App? DojoConf 2011 4
4
People with no or low vision (pictures on this page include a boy with a white cane and a
woman with a seeing eye dog).
7. Mobility Issues
Can Stephen Hawking Use your Dojo App? DojoConf 2011 5
5
Pictures depict a woman in a wheelchair, a man with no arms, and a boy with a cast on both arms.
8. Mobility Issues
Can Stephen Hawking Use your Dojo App? DojoConf 2011 5
5
Pictures depict a woman in a wheelchair, a man with no arms, and a boy with a cast on both arms.
9. More
Learning
Hearing
Age
Color Blindness
.......
Can Stephen Hawking Use your Dojo App? DojoConf 2011 6
6
10. Don’t Build Sites Like This
Can Stephen Hawking Use your Dojo App? DojoConf 2011 7
7
Picture shows a woman in a wheelchair facing a set of stairs.
11. Why Accessibility?
Can Stephen Hawking Use your Dojo App? DojoConf 2011 8
8
US Government - Disabilities Act, Section 508, EU, Australia, Canada, Japan, others all have accessibility laws
According to the US Department of Labor, PWD have $175 billion in discretionary spending. That is four times the spending power of “tweens”.
12. Why Accessibility?
Legal
Can Stephen Hawking Use your Dojo App? DojoConf 2011 8
8
US Government - Disabilities Act, Section 508, EU, Australia, Canada, Japan, others all have accessibility laws
According to the US Department of Labor, PWD have $175 billion in discretionary spending. That is four times the spending power of “tweens”.
13. Why Accessibility?
Legal
Buying Power
Can Stephen Hawking Use your Dojo App? DojoConf 2011 8
8
US Government - Disabilities Act, Section 508, EU, Australia, Canada, Japan, others all have accessibility laws
According to the US Department of Labor, PWD have $175 billion in discretionary spending. That is four times the spending power of “tweens”.
14. Why Accessibility?
Legal
Buying Power
Altruism
Can Stephen Hawking Use your Dojo App? DojoConf 2011 8
8
US Government - Disabilities Act, Section 508, EU, Australia, Canada, Japan, others all have accessibility laws
According to the US Department of Labor, PWD have $175 billion in discretionary spending. That is four times the spending power of “tweens”.
16. Tabindex is your friend
tabindex = -1 - item is focusable
tabindex = 0 - item is in the tab order
tabindex = x - item in fixed tab order
Can Stephen Hawking Use your Dojo App? DojoConf 2011 10
10
17. Use Semantic HTML
<div class=”myCoolH1”>Topics</div>
<div class=”myCoolH1” role=”heading”>Topics</div>
<h1 class=myCoolH1”>Topics</div>
Can Stephen Hawking Use your Dojo App? DojoConf 2011 11
11
18. Use Semantic HTML
<div class=”myCoolH1”>Topics</div>
<div class=”myCoolH1” role=”heading”>Topics</div>
<h1 class=myCoolH1”>Topics</div>
Can Stephen Hawking Use your Dojo App? DojoConf 2011 11
11
19. Label Form Elements
<label for=”addr”>Address: </label>
<input type=”text” id=”addr” name=”addr”>
Alternatives if the designer
insists on no visible text:
<img src=”house.png” alt=””>
<input type=”text” id=”addr” name=”addr” aria-label=”enter address”>
or
<label for="addr"><img src="home.png" alt="enter address"> </label>
<input id="addr" type="text" size="50">
Can Stephen Hawking Use your Dojo App? DojoConf 2011 12
12
Image shows a possible input control with no text label - it has a picture of a house preceding the text control. You could use aria-label=”enter
address” to provide the label.
20. Image alt text
Add alt text to meaningful images
<img src=”youWin.png” alt=”You Win!”>
Empty alt text if not
<img src=”shelby.png” alt=””>
(gratuitous image)
Can Stephen Hawking Use your Dojo App? DojoConf 2011 13
13
Two images on this page. One is image of text, “You Win!” other is a cute kitten.
21. Support Windows High
Contrast Mode
Screen capture of rich text editor with a toolbar
containing images
Screen capture of same editor in high contrast black
on white mode - button images a no longer visible
Can Stephen Hawking Use your Dojo App? DojoConf 2011 14
14
Image of rich text editor in standard mode with visible buttons
Another image of same rich text editor in black on white high contrast mode - none of the button images are visible.
22. Use Dijit Widgets!
Fully Keyboard Accessible
High Contrast & Low Vision Support
Assistive Technology Support
Can Stephen Hawking Use your Dojo App? DojoConf 2011 15
15
23. Keyboard
All dijit widgets usable via keyboard only
Implemented via tabindex and keyboard events
keyboard focus trapped in dialogs until dismissed
ondijitclick event
traps mouse click and enter / space key press
focus manager to track, get and set focus
Can Stephen Hawking Use your Dojo App? DojoConf 2011 16
16
24. High Contrast
programmatically detect Windows high contrast mode
add dojo_a11y style onto body element
<body class=”claro” role=”application”> becomes
<body class=”claro dijit_a11y” role=”application”>
provide dojo_a11y styles to provide:
text alternative to css images
additional styles to enhance focus, activation,
selection
Can Stephen Hawking Use your Dojo App? DojoConf 2011 17
17
25. High Contrast Example
Example dijit dialog in Example dijit dialog in high
“standard” mode contrast white on black mode
Can Stephen Hawking Use your Dojo App? DojoConf 2011 18
18
26. High Contrast Template
dijit/templates/Dialog.html
<div class="dijitDialog" role="dialog" aria-labelledby="${id}_title">
<div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
<span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"></
span>
<span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-
attach-event="ondijitclick: onCancel" title="${buttonCancel}" role="button"
tabIndex="-1">
<span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}">
x
</span>
</span>
</div>
<div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent"></div>
</div>
Can Stephen Hawking Use your Dojo App? DojoConf 2011 19
19
27. High Contrast Styles
excerpt from dijit/themes/dijit.css:
.dijitDialog .closeText {
display:none;
/* for the onhover border in high contrast on IE: */
position:absolute;
}
.dijit_a11y .dijitDialog .closeText {
display:inline;
}
Can Stephen Hawking Use your Dojo App? DojoConf 2011 20
20
28. Assistive Technology
Support via ARIA
Accesible Rich Internet Applications
W3C Recommendation
Adds roles, states & properties to scripted elements to
enable assistive technology support
Can Stephen Hawking Use your Dojo App? DojoConf 2011 21
21
29. Tree Control Example
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)
Can Stephen Hawking Use your Dojo App? DojoConf 2011 22
22
Picture of a dijit tree control showing the continents. Africa, Asia, Austrailia, Europe, North America and South America are expandable tree nodes.
Africa is currently expanded with Egypt, Kenya and Sudan as sub-nodes. Egypt is the selected node.
30. ARIA Examples
Roles States & Properties
tree, treeItem required
tabcontainer, tablist,tab expanded, checked
spinner, progressbar valuemin, valuemax, valuenow
menubar, menu, menuitem describedby, labelledby, label
grid, gridcell owns, haspopup
more more
Can Stephen Hawking Use your Dojo App? DojoConf 2011 23
23
31. Common ARIA Roles
landmarks identify the main regions on the page
application, banner main, navigation search, form, complementary, contentinfo,
form
presentation
Prevents screen reader from including the element in the a11y hierarchy
Can Stephen Hawking Use your Dojo App? DojoConf 2011 24
24
32. Common ARIA States &
Properties
aria-liveregion
identifies any area that is dynamically updated and how it should be announced
aria-required, aria-invalid, aria-readonly, aria-disabled
useful on elements requiring input
aria-describedby, aria-labelledby, aria-label
connect a description or label to an element
Can Stephen Hawking Use your Dojo App? DojoConf 2011 25
25
35. Mobile
iOS provides best accessibility support
VoiceOver screen reader built in
Good ARIA support in mobile safari
Universal Events
generic events rather than keyboard event
“expand” event rather than “right mouse click”
Can Stephen Hawking Use your Dojo App? DojoConf 2011 27
27
36. Questions?
ARIA / Accessibility Info
WAI-ARIA Intro - http://www.w3.org/WAI/intro/aria.php
Accessibility Intro - http://www.w3.org/WAI/intro/accessibility.php
Dijit Accessibility
Dijit reference - http://dojotoolkit.org/reference-guide/dijit/index.html#dijit-index
Each dijit widget reference page has an accessibility section
Reach me at becky at dojotoolkit dot org
Thanks!
Can Stephen Hawking Use your Dojo App? DojoConf 2011 28
28
