WebAIM - Web Accessibility In Mind

Accessible Javascript
Other Issues

Dynamic Content and Accessibility

CSS and JavaScript are sometimes used to display, hide, or move information based upon input from the user or pre-programmed commands. This is sometimes called Dynamic HTML (DHTML). Most drop-down or fly-out menus or other types of rich interactions involve scripting. Because most of these elements are modified based upon mouse input, they are typically inaccessible to users who do not use a mouse. When dynamic content and interactions is used, two items must be evaluated to determine its impact on accessibility:

  1. Is the event used to trigger a change device independent? If the mouse is required, then it is not fully accessible.
  2. Is the dynamic content or functionality itself accessible? If assistive technologies cannot adequately access dynamically triggered content or functionality, then it is not fully accessible.

JavaScript Generated Content

Content generated by JavaScript, such as through document.write or other functions is generally accessible to assistive technologies. In some cases, however, if the dynamic content is constantly changing or if it changes while the user is reading it or has set focus to it, this can interfere with navigation or browser functionality and cause accessibility problems. For example, if an element that has keyboard focus is significantly changed, hidden, or removed from the page, keyboard focus may revert to the very beginning of the page.

When using dynamic information, you must first ask yourself if it is necessary and vital to the function or content of the page. If so, there is often a way to provide the content without using inaccessible JavaScript. For instance, ensuring that the dynamic content is generated via user command or interaction, rather than automatically or randomly, can ensure that the content does not change when it is focused or being read.

Additionally, sometimes dynamic content needs to receive keyboard focus. For example, a dialog box that appears will likely need to be given focus (using JavaScript focus()) after it appears to ensure it is navigated or read immediately. Additional techniques may be necessary to ensure accessibility for such dynamic elements - a modal dialog, for example, may need to be programmed to maintain keyboard focus (rather than allowing focus into other parts of the page that are not available).

Pop-up Windows

Pop-up windows provide a unique accessibility concern. First of all, most usability experts would argue against the use of pop-up windows except in extreme cases. For a visual user, it may be difficult to notice and navigate to the new window or tab. For someone who is using assistive technologies, the new window may be annoying and confusing because the default behavior for the link has been modified. JavaScript implementation may make the new window difficult or impossible to resize or scale for someone using a screen enlarger. For someone who is blind, there is typically an indication that a new window has opened, but it may be burdensome to then return back to the original page. When the screen reader user attempts to return to the previous page by selecting the back button, it may be confusing to find that this does not work.

When using JavaScript to open new windows, you can modify the size and position of the new window. You can also add or remove functionality of the window, such as the ability to resize, display scroll bars, show tool bars, etc. Be very careful when changing the default behavior of the browser window. If a user has low vision and must enlarge the content, a small window that cannot be enlarged and does not display scroll bars would be very inaccessible. Someone with a motor disability may rely upon large tool bars to accurately control the web browser, so removing or modifying them may introduce difficulties for this user.

As you can see, there are many difficulties in both usability and accessibility that arise through the use of pop-up windows. Care must be taken in making the decision to use them. If they are used, thorough user testing of your implementation is vital to ensure accessibility. It is generally best to alert the user to the fact that a pop-up window will be opened.

Redirecting and Refreshing Browser Windows

When the page the browser is viewing suddenly changes or refreshes, the person viewing that page may become disoriented or confused, especially if that person is using an assistive technology. This is commonly done with page redirects when page content has been moved or updated, or with scripting or <meta> tags to refresh pages automatically. Accessibility guidelines requires that users be given control over time sensitive content changes. Do not automatically change or refresh the browser window without first alerting the user that the change will occur and giving him/her the ability to disable or postpone the change, or even better, give the user full control over the page change or redirect.

Using Pure CSS as a JavaScript Alternative

As mentioned previously, Cascading Style Sheet (CSS) parameters are often modified using JavaScript to create dynamically changing content. However, much of the dynamic functionality often controlled with JavaScript is now available directly within the specifications for CSS itself. This allows the construction of interactive and dynamic navigation and layout elements without the need for JavaScript events. You can create drop-down menus, interactive images, animation, and other exciting features in web sites without worrying about device dependent event handlers.

It's important to note that CSS is intended for visual styling. As such, screen readers largely ignore CSS. It should not generally be used to present content or functionality, at least not without ensuring the content or functionality is fully accessible. Using CSS alone to produce dynamic content should only employed with much testing in a variety of browsers and screen readers.