2.1 Missing form label on Monitoring page (H)

FIGURE 2.1: Search patient form field highlighted using WAVE automated tool on the Monitoring page

2.1.1 WCAG 1.3.1 (A), 2.4.6 (AA) - Desktop, Automated Finding

On the Monitoring page, there is an input option for users to search for a particular patient in the app using their name or NHS number. Sighted users are presented this information with the label “Search Patient” placed above the input element, indicating its purpose. However, this is not announced by screen readers.

The form control does not have an associated text label and this would cause the function to be confusing for screen reader users. They would be informed that there is an option for a text input, but wouldn’t be told what the purpose of that input is.

2.1.2 Code Snippet

<input placeholder="Search name or NHS number" type="text" autocomplete="off">

2.1.3 Recommendation

Programmatically associate a text label for the input control using the <label> element:

<label for="search">Search:</label> 
<input id="search" placeholder="Search name or NHS number" type="text" autocomplete="off">

This could also be achieved using aria-label or aria-labelledby

2.1.4 Spot check: December 2022

This issue is unresolved. The <label>Search Patient</label> element hasn’t been programmatically associated with the input, which is why only the placeholder is being announced by a screen reader. Therefore, screen reader users are not informed of the purpose of the field itself. Please see the recommendation for how this issue should be fixed.

---