Can Steven Hawking Use your Dojo App?
- 1. Can Stephen Hawking Use your Dojo App? Becky Gibson IBM Emerging Internet Technologies 1 1
- 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”.
- 15. Enabling Accessibility (Accessibility 101) Add Keyboard Support Can Stephen Hawking Use your Dojo App? DojoConf 2011 9 9
- 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
- 33. Demo Can Stephen Hawking Use your Dojo App? DojoConf 2011 26 26
- 34. Demo Can Stephen Hawking Use your Dojo App? DojoConf 2011 26 26
- 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