Accessible JavaScript
- Unlike HTML/XHTML or CSS, it is not always possible to make a JavaScript site fully accessible. That said it is still important to make the site as accessible and usable as it can be. The key to creating functionally accessible JavaScript is to keep it simple and unobtrusive.
- Be aware that there are several JavaScript issues which may frustrate and/or confuse users and, as such, should be avoided whenever possible. For example:
- Changes to the browser, such changing the size of the current window.
- Changes to basic browser functions, such as disabling the back button or the "right-click" feature.
- Critical content or functionality that is dependent on JavaScript being enabled, such as navigation menus.
- It's always best to learn how to write scripts, rather than blindly trusting a pre-made script from some random site. If you must use a pre-made script, be sure to check the date. Anything older than a few years will use older methods that are most certainly inaccessible and non-standard.
- All JavaScript functions and event handlers should be contained within a separate .js file linked from the HTML page with
<script type="text/javascript" src="doSomething.js"></script>.
- Always remember that there are users who use their keyboards to navigate web sites and may, in fact, only be able to use keyboards – JavaScript events triggered only by mouse actions will be inaccessible to them. Always add handlers
"onFocus" and "onBlur" to any function that uses "onMouseOver" and "onMouseOut" to trigger an element.
- Remember that using the
<noscript> tag does nothing for accessibility. It only provides the non-script content if JavaScript is disabled and there's no way to guarantee that users will have disabled JavaScript on their browsers. It's better to make the effort to make JavaScript is as accessible as possible and not use the <noscript> tag as a way out of it.
- If both script and non-script versions of a page are required – and if it's not absolutely needed, don't do it – always use the
location.replace() function, rather than the location.href() function. This enables users to use the back button to return to the previous page.
Main Navigation
Additional Information