Accessible Names Explained: Help Software Identify Website Controls

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Start with the visible wording

   0:18

   A clear visible label helps everyone understand the control.

   On-screen labels: Visible label; Clear purpose; Specific wording.

2. 2

   Step 2: The name identifies the control

   0:30

   Assistive technology uses the accessible name with its role and state.

   On-screen labels: Accessible name; Control role; Current state.

3. 3

   Step 3: Native text can supply it

   0:42

   For example, useful text inside a native button can provide its name.

   On-screen labels: Native button; Visible text; Programmatic name.

4. 4

   Step 4: Icon-only controls need care

   0:54

   An image or symbol alone may not communicate a useful control name.

   On-screen labels: Icon purpose; Programmatic label; Clear user meaning.

5. 5

   Step 5: Avoid conflicting labels

   1:06

   The supplied name should support the visible wording and intended action.

   On-screen labels: Visible wording; Supplied name; Consistent purpose.

6. 6

   Step 6: Inspect the actual result

   1:18

   Check what the browser exposes and test with assistive technology.

   On-screen labels: Browser accessibility tree; Meaningful name; Real control test.

Common questions

Go further