Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making JavaScript Accessible

Presented by Dennis Lembree at the BayJax - The Bay Area Ajax and JavaScript Meetup, June 15, 2010, Yahoo! HQ, Sunnyvale, CA.

  • Login to see the comments

Making JavaScript Accessible

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