Skip to navigation | Skip to content Join the Facebook page Ideos Join the Ideos page on Twitter

Translation

Back to the original French page Read this page in Italian by Google Translation Read this page in Portuguese by Google Translation Read this page in English by Google Translation Read this page in German by Google Translation Read this page in Spanish by Google Translation Read this page in Arabic by Google Translation Read this page in Hebrew by Google Translation

Space Ideos

Other issues of accessibility of Javascript

Go to the beginning of the content without using the bar Consultation and Sharing How to use the bar Consultation and Sharing Listen to the main content of this page
Print Print the main content of this page Send Email the main content of this page Share Share on TwitThis Share on Facebook Share this page on Wikio Share this page on Google Share on LinkedIn Share on Digg Share this page on del.icio.us Share this page on Netvibes

Warning: the original version of this document is Creating Accessible JavaScript: Other Issues . This French translation was done by Ideos under an agreement between WebAIM and Ideos .

Note: See page documents on web accessibility for a list of all translated documents. Other resources on web accessibility are also listed in the digital portal accessible .

Summary

  1. Page 1: Introduction
  2. Page 2: JavaScript event handler
  3. Page 3: Other issues of accessibility of Javascript
    1. Dynamic HTML and accessibility
    2. Use document.write
      1. Exemple avec document.write
    3. Pop-up
      1. Example of pop-up
    4. Redirection and refresh browser windows
    5. Use CSS valid as an alternative to JavaScript
  4. Page 4: Alternatives to JavaScript
  5. Page 5: Summary for accessible Javascript

Dynamic HTML and accessibility

Dynamic HTML (DHTML) is usually a combination of CSS and JavaScript. DHTML allows developers to display, hide or move information based on user input or pre-programmed commands. Many examples in this section used the DHTML. Most of the drop-down menus found on web pages also use DHTML. Because most of these DHTML elements are modified based on mouse input, they are generally inaccessible to users who do not use a mouse. When using the DHTML, two points must be evaluated to determine its impact on accessibility:

  1. Is the event used to trigger a change is independent of devices? If the mouse is required, then it is not fully accessible.
  2. Is the content or DHTML functionality is available? If assistive technology can not adequately access the content or functionality DHTML triggered, then it is not fully accessible.

Use document.write

Dynamic information and evolving are written below in the page by using the JavaScript document.write . In most cases, the content is written in a page's JavaScript is accessible to assistive technologies. However, if the dynamic content is constantly changing or interfere with navigation or functionality of the browser, it can create accessibility problems.

Example document.write

The current time is displayed in the text field below. It updates and changes every second.

Problems

In this example, since the content changes and refreshes permanently, a screen reader will not be able to read and this can cause confusion.

Solutions

When using dynamic information, you must first ask you if it is necessary and essential to the function or content of the page. If so, there is often a way to give the content without the use of JavaScript inaccessible. For example, you can write the moment when the page is loaded using a server-side script. Although time is not updated consistently, this may suffice. You can also allow the user to select a link or button to go to another page that displays the current time by a server-side processing. Another approach that uses an implementation of JavaScript more accessible would be to give a link or button that allows the user to display the time on request.

<Input type = "button"
value = "Display the current time"
onclick = "alert ('Time is:' + TimeValue)" />

Pop-up

The pop-up windows are unique in the theme accessibility. First, most experts ergonomics are against the use of pop-ups, except as required. If you must use pop-ups, you should know that they create more accessibility problems. For a sighted user, it may be difficult to notice and navigate within. For someone who uses assistive technology, the new window can be tedious and confusing because the default behavior of the link has changed. The implementation of the JavaScript can make it difficult or impossible to resize it, which is very embarrassing for a person using a screen magnifier. For someone who is blind, there is usually no indication that he is spirited to navigate in a new window. When the user attempts to return to the previous page by clicking the back button, it can be confusing to see that this does not work.

Example of pop-up

Select this link to open a new window

<A href = "popup.htm"
onclick = "window.open (this.href) return false;"> Select this link to open a new window </ a>

Comment

+ Entrée avec le lien sélectionné). If you use software to block pop-ups, you must disable it or choose the link in a way that bypasses the blocked pop-up (usually Ctrl + click or Ctrl + Enter with the link selected).

In the code example above, the link will continue to function normally (eg, in the same browser window) if JavaScript is disabled.

When using JavaScript to open new windows, you can change the size and position of the new window. You can also add or remove features of the window, like the ability to resize, display the scroll bars to display the toolbars, etc.. Be very careful when changing the default behavior of the browser window. If a user with low vision to expand the content, a small window that can not be extended and can not display the scroll bars would be inaccessible. A person with a mobility impairment can be based on large toolbars to precisely control the Web browser. therefore, delete or change can create difficulties for the user.

As you can see, there are many difficulties for both usability and accessibility that arise through the use of pop-ups. Care must be taken when deciding to use them. If used, extensive user testing are essential to ensure accessibility. Always warn the user that a pop-up window opens.

Redirection and refresh browser windows

When the browser displays the page suddenly changes or refreshments, the person viewing this page may be confused or have some confusion, especially if that person uses assistive technology. This is what happens with redirection pages when the content of the page has been moved or updated. Section 508 requires that users retain control over the content changes over time. Do not change automatically or refresh the browser window without first alerting the user that the change will occur and giving him the ability to disable or delay the change.

Use CSS valid as an alternative to JavaScript

As previously mentioned, the CSS are often modified with JavaScript to create DHTML pages dynamically changing. However, with the arrival of version 2 of CSS, many of the features available with the dynamic JavaScript is now included in the CSS specification. This allows the construction of a dynamic and interactive navigation and arrangement of elements without the use of JavaScript events. You can create drop-down menus, image maps and other features on Web sites without worrying about event handlers dependent devices. However, the new CSS standards are not fully supported by modern browsers, namely Internet Explorer.

Screen readers are not of great CSS support, especially with content that can be made ​​visible or invisible by using the style display:none or visibility:hidden . Many screen readers do not read the contents with the styles, even if the content is still part of the underlying structure of the page. Until there is no better CSS support in web browsers and assistive technologies, using only CSS to produce dynamic content should be done with a lot of testing in multiple browsers and readers of different screen.

WebAIM is an initiative of:
Center for Persons with Disabilities (CPD) Utah State University

Copyright 1999-2009 WebAIM

Top of Page