WEBVTT

00:00:00.000 --> 00:00:06.000
How does assistive technology identify a website button?

00:00:06.000 --> 00:00:13.000
An accessible name provides a programmatic label for a control.

00:00:13.000 --> 00:00:18.000
Make the control purpose clear.
6 accessible-name checks.

00:00:18.000 --> 00:00:30.000
Start with the visible wording
A clear visible label helps everyone understand the control.
Visible label · Clear purpose · Specific wording

00:00:30.000 --> 00:00:42.000
The name identifies the control
Assistive technology uses the accessible name with its role and state.
Accessible name · Control role · Current state

00:00:42.000 --> 00:00:54.000
Native text can supply it
For example, useful text inside a native button can provide its name.
Native button · Visible text · Programmatic name

00:00:54.000 --> 00:01:06.000
Icon-only controls need care
An image or symbol alone may not communicate a useful control name.
Icon purpose · Programmatic label · Clear user meaning

00:01:06.000 --> 00:01:18.000
Avoid conflicting labels
The supplied name should support the visible wording and intended action.
Visible wording · Supplied name · Consistent purpose

00:01:18.000 --> 00:01:30.000
Inspect the actual result
Check what the browser exposes and test with assistive technology.
Browser accessibility tree · Meaningful name · Real control test

00:01:30.000 --> 00:01:39.000
Your checklist
Start with the visible wording · The name identifies the control · Native text can supply it · Icon-only controls need care · Avoid conflicting labels · Inspect the actual result

00:01:39.000 --> 00:01:47.000
Check the name people see and the name software receives.
jerseyweb.je