Select dropdown

How to test a select dropdown

Gherkin Condensed

Given that I am on a screen with a select dropdown

1 Keyboard

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 screenreader 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

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 WCAG principles:

1 Perceivable

The purpose (name, description, autofill) can be programmatically determined - 1.3.5 AA
Color is not used as the only means of conveying state (valid/invalid) - 1.4.1 A
The text has a 4.5:1 minimum contrast ratio - 1.4.3 AA
Text can resize up to 200% with no loss of information - 1.4.4 AA

2 Operable

Is keyboard operable - 2.1.1
The purpose of can be determined from the text alone - 2.4.4 A
The click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
The click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
The focus indication is visible (in some way) 2.4.7 AA
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA
Label is always visible (placeholder cannot be used as a label) - 3.3.2 A

3 Understandable

Errors are identified and described to the user in text - 3.3.1 A
Corrections to errors are identified and described to the user in text - 3.3.3 AA

4 Robust

Conveys the correct name, role, state/value 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

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.

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

This select is focusable with all options disabled.

By using aria-disabled="true" and disabling each option, the select is more discoverable for people using a screenreader.

<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 people using a screenreader.

<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

Select dropdown

How to test a select dropdown

1 Keyboard

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output

1 Perceivable

2 Operable

3 Understandable

4 Robust

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

Disabled select

Further reading

Related select dropdown entries

Select dropdown

How to test a select dropdown

1 Keyboard

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output

1 Perceivable

2 Operable

3 Understandable

4 Robust

Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Custom dropdown select elements: Just don’t.

Code examples

Use the Semantic HTML <select>

Focusable disabled select

Disabled select

Further reading

Related select dropdown entries

Use the Semantic HTML `<select>`