Go to overview: Standard HTML mark-up in screenreader tests
label
for
attribute)We just saw this in the wild: Some use two labels for the same checkbox, using the for
-attribute to point to the same input (the checkbox). The W3C validator shows this is considered valid code, and the HTML5 spec's part on label
does not warn against it.
This mini screen reader test with NVDA and 3 desktop browsers plus iOS/Safari/Voiceover and two Android browsers with TalkBack shows why using more than one label for the same checkbox (presumably this holds for other input elements too) is neverthess a bad idea. It just does not produce consistent results.
Browser / Screenreader combo | Screenreader output |
---|---|
Firefox 59 / NVDA 2018.1.1 | Both labels are spoken in source code order |
Chrome 58 / NVDA 2018.1.1 | Both labels are spoken in source code order, but twice |
IE 11 / NVDA 2018.1.1 | Only the second label is spoken |
Safari (iOS 11.3) / VoiceOver | Only the first label is spoken |
Chrome (Android 7.1.2) / TalkBack | Both labels are spoken |
Firefox (Android 7.1.2) / TalkBack | Both labels are spoken |
label
"Stupid" with for
attribute)Browser / Screenreader combo | Screenreader output |
---|---|
Firefox 59 / NVDA 2018.1.1 | stupid button (so does not output content of button) |
Chrome 58 / NVDA 2018.1.1 | stupid button (so does not output content of button) |
IE 11 / NVDA 2018.1.1 | stuff button (so when button has content, IE renders the content of button, ignores the label!) |
Safari (iOS 11.3) / VoiceOver | stupid button |
Chrome (Android 7.1.2) / TalkBack | stupid - stupid button (the first 'stupid' when focusing the label with TalkBack) |
Firefox (Android 7.1.2) / TalkBack | stupid label - stupid button (the first 'stupid label' when focusing the label with TalkBack) |
Browser / Screenreader combo | Screenreader output |
---|---|
Firefox 59 / NVDA 2018.1.1 | stupid button |
Chrome 58 / NVDA 2018.1.1 | stupid button |
IE 11 / NVDA 2018.1.1 | stupid button (so without content of button, IE renders the label instead) |
Safari (iOS 11.3) / VoiceOver | stupid button |
Chrome (Android 7.1.2) / TalkBack | stupid - stupid button (the first 'stupid' when focusing the label with TalkBack) |
Firefox (Android 7.1.2) / TalkBack | stupid label - stupid button (the first 'stupid label' when focusing the label with TalkBack) |
Let me know if you have more test results then I'll add them to this page.
Detlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de)
Last update: 24 April 2018