Skip header information, go directly to contentWeb Accessibility Center home page. Web-AIM tutorials. Web Accessibility in Mind (Web-AIM) home page.

Return to Tutorials List

Javascript

JavaScript and Dynamic HTML

  • Whenever possible, use server-side scripting rather than client-side scripting.
  • Provide meaningful <noscript> content, offering access to an non-JavaScript version of the same functionality.
  • Don't use JavaScripts that require a mouse.
  • Don't use JavaScript redirects.
  • If you use JavaScript functions in links, also provide a real link destination (e.g. <a href="http://www.webaim.org/" onClick="javascript(this)">)
  • Avoid the use of gratuitous popup windows.
  • Warn users if a link will open a new window.
  • Use caution when changing the focus without the user's permission.

What is JavaScript?

This may best be answered by defining what JavaScript is NOT. First, it is not HTML. JavaScript does not use HTML tags or abide by any of the general rules of the HTML programming language. You can however, use JavaScript with HTML on a webpage. Second, JavaScript is not Java. Although JavaScript is often called Java, the two are not the same. Java was developed by Sun Microsystems and is a stand-alone programming language. JavaScript, on the other hand, was developed by Netscape Corporation. Although similar to Java, JavaScript is not a stand-alone language; in order for JavaScript to work, it must be part of a webpage that is being displayed in a browser that understands the JavaScript language. Java alone can be implemented in webpages as a built in program, whereas JavaScript scripts are reliant upon the client (visitor's) computer in order for them to work. JavaScript is really a stripped down version of Sun Microsystems Java language. There are similarities between the two, but they function quite differently.

Once again, JavaScript is not HTML or a version of HTML. It is a distinct, separate programming language. HTML is read and processed by the web browser. When the browser reads JavaScript code within your HTML document, it processes the code, then displays any output within the Web page. The computer reading the JavaScript must have a JavaScript interpreter, a program that interprets the script and runs it, and that interpreter must be enabled.

HTML alone creates very static pages. There is little user interaction and little by the way of dynamic content. HTML can't think; it does not have the capabilities to perform mathematics, store variables, or dynamically display content. JavaScript allows your Web page to 'think'. Because JavaScript is a programming language, it allows developers to implement little programs into their pages. The programs may do things as simple as changing a graphic when the mouse rolls over it to performing complex mathematical formulas on user input.

What is Dynamic HTML (DHTML)?

DHTML is a combination or Cascading Style Sheets and JavaScript. Cascading style sheets give you the ability to place items anywhere within the page, by specifying values for height, width, coordinates, and even depth for sections of page content. With JavaScript you can change these values 'on-the-fly' or dynamically based on user input, time of day, or any number of conditions.

JavaScript and DHTML problems

Dynamic HTML (DHTML) may or may not be accessible to users of assistive technologies. Many of the current screen readers use Internet Explorer as their means of browsing the Web. Internet Explorer is JavaScript-enabled, but this still does not mean that the individual JavaScripts will be accessible. If the JavaScript requires that the mouse be used (as in the case of many DHTML menus), then the JavaScript is inaccessible to those who use screen readers, and to those who use some physical aid devices. See the keyboard accessibility article for more information about such menus. If the JavaScript creates a simple rollover, which provides no additional information to the user (such as rollovers which make images glow), then there is no need to make any additional accessibility changes. Accessibility of DHTML only matters when the content is important.

onChange and onSelect
Some Web designers create forms that either change or redirect the user to another page or form element when an item is selected. These JavaScript features do not require the user to hit a submit button. The problem with such menus is that they do not allow for keyboard accessibility. When a user tries to scroll the list of options, the JavaScript interprets this scrolling as an "onSelect" event, which then sends the user to another page. It is nearly impossible to navigate through such menu systems without a mouse. Do not use this type of form submit command in JavaScript.

Page redirects
There are JavaScripts which redirect the user to another page as soon as the first page is loaded. This can be disorienting, and makes it more difficult to go back in the browser to the previous page (because the person has to hit the back button twice, quickly, rather than one time). It is possible to trap the user on a page, so they cannot leave without closing the browser or manually entering a new page address to go to.

Popup windows
JavaScripts which open up more than window at a time (such as sites that open up small ads when you go to the home page) can also be disorienting, because the focus leaves the main page, and the person is stuck in a new window, with an undesirable ad that the person would just rather avoid. Even if the popup window is not an annoying ad, exercise caution with new windows.

Changing focus
As with popup windows, JavaScript can change the focus on the Web page. This is much like selecting a form item with your mouse, but is done without the users knowledge. Users with screen readers or assistive devices may become disoriented or may not be able to access all of your page content.

Removing toolbars
When opening a popup window with JavaScript, the developer has the option to not display toolbars, status bars, scroll bars, etc. on the new window. These items provide accessibility functions for certain disability types. Use caution in removing standard browser tools. The developer can also set the window so that it cannot be resized. This can be difficult for a user that magnifies the screen. They will then have to view the content greatly magnified through the small window the developer specified, rather than the full screen browser window they are used to.

Providing alternatives

Due to the fact that you cannot count on everyone having JavaScript-enabled browsers, you must provide some sort of alternative. The most straightforward way to provide an alternative for JavaScript-generated content is to provide content within the NOSCRIPT tag. It is not sufficient to simply say, "your browser does not support JavaScript." Ideally, you should provide exactly the same content or functionality in a way that does not require JavaScript. Sometimes, however, if JavaScript is used to encrypt information, or in some other way is providing functionality that cannot be duplicated in HTML, then you have a couple of options. First, you should consider alternatives to your current method. Is the JavaScript really necessary? Is there some other way to provide this information in an accessible format? If you can find another way, you should at least investigate its possibilities. If you discover that there really is no alternative, then you can at the very least provide an email address or some other contact information so that those without JavaScript can contact you. In some cases, it may be appropriate to provide phone-based services that duplicate the functionality of the JavaScript page. Just be very careful not to require JavaScript when you don't have to. Always test your JavaScripted pages in a browser with the JavaScript turned off.

 

Top of Page || Return to Tutorials List

This Tutorial is reproduced on this site with the kind permission of WebAIM. For additional information and resources on web accessibility please visit http://www.webaim.org.

© Copyright 2000-2001 WebAIM. All Rights Reserved. Terms of Use.