What does this mean?
This is shown where an error is contained within an input's label.
For example:
<label for="name">
What is your name?
<div class="error">
<span class="visually-hidden">Error: </span>Enter your name
</div>
</label>
<input type="text" id="name">
Impact on users
This impacts both screen-reader users and speech-recognition users.
For screen-reader users it means the label and error will flow straight into one another. Labels typically don't have full-stops at the end, so a screen-reader will treat it all as one sentence. This can make the label part more difficult to understand. In comparison when the error is seperate and associated with the input using aria, a pause is introduced between the label and error.
Some screen-readers (such as NVDA) will employ heuristics (based on user feedback) to reduce noise - for example if the user has just heard the error by moving through the page and then lands on the input then NVDA will not repeat it. Having the label and error combined will interfere with this.
For speech-recognition users creating what is in effect a much longer label by including the error copy can result in a more difficult to target element.
How to fix
Ensure the error is placed outside the label. Make sure it is associated with the input using aria-describedby so it will get announced when the user lands on the input.
For example:
<label for="name">
What is your name?
</label>
<div class="error" id="name-error">
<span class="visually-hidden">Error: </span>Enter your name
</div>
<input type="text" id="name" aria-describedby="name-error">
References
- GOV.UK guidance on error messages
- Guides to testing error messages with a screen-reader: