Testing Select box labels with Screen Readers
to assess WCAG conformance
Let's test <select> box labels with screen readers:
TEST 1: Using HTML <label for...>
Code Used
<label for="p1">Cars</label>
<select id="p1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
TEST 2: Using HTML <label> Wrapped around <slect>
Code Used
<label><span>Cars</span>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select></label>
TEST 3: Using HTML aria-labelledby
CarsCode Used
<span id="p3">Cars</span>
<select aria-labelledby="p3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
TEST 4: Using aria-label
Code Used
<select aria-label="Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
TEST 5: Using First option
Code Used
<select >
<option value="Cars">Cars</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Test Data
| JAWS Chrome |
JAWS IE |
JAWS FF |
NVDA CHROME |
NVDA FF |
VO iOS Safari |
VO MAC
Safari |
|
|---|---|---|---|---|---|---|---|
| Explicit Label Tag |
Virtual cursor to it "Volvo" Tab to it "Cars, combobox Volvo" |
Virtual cursor to it "Volvo" Tab to it "Cars, combobox Volvo" |
Virtual cursor to it "Volvo" Tab to it "Cars, combobox Volvo" |
Tab or Virtual Cursor to it "Cars, combobox collapsed Volvo" |
Tab or Virtual Cursor to it "Cars, combobox collapsed Volvo" |
Tab OR Virtual Cursor to it "Cars, Volvo popup button, double tap to activate the picker" |
Tab OR Virtual Cursor to it "Cars, Volvo popup button" |
| Implicit Label Tag |
Virtual cursor to it "Volvo" Tab to it "Cars, combobox Volvo" |
Virtual cursor to it "Volvo" Tab to it "Cars, combobox Volvo" |
Virtual cursor to it "Volvo" Tab to it "Cars, combobox Volvo" |
Tab or Virtual Cursor to it "Cars, combobox collapsed Volvo" |
Tab or Virtual Cursor to it "Cars, combobox collapsed Volvo" |
Tab OR Virtual Cursor to it "Cars, Volvo popup button, double tap to activate the picker" |
Tab OR Virtual Cursor to it "Cars, Volvo popup button" |
| aria-labelledby |
Virtual cursor to it "Volvo" Tab to it "Cars, combobox Volvo" |
Virtual cursor to it "Volvo" Tab to it "Cars, combobox Volvo" |
Virtual cursor to it "Volvo" Tab to it "Cars, combobox Volvo" |
Tab or Virtual Cursor to it "Cars, combobox collapsed Volvo" |
Tab or Virtual Cursor to it "Cars, combobox collapsed Volvo" |
Tab OR Virtual Cursor to it "Cars, Volvo popup button, double tap to activate the picker" |
Tab OR Virtual Cursor to it "Cars, Volvo popup button" |
| aria-label |
Virtual cursor to it "Volvo" Tab to it "Cars, combobox Volvo" |
Tab to it, Read previous heading combobox "volvo" |
Tab to it, Read previous heading combobox "volvo" |
Tab or Virtual Cursor to it "Cars, combobox collapsed Volvo" |
Tab or Virtual Cursor to it "Cars, combobox collapsed Volvo" |
Tab OR Virtual Cursor to it "Cars, Volvo popup button, double tap to activate the picker" |
Tab OR Virtual Cursor to it "Cars, Volvo popup button" |
| first option |
Virtual cursor to it "Volvo" Tab to it "Cars, combobox Volvo" |
Tab to it, Read previous heading combobox "volvo" |
Virtual cursor to it "Volvo" Tab to it "Cars, combobox Volvo" |
Cars combobox collapsed | Cars combobox collapsed | Cars | "Cars" |
Conclusion
- NVDA on Chrome and FireFox and VoiceOver on iOS on iPhone Safari got the most predictable results.
- JAWS was pretty good but arrowing to the form field did not read the label. (Tabbing worked fine)
- VoiceOver on Chrome got the most unpredictable results, But VO on Safari was fine.
Feel free to comment on Twitter @davidmacd
Author information:
David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.
CONTACT US
For a quote or just to chat about your organization's needs
