Select dropdown

How to test a select dropdown

Gherkin Condensed WCAG

Given that I am on a page with a select dropdown

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to a select I SEE focus is strongly visually indicated
Then when I use the arrow keys to select an option I SEE the selected option is changed
Then when I use the escape key when the select is open I SEE it collapses and focus moves to the select

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a select
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a select, popup, menu/submenu, listbox or combobox
- I HEAR Hints or errors are read after the label and related inputs include a group name (ex: Account settings)
- I HEAR It indicates which option is selected and if disabled/dimmed/unavailable
Then when I use the arrow keys to select an option I HEAR the selected option is changed
Then when I use the escape key when the select is open I HEAR it collapses and focus moves to the select

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a select
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a select, popup, menu/submenu, listbox or combobox
- I HEAR Hints or errors are read after the label and related inputs include a group name (ex: Account settings)
- I HEAR It indicates which option is selected and if disabled/dimmed/unavailable
Then when I doubletap with the select in focus I HEAR the options can be selected

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus moves visibly to the input
Arrow-keys	Moves focus to and chooses the next option.
Escape	If the select options are displayed, collapses the select and moves focus to the select.

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the input, traverses list
Double-tap	Opens select, chooses option

3 Screenreader output for all devices

Reads	I hear
Name	Its purpose is clear
Role	It identifies itself as a select, popup, menu/submenu, listbox or combobox
Group	Hints or errors are read after the label and related inputs include a group name (ex: Account settings)
State	It indicates which option is selected and if disabled/dimmed/unavailable

A select dropdown must meet these WCAG principles.

1Perceivable

Is easy to identify as interactive
Color is not used as the only means of conveying information (error, success, etc)
Doesn't rely on placeholder text as label or hint text

2Operable

Is keyboard operable
The click/tap target area is no smaller than 44x44px
The disabled states have a 3:1 minimum contrast ratio against default
The focus indication has a 3:1 minimum contrast ratio against adjacent elements
The focus indication has a minimum area equal to the width of the element and 2px in height

3Understandable

Its purpose is clear in the context of the whole page
It has the correct semantic meaning
Avoids very long option names
Doesn't use the same words at the beginning of a set of options

4Robust

Conveys the correct semantic role
Expresses its state (if applicable)
Meets criteria across platforms, devices and viewports

Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Code examples

Use the Semantic HTML `<select>`

This native select contains all the accessibility criteria for free and is styled to look cool.
It uses CSS pseudo attributes to create the arrow indicator, no Javascript.

<label for="nato">
  Select a Nato phonetic Letter
</label>
<select id="nato">
  <option value="None" selected disabled>Select a letter</option>
  <option value="A">Alpha</option>
  <option value="B">Bravo</option>
  <option value="C">Charlie</option>
</select>

Select a Nato phonetic Letter

Focusable disabled select (preferred)

This select is focusable with all options disabled.

<label for="nato-disabled-focusable">
  Select a Nato phonetic Letter
</label>
<select id="nato-disabled-focusable" aria-disabled="true">
  <option value="None" disabled>None</option>
  <option value="A" disabled selected>Alpha</option>
  <option value="B" disabled>Bravo</option>
  <option value="C" disabled>Charlie</option>
</select>

Select a Nato phonetic Letter

Disabled select

This select is completely disabled and not focusable, making it harder to discover for the screen reader.

<label for="nato-disabled">
  Select a Nato phonetic Letter
</label>
<select id="nato-disabled" disabled>
  <option value="None">None</option>
  <option value="A">Alpha</option>
  <option value="B" selected>Bravo</option>
  <option value="C">Charlie</option>
</select>

Select a Nato phonetic Letter

Custom dropdown selects are notoriously difficult to make screen reader accessible.

…it is now thoroughly clear that recreating the native behavior of a <select> element is impossible: its underlying semantics differ across platforms; its keyboard behavior is inconsistent; its mobile presentation and behavior is entirely different from desktop. In making a custom UI control, we take upon ourselves what was the browser’s responsibility to define semantics, presentation, and behavior, and this means we must choose one single implementation to serve to everyone. — Sarah Higley, Web Developer at Microsoft

Even Angular Material documentation says “The native <select> offers the best accessibility because it is supported directly by screen-readers.”

Angular material custom listbox requires the Live Announcer overlay to be accessible, and advises using a native <select> for accessibility.

Angular Material also supports use of the native <select> element inside of <mat-form-field>. The native control has several performance, accessibility, and usability advantages.

Before you attempt to use one of these, be certain a native <select> is not an option and you understand the commitment for coding and testing across all platforms.

Select dropdown

How to test a select dropdown

1 Keyboard for mobile & desktop

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output for all devices

1Perceivable

2Operable

3Understandable

4Robust

Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Code examples

Use the Semantic HTML <select>

Focusable disabled select (preferred)

Disabled select

Custom dropdown select elements: Just don’t.

Further reading

Use the Semantic HTML `<select>`