What does this mean?
An input has been presented without an accessible name, typically done using a label element.
For example here we have an input with some text above, but this has not been marked up as a label:
<div>Reference number</div>
<input type="text" id="ref">
In this case the label has been added, but it is missing the required for attribute to actually connect it to the input:
<label>Reference number</label>
<input type="text" id="ref">
Impact on users
An accessible name is a way of identifying a control (such as an input).
Whilst a visual user could possibly make the association between the text and the input in our example due to their visual proximity, a screen-reader user does not have this information and so needs the text to be programmatically linked. This means that when the screen-reader lands on the input the user will hear the text read out and the user will know how to proceed. Without this, the screen-reader will just hear "Text, edit" or "Unlabelled".
Some screen-readers (specifically JAWS) will use heuristics to try and fix bad code like this for their users. If an input is missing an accessible name it will take text immediately above the input and use that as the accessible name. This does not always work well. This is also an example of why it is essential to test with multiple screen-readers.
Speech recognition users are also impacted. The accessible name is what the user needs to allow them to target the input and place their cursor in it. In our examples the user will assume the text above the input is the accessible name, but saying this ("click Reference number") will not do what the user expects.
How to fix
Ensure each input has an accessible name.
The best way to do this is to use a label element with the correct for attribute (avoid wrapping the label around the input).
For example:
<label for="ref">Reference number</label>
<input type="text" id="ref">
References
- Label guidance - GOV.UK
- Screen-readers and labels: