Making JavaScript Accessible
11 likes1,698 views
This document discusses making JavaScript accessible, addressing misconceptions and issues related to keyboard access, content changes, and the usability of JavaScript in various scenarios. It emphasizes the importance of progressive enhancement and the use of WAI-ARIA to improve accessibility for users with different needs. The content also touches on the advancements brought by HTML5 in enhancing the accessibility of web functionalities.
Making JavaScript Accessible
- 1. Making JavaScript Accessible BayJax - The Bay Area Ajax and JavaScript Meetup June 15, 2010 Yahoo! HQ - Sunnyvale, CA
- 2. Agenda About Me Misconceptions Issues with JavaScript and Accessibility Progressive Enhancement WAI-ARIA About HTML5 Links
- 3. About Me Author of Web Axe, blog and podcast on web accessibility. Author of AccessibleTwitter.com. Done work for a variety of companies including Ford, Google, Disney, and RIM. I like motorcycling, Star Wars, espresso, Woody Allen movies, and playing guitar.
- 4. Mis conceptions All users have a mouse. JavaScript is always available. Screen readers don't support JavaScript. Making it accessible is too difficult.
- 5. Issues with JavaScript and Accessibility Keyboard access Content changes Appropriate usage Unavailable
- 6. Issues - Keyboard Access Must provide keyboard access to support non-mouse input devices. Keyboards and alternative keyboards Sip-and-puff systems Wands and sticks Electronic tracking devices (eye, brain) Joysticks Trackballs Touch screens
- 7. Issues - Keyboard Access alternative keyboard trackball headstick
- 8. Issues - Keyboard Access The following screenshot shows an example of core functionality that is not available with a keyboard.
- 10. Issues - Keyboard Access The following screenshot shows an example of links which can be accessed with a keyboard, but a sighted user has no clue of the cursor location.
- 12. Issues - Keyboard Access Tips If you use the onMouseOver and onMouseOut JavaScript handlers, you must also use onFocus and onBlur. Make the focus clear & visible. Do no use the double-click handler (onDblClick). Use tabindex=0 and tabindex=-1 to make normally keyboard inaccessible links accessible.
- 13. Issues - Content Changes What It Is When page content is updated without a page refresh. Usually Ajax.
- 14. Issues - Content Changes How To Help "Yellow gradient flash" convention for sighted users. ARIA for screen readers (more coming). The trusty JavaScript alert.
- 16. Issues - Appropriate Usage Only use JavaScript: when necessary to enhance behavior
- 18. Issues - Unavailable Surprise! Users may not have JavaScript available in their user agent. Approximately 4% of users, but difficult to track.
- 19. Issues - Unavailable Mobile browsers and other devices (Kindle). Older browsers. Blind users who can't afford the expensive JAWS screen reader. Corporate users that sit behind a firewall that blocks JavaScript at the source. Those who turn it off purposely (security, speed, preference).
- 20. Progressive Enhancement Progressive Enhancement is a method of implementing web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page. Build basic content and functionality first . Not "graceful degradation". Plan Ajax from the start, implement at the end.
- 21. Progressive Enhancement Content - Semantic HTML Presentation - CSS Behavior - JavaScript
- 22. Progressive Enhancement Core principles basic content should be accessible to all browsers basic functionality should be accessible to all browsers sparse, semantic markup contains all content enhanced layout is provided by externally linked CSS *enhanced behavior is provided by unobtrusive, externally linked JavaScript end user browser preferences are respected http://en.wikipedia.org/wiki/Progressive_enhancement
- 26. WAI-ARIA A W3C draft Accessible Rich Internet Applications Suite "roles, states, and properties to make widgets, navigation, and behaviors accessible"
- 27. WAI-ARIA Landmark Roles Labeling and Describing States and Properties Live Regions Form Properties Controls Drag-and-Drop Support
- 28. WAI-ARIA Live Regions - Great for Ajax! aria-live="off" aria-live="polite" - updates announced if the user is not currently doing anything. aria-live="assertive" - updates announced as soon as possible, but it is not necessary to immediately interrupt the user.
- 30. WAI-ARIA aria-atomic="false" This is the default. Change can be presented on its own; the AT should not present the entire region. Reduces repetitive information that has not changed. Ensure content can be understood by the user. aria-atomic="true" When there is a change, the AT should present the entire region, not just the change. For context.
- 31. WAI-ARIA aria-busy="true" Suppresses AT presentation changes while a region is updating.
- 32. About HTML5 HTML5 will make many complex JavaScript (and Flash) features inherently accessible by integrating them natively with the browser. Audio/video controls Input elements Date picker, color picker Validation (required attribute) Formatting i.e. URL, email Drag-and-drop
- 33. Links Hijax: Progressive Enhancement with Ajax Understanding Progressive Enhancement Accessible Javascript with and without WAI ARIA Unintentional Discrimination - Custom Built Applications Introduction to WAI ARIA Future Web Accessibility: New <input> Types in HTML5 Dennis on Twitter: @DennisL, @AccessibleTwitr, @WebAxe