What does this mean?
There looks to be a hint or error message which has not been associated with an input.
For example:
<label for="ref">Reference number</label>
<div class="govuk-hint">
This is 10 digits
</div>
<div class="govuk-error">
Error: Enter the reference number
</div>
<input type="text" id="ref">
It might be that the GOV.UK hint or error message classes are being used outside of the intended use-cases (supplying errors and hints to inputs).
False positive on GOVUK character count component
The GOVUK character count component uses hidden hint text linked to the input as well as an aria live region to communicate updates to the user. This means the visible hint is not linked to the input using aria as you might expect and is in fact hidden from screen-reader users via an aria-hidden attribute to avoid duplication.
For this reason you will see a warning on this component, but this can be ignored. An exemption will be added in an upcoming release to hide this.
Impact on users
If the copy highlighted is intended as a hint or error message for an input then this will impact screen-reader users.
This copy might be format information contained in hints, or information about issues with the submission contained in error messages.
To ensure a screen-reader provides this essential information to the user it needs to be programmatically associated with the input. This is because a screen-reader might "jump" from input to input, skipping over intervening text. By associating the copy with the input we can make sure that it is read out when the user lands on the input.
How to fix
Check that the GOV.UK hint or error styling is not being used for something other than what they were intended for. If this is the case then review if these classes are the best approach.
If these are error messages and hints providing information for an input, then use aria-describedby to link the copy to the input. If there could be more than one item of copy being referenced, make sure the ids of the copy in the attribute are in the same order as they appear on the page so that they are read out in the right order.
For example:
<label for="ref">Reference number</label>
<div class="govuk-hint" id="ref-hint">
This is 10 digits
</div>
<div class="govuk-error" id="ref-error">
Error: Enter the reference number
</div>
<input type="text" id="ref" aria-describedby="ref-hint ref-error">
References
- Text inputs - GOV.UK includes sections on hint and error messages