back to CATS home


CalWac2 Notes: JavaScript and Accessibility

User: kristin
Date: 4/25/2007 3:24 pm
Views: 93098
Rating: 68    Rate [





By Jordan Casper,, University of Texas at Austin. Most of the session involved creating and analyzing scripts, which can be found at

Session Highlights:

  • 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.

Javascript is NOT content, but functionality
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.

Review of Accessible JS Guidelines:

    Rule 1: Don’t require Javascript
    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:

Mozilla JS Reference:

Gecko DOM Reference:

Douglas Crockford’s blog: