Slide text from BayJax presentation "Making JavaScript Accessible"
[Presentation on Slideshare]
Making JavaScript Accessible
BayJax on Accessibility (BayJax - The Bay Area Ajax and JavaScript Meetup)
Presented by Dennis Lembree
June 15, 2010
Yahoo! HQ - Sunnyvale, CA
Agenda
- About Me
- Misconceptions
- Issues with JavaScript and Accessibility
- Progressive Enhancement
- WAI-ARIA
- About HTML5
- Links
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.
Misconceptions
- All users have a mouse.
- JavaScript is always available.
- Screen readers don't support JavaScript.
- Making it accessible is too difficult.
Issues with JavaScript and Accessibility
- Keyboard access
- Content changes
- Appropriate usage
- Unavailable
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
- Issues - Keyboard Access
- alternative keyboard
- trackball
- headstick
Issues - Keyboard Access
The following screenshot shows an example of core functionality that is not available with a keyboard.
Image: Screen shot of Twitter.com page with blank section highlighted that should have links.
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.
Image: Screen shot of CNN home page. Politics tab is selected but not visually distinguishable.
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.
Issues - Content Changes
What It Is
- When page content is updated without a page refresh.
- Usually Ajax.
Issues - Content Changes
How To Help
- "Yellow gradient flash" convention for sighted users.
- ARIA for screen readers (more coming).
- The trusty JavaScript alert.
Image: Screen shot of Accessible Twitter page with JavaScript alert that says "Success! You are now following web axe".
Issues - Appropriate Usage
Only use JavaScript:
- when necessary
- to enhance behavior
Image: Screen shot of CA.gov web page with breadcrumbs highlighted. In this site's implementation, the breadcrumbs require JavaScript.
Issues - Unavailable
- Surprise! Users may not have JavaScript available in their user agent.
- Approximately 4% of users, but difficult to track.
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).
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.
Progressive Enhancement
- Content - Semantic HTML
- Presentation - CSS
- Behavior - JavaScript
Image: Illustration of peanut M&M. Peanut is content; chocolate is presentation, and candy shell is client-side scripting (behavior/JavaScript).
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
(taken from Wikipedia)
Image: AccessibleTwitter.com main page with JavaScript off.
Image: AccessibleTwitter.com main page with JavaScript on.
Image: Accessible Twitter.com main page with JavaScript on. Features that are enhanced are highlighted including character counter and open/close toggle for Shorten URL and Add Image features.
WAI-ARIA
- A W3C draft
- Accessible Rich Internet Applications Suite
- "roles, states, and properties to make widgets, navigation, and behaviors accessible"
WAI-ARIA
- Landmark Roles
- Labeling and Describing
- States and Properties
- Live Regions
- Form Properties
- Controls
- Drag-and-Drop Support
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.
Image: Accessible Twitter.com main page. The character counter is highlighted. The following code labels it: aria-live="polite"
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.
WAI-ARIA
aria-busy="true"
Suppresses AT presentation changes while a region is updating.
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
Links
Dennis on Twitter:
@DennisL, @AccessibleTwitr, @WebAxe