Provide name, role, and value information ✎

✎ Technique: Label in name

People with disabilities rely on interface controls that are used programmatically. These controls have a visual label, as well as a programmatic label, known as its Accessible Name. Users have a much better experience if the visible text labels of controls match their accessible names.

Speech input users can navigate by speaking the visible text labels of menus, links and buttons that appear on the screen. It’s confusing to speech input users when they say a visible text label they see, but the speech input does not work because the accessible name that is enabled as a speech input command does not match the visible label.

✎ 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...

Read more about ✎ Technique: Autocomplete input controls

✎ 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 (...

Read more about ✎ Technique: Expandable sections

✎ Technique: Accessible names for buttons

Accessible names are the labels given to HTML elements that can be announced in assistive technologies such as screen readers. They may or may not be visible to sighted interface users, depending on context.

Whether you provide controls using standard HTML elements or create custom controls, ensure that controls are given appropriate names. There are a number of ways to provide accessible names.

... Read more about ✎ Technique: Accessible names for buttons