DEV 2.3 Use JavaScript wisely

Use JavaScript by all means but, for essential information, provide a non-JavaScript dependent accessible alternative. Some people use browsers that do not support JavaScript or they have it turned off.

  • Do not rely on JavaScript alone for important content or functionality:
    • Ensure the content still makes sense and can still be used when scripts are turned off:
      • Provide alternative content using the <noscript>tag.
  • JavaScript - enabled content that requires use of the mouse must be accessible without the mouse:
    • Use redundant event handlers:
      • OnKeypress + OnClick,
      • OnMousedown + OnKeydown,
      • OnMouseUP + OnKeyup,
      • Do not use OnDblclick.
  • Do not rely solely on client-side scripts for form validation etc:
    • Use redundant server-side scripts as well as client side scripts
    • NB: This is also a good idea for security reasons.
  • Avoid use of JavaScript links:
    • Unless you provide a default link that is not JavaScript dependent.
  • Avoid automatic submission in form elements:
    • OnChange is often used for automatically submitting dropdown (select) menus. This is not accessible by the keyboard so a submit button should be provided.

Tip: Simple image rollover effects etc. are fine as long as the image replacement doesn't contain additional information.

What about AJAX ?

AJAX uses JavaScript to bind several technologies together to create web pages that can be updated 'on the fly' by exchanging small amounts of data with a server rather than requiring full page reloads.

Reliance on JavaScript is an accessibility issue in itself and so a non-JavaScript dependent alternative (in fact equivalent) should also be provided.

A major issue of AJAX use is the need to ensure that all users will be aware of when changes to the page contents occur. Possible solutions to this include providing visual and non-visual alerts, and potentially offering the option to turn these on and off.

In the end, careful development and testing of AJAX applications needs to occur in order to ensure usability and accessibility.

A script is present that displays a colour picker. Poor noscript: sorry your browser... Good noscript: a list of links for choosing colours   Poor: an automatically submitting dropdown. Good: a dropdown with a submit button so that it can be used by people using a keyboard