Making JavaScript Accessible BayJax - The Bay Area Ajax and JavaScript Meetup June 15, 2010 Yahoo! HQ - Sunnyvale, CA
Agenda <ul><ul><li>About Me </li></ul></ul><ul><ul><li>Misconceptions </li></ul></ul><ul><ul><li>Issues with JavaScript an...
About Me <ul><ul><li>Author of Web Axe, blog and podcast on web accessibility. </li></ul></ul><ul><ul><li>Author of Access...
Mis conceptions <ul><ul><li>All users have a mouse. </li></ul></ul><ul><ul><li>JavaScript is always available. </li></ul><...
Issues with JavaScript and Accessibility <ul><ul><li>Keyboard access </li></ul></ul><ul><ul><li>Content changes </li></ul>...
Issues - Keyboard Access <ul><ul><li>Must provide keyboard access to support non-mouse input devices. </li></ul></ul><ul><...
Issues - Keyboard Access <ul><li>alternative keyboard </li></ul>trackball headstick
Issues - Keyboard Access <ul><li>The following screenshot shows an example of core functionality that is not available wit...
 
Issues - Keyboard Access <ul><li>The following screenshot shows an example of links which can be accessed with a keyboard,...
 
Issues - Keyboard Access <ul><li>Tips </li></ul><ul><ul><li>If you use the onMouseOver and onMouseOut JavaScript handlers,...
Issues - Content Changes <ul><li>What It Is </li></ul><ul><ul><li>When page content is updated without a page refresh. </l...
Issues - Content Changes <ul><li>How To Help </li></ul><ul><ul><li>&quot;Yellow gradient flash&quot; convention for sighte...
 
Issues - Appropriate Usage <ul><li>Only use JavaScript: </li></ul><ul><ul><li>when necessary </li></ul></ul><ul><ul><li>to...
 
Issues - Unavailable <ul><ul><li>Surprise! Users may not have JavaScript available in their user agent. </li></ul></ul><ul...
Issues - Unavailable <ul><ul><li>Mobile browsers and other devices (Kindle). </li></ul></ul><ul><ul><li>Older browsers. </...
Progressive Enhancement <ul><ul><li>Progressive Enhancement is a method of implementing web technologies in a layered fash...
Progressive Enhancement <ul><ul><li>Content - Semantic HTML </li></ul></ul><ul><ul><li>Presentation - CSS </li></ul></ul><...
Progressive Enhancement <ul><li>Core principles </li></ul><ul><ul><li>basic content should be accessible to all browsers <...
 
 
 
WAI-ARIA <ul><ul><li>A W3C draft </li></ul></ul><ul><ul><li>Accessible Rich Internet Applications Suite </li></ul></ul><ul...
WAI-ARIA <ul><ul><li>Landmark Roles </li></ul></ul><ul><ul><li>Labeling and Describing </li></ul></ul><ul><ul><li>States a...
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...
 
WAI-ARIA <ul><li>aria-atomic=&quot;false&quot; </li></ul><ul><ul><li>This is the default.  </li></ul></ul><ul><ul><li>Chan...
WAI-ARIA <ul><li>aria-busy=&quot;true&quot; </li></ul><ul><ul><li>Suppresses AT presentation changes while a region is upd...
About HTML5 <ul><li>HTML5 will make many complex JavaScript (and Flash) features inherently accessible by integrating them...
Links <ul><ul><li>Hijax: Progressive Enhancement with Ajax </li></ul></ul><ul><ul><li>Understanding Progressive Enhancemen...
Upcoming SlideShare
Loading in...5
×

Making JavaScript Accessible

3,623

Published on

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

Published in: Technology, Design
3 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,623
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
3
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "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 AccessibleTwitter.com. </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>http://en.wikipedia.org/wiki/Progressive_enhancement </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>

×