Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

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

Cars

Code 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


EMAIL

help -at- can-adapt.com
(replace -at- with you know what)

PHONE

613-806-9005

SOCIAL MEDIA