6.1 Textarea not associated with the warning message (Observation)

6.1.1 Textarea not associated with the warning message

On the Add a note to this goal page, there is a textarea provided for adding notes related to a prisoner’s goal. Positioned just above the textarea is a warning message. While the visual layout effectively conveys the connection between the warning message and the textarea for sighted users, screen reader users lack a programmatic association between these elements. This absence of association can potentially result in blind screen reader users inadvertently overlooking critical information, as they typically navigate through a page by pressing the tab key to move between interactive elements.

FIGURE 6.1: Warning note highlighted with NVDA speech viewer activated on add a note page

6.1.2 Code snippet

Warning message:

<div class="">
  <span class="">!</span>
  <strong class="">
    <span class="">Warning</span>
    This note will be seen by the prisoner and 
     other prison staff.
  </strong>
</div>

Textarea:

<textarea class="govuk-textarea" id="note"
 name="note" rows="5" spellcheck="false">
</textarea>

6.1.3 Recommendation

Programmatically associate the textarea to the warning message. We recommend using thearia-descibedby attribute to indicate the ID of the elements that describe the object. This will establish a relationship between the textarea and warning message i.e.

Warning message:

<div id="warning-note">
  <span aria-hidden="true">!</span>
  <strong>
    <span>Warning</span>
    This note will be seen by the prisoner and other prison staff.
  </strong>
</div>

Textarea:

<textarea class="govuk-textarea" id="note" 
name="note" rows="5" spellcheck="false" 
aria-describedby="warning-note"></textarea>

---