What does this mean?
This is shown where a hint is contained within an input's label.
For example:
<label for="nino">
National Insurance number
<span class="hint">It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
</span>
</label>
<input type="text" id="nino">
Impact on users
This impacts both screen-reader users and speech-recognition users.
For screen-reader users it means the label and hint 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 hint is seperate and associated with the input using aria, a pause is introduced between the label and hint.
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 hint by moving through the page and then lands on the input then NVDA will not repeat it. Having the label and hint combined will interfere with this.
For speech-recognition users creating what is in effect a much longer label by including the hint copy can result in a more difficult to target element.
How to fix
Ensure the hint 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="nino">
National Insurance number
</label>
<span class="hint" id="nino-hint">It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
</span>
<input type="text" id="nino" aria-describedby="nino-hint">