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

Labelling issues

label enclosing several elements (inputs)

Example 1: One readonly input type=text and one type=checkbox enclosed in one label

Result: Here, the label cannot be clicked to check the checkbox, instead the first readonly input is highlighed.

Firefox/NVDA-Output: TAB - "Einträge mit dem Status 'E - Extrahiert' überschreiben - Eingabefeld schreibgeschützt - 45 ausgewählt" - TAB - "Kontrollfeld nicht aktiviert" - i.e. the label is not read when the checkbox is focused

Example 2 - number in span

Result: The label can be clicked to check the checkbox.

Firefox/NVDA-Output: TAB - "anklickbar - 45 Einträge mit dem Status 'E - Extrahiert' überschreiben - Kontrollfeld nicht aktiviert"

Example 3 - two inputs in label, but rearranged

Result: The label can be clicked to check the checkbox, but nor the 45 part (the input). The second tab stop repeats contents of the input, is redundant.

Firefox/NVDA-Output: TAB - "anklickbar - 45 Einträge mit dem Status 'E - Extrahiert' überschreiben - Kontrollfeld nicht aktiviert" - TAB - "Eingabefeld schreibgeschützt - 45 ausgewählt"

Use of autocomplete attribute with several values

Checking screen reader support and validity when using aria-label and aria-labelledby on same element

Example 1 - Labelling of button via aria-labelledby referencing (1) the button itself (implicitly its aria-label attriute), and (2) an external text node


Result screen reader test

Win 10: Works in Chrome 67/NVDA, Firefox 61/NVDA, Edge 42/Narrator, does not work in IE 11/NVDA

Example 2 - Labelling of button via aria-labelledby referencing (1) accessibly hidden content in button and (2) the external text node


Result screen reader test

Win 10: Works in Chrome 67/NVDA, Firefox 61/NVDA, Edge 42/Narrator, and IE 11/NVDA

Example 3 - Using link inside of label

Using only placeholder for labelling (11 Dec 2020, updated 13 May 2022)

Note: The tests results below are not meant to indicate that placeholder meets all requirements of WCAG. It certainly does not meet SC 3.3.2 Labels or Instructions if it is the only visual label since it will disappear / be overwritten by user input. The test below just focuses on the question if placeholder can be programmatically determined before and after user input across a wide range of user agents / assistive technologies, i.e., create meaningful output for assistive technology like screen readers.

Example

Result screen reader test

Browser/Screenreader Default output Output after user input visibly replaces placeholder
Firefox/NVDA: Waldstein Waldstein / [input] selected
Chrome/NVDA: Waldstein Waldstein / [input] selected
Chrome/JAWS: Waldstein Waldstein / [input] enter text
Edge/Narrator Wallstein / edit / scanning off Waldstein / edit / [input] / scanning off
iOS/Safari/VoiceOver Waldstein (double tap to edit) [input] double tap to edit
Android/Chrome/TalkBack Waldstein [input] / edit field Waldstein

Using min / max in input type="number"

Using min / max in input type="range" for Donation


Labelling input via option of a select

Detlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de)

Last update: 28 September 2022