Web developers often use scripts to process forms and render effects, but this can cause accessibility barriers. You can mitigate some common barriers if you add a separate activation control to select lists, provide an alternative to pop-up menus, and include alternative text with autofill fields.
Scripts can be used for many functions:
- Background form processing
- Displaying text-based content
- Rendering visual mouse over effects
However, if not implemented correctly, Web page elements that rely on scripts may be problematic for some users, including those who use screen readers, screen magnifiers, and keyboard-only navigation, as well as those with mobility impairments and learning disabilities.
- Require the use of a mouse.
- Impose a short response time interval.
- May be triggered inadvertently.
- Refresh the page.
- Dynamically display content without alerting users with visual impairments.
- Produce visual-only effects.
Dos and Don'ts
Add a Separate Activation Control to Select Lists
Dropdown lists that use an onChange event handler for activating list items may be problematic for some users:
- Screen reader users and users with mobility impairments may inadvertently trigger list items when attempting to navigate the list. Most screen reader applications provide an option for traversing dropdown lists without producing an onChange event, but many users are unaware of this feature or its operation.
- Keyboard-only users have no means of traversing a dropdown list without producing an onChange event.
- An onChange event cannot be implemented in a mobile environment.
Use a separate activation control in addition to the onChange event handler.
Use an onMouseOver event handler or CSS to change the appearance of that control. It is not an issue for screen reader users, and it may provide useful feedback for users who have difficulty controlling a mouse.
Don't use an onChange event handler by itself for activating list items in a dropdown list.
Provide an Accessible Alternative to Pop-up Menus
Pop-up content requires that a browser's script processing be enabled. The controls are also often mouse dependent. Scripts used to display such content may thus be problematic for some users who may:
- Be unable to trigger the event, interact with displayed information before it times out, or trigger the event when using a browser that has script processing disabled or when in a mobile environment
- Be unaware of the event or information displayed outside the magnified view
- Have difficulty locating the information or interacting with the displayed information
Provide an accessible non-script dependent option in addition to a scripted pop-up menu, such as redundant menu items available elsewhere on the page or an activating control linked to a page containing accessible redundant menu items.
Include the ARIA live attribute in the content container tag, because some screen readers users may possess the knowledge and skill necessary to activate onMouseover controls.
Use aria-live="polite" when you want updates to be announced at the next pause in speech or user activity.
Use aria-live="assertive" for information that is critical or of high-importance. Updates are announced immediately, interrupting speech or user activity.
Don't use an onMouseOver event handler by itself to display pop-up content.
Avoid the use of aria-live="assertive" unless the interruption is imperative, since interruptions may disorient users or prevent them from completing the current task.
Provide Text or Alt Text with Autofill Fields
A script used to display text or fill in a form field is not an issue for screen reader users, as long as the displayed information is text-based (text or alt attribute) and its display does not rely on a device dependent control or action.
Describe or provide content that is auto-filled in plain text outside that field or in an alt attribute.
Don't rely on onMouseover, onMousedown, or onMouseup.
Don't display an image such as a calendar without an alt attribute or plain text that indicates it signifies today's date.