Go to overview: Standard HTML mark-up in screenreader tests

Odd usages of label

Checkbox with two labels (both linked to checkbox with 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.

Example 1

Screen reader test result

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

Button with text content vs. empty button, both labelled by a label "Stupid" with for attribute)

Example 1, label and non-empty button (not good code, don't use this pattern!)

Screen reader test result

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)

Example 2, label on empty button (not good code, don't use this pattern!)

Screen reader test result

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