JavaScript

✎ Technique: Content on hover or focus

Make it easier for users to interact with added content. Tooltips, drop-down menus, and popups are examples of added content. This new content is usually made visible when you put your mouse pointer over a "trigger" item such as a button or link. It can also display when an item receives focus. Some people have difficulty keeping the mouse pointer over the trigger item. Also, the new content will sometimes obscure existing content. The three requirements of this success criterion, as outlined below, help make the added content more operable.

Dismissable

When using magnification, tooltips or added content can display on top of other information. Unless the newly visible content is displaying an error, the user must be able to dismiss that content without moving the mouse or changing focus. The easiest way to implement this is by providing a keyboard command, such as pressing the escape key, to close the content. The developer can also include a close button within the added content.

Hoverable

Often the new content only displays when the mouse pointer is over the trigger element and disappears when the mouse moves off of the trigger. It can be hard for people with tremors or limited movement to keep the mouse over the trigger element. To remedy that situation, the content must stay visible as long as the mouse remains over the trigger or the mouse moves onto and remains over the new content.

Persistent

This rule combines the previous two. The content must remain visible until the user dismisses it, the hover or focus trigger is removed, or the information is no longer valid.

✎ Technique: Autocomplete input controls

Autocomplete widgets can be helpful for accessibility because they can make it easier to enter text by providing suggestions based on the characters initially typed. This particularly helps people who find typing more difficult and people who may be susceptible to spelling mistakes.

Creating an accessible integrated autocomplete widget is a complex process. You need to ensure that screen-reader users are notified when the list of suggestions appears and that they can enter the list and select an option using the keyboard...

Read more about ✎ Technique: Autocomplete input controls

✎ Technique: Session extension

For a number of reasons including data persistence, performance and security, it is sometimes beneficial to terminate idle user sessions.

So that users do not lose data, it's important to warn them of a session that is about to expire and give them the option to continue. This is especially true in the case of people who might take longer to read or interact with a page due to a disability. It's important to make such prompts accessible.

... Read more about ✎ Technique: Session extension

✎ Technique: Form feedback with live regions

Providing form feedback accessibly helps users submit data more accurately and reduces the chance for error. For learning resources, easy access to feedback supports the learning process; for forms collecting data, good feedback helps to reduce the chance of input errors being made. 

When providing feedback on user input, JavaScript is often employed to print messages to the screen. Users looking at the screen will see the message appear in response to their actions. Screen-reader users who do not...

Read more about ✎ Technique: Form feedback with live regions

✎ Technique: Accessible modal dialogs

Modal dialogs can enhance usability by focusing attention on a specific message that requires a user action to continue.

An accessible modal dialog is one where keyboard focus is managed properly, and the correct information is exposed to screen readers. HTML and WAI-ARIA can be used to provide the necessary semantic information, CSS the appearance and Javascript the behavior.

... Read more about ✎ Technique: Accessible modal dialogs

✎ Technique: Expandable sections

Expandables (sometimes called “collapsible” or “disclosure widgets”) are simple interface patterns that allow you to expand and collapse content. They can be helpful accessibility aids as they give users the choice of revealing content to read it, or bypassing the content, making page navigation more efficient for screen-reader users and people using the keyboard or alternative input devices.

To ensure that they are accessible, it's important that expandable sections are coded so that their state (expanded or collapsed) and...

Read more about ✎ Technique: Expandable sections

✎ Technique: Managing focus and inactive elements

Visually indicating which element has focus is important for effective keyboard navigation. It's also important to ensure that only those elements that are available visually for interaction are focusable. If an active element is intended to be unavailable in a particular state and it’s hidden from view, it should not be able to receive focus.

Having to tab through invisible controls to reach visible ones is arduous and potentially confusing for sighted users navigating the page by keyboard. Also, screen-...

Read more about ✎ Technique: Managing focus and inactive elements