2.1 Uninformative announcement of hint text by screen readers (M)

2.1.1 WCAG 1.3.1 (A) - Desktop, Mobile, iPad

On the Probation Search page, users can search for a person on probation using a Case Reference Number. An example of this search query is presented visually, just above the input field.

Screen readers announce this as “X twelve thousand three hundred forty five” instead of “X one two three four five.” This could be confusing for screen reader users, who might not immediately understand what is expected of them.

FIGURE 2.1: Hint text highlighted on Probation Search page

2.1.2 Code Snippet

<div id="crn-hint" class="govuk-hint">
    For example, X12345
</div>
<input class="govuk-input" id="crn" name="crn" type="text" aria-describedby="crn-hint">

2.1.3 Recommendation

Use a visually hidden <div> to describe the element to screen reader users with aria-describedby.

<div id="hint-text">
X one two three four five 
</div>
<input type="text" aria-describedby="hint-text">

---