By Jordan Casper, www.jkdesign.org, University of Texas at Austin. Most of the session involved creating and analyzing scripts, which can be found at http://www.jkdesign.org/JS/slides/calwac_2006_ex.html
- Provide the same access for all users of your site. When JS is used to enhance functionality, make sure there’s a way for users to accomplish any major task without JS.
- All modern screenreaders will execute JS. However, the user may choose to turn this off, or be using an older reader, so code must degrade gracefully.
- Using <noscript> to inform users your site reqires JS is NOT degrading gracefully. Do not use.
- ‘removed’ works for non-sighted viewers: Most browsers recognize the enter key or spacebar pressed over a link or button as an ‘removed’ event.
CSS is presentation
HTML is content.
JS and CSS should be completely separate from content.
Common JS Accessibility issues:
- Messy or no degradation: (if JS is turned off, how does page react? Does content degrade into basic functionality? Make sure users can do what the NEED to do without JS. Make functions unobtrusive: if JS not enabled, user shouldn’t see scripting, only content. Code div tags into JS so that functions only appear when JS is enabled.
- Broswer/platform dependence: don’t use browser sniffing. Instead, focus on what different browsers can do. Use if/else statements.
- Inaccessible event handling: don’t REQUIRE event handling. Don’t hijack expected user experience. Alerts: Screenreaders pick up js alert boxes, but not new text on a page (example: alerts on forms within a text area created after user submits form.)
- ‘hidden’ dynamic elements: any time you change something on a page, inform the user.
- Inaccessible popup windows: using JS to open new windows not a problem, as long as your allow information to be displayed in another manner. Key to accessible pop-ups is using the anchor tag’s own properties, and degrade gracefully when JS isn’t available. Inform the user a new window will open.
Rule 2: Code for abilities, not browsers
Rule 3: Let user know what you’re doing
Rule 4: Test thoroughly
Rule 5: Remain unobtrusive
Presentation slides: http://www.jkdesign.org/JS/slides/calwac_2006.html
Gecko DOM Reference: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
Douglas Crockford’s blog: http://www.crockford.com