2.13 Button purpose unclear (H)

Button within the Patient information table highlighted on the patient information page

FIGURE 2.30: Button within the Patient information table highlighted on the patient information page

Button highlighted on the Actions History page

FIGURE 2.31: Button highlighted on the Actions History page

2.13.1 WCAG 1.1.1 (A), 2.4.4 (A), 4.1.2 (A) - Desktop

On the Patient Information page and the Actions History page, there is a button for users to access more information. However, the purpose of this button is unclear.

For sighted users, the button is presented as a right chevron icon—this does not provide any additional context. For screen reader users, this is announced as a table cell. On the Patient Information page, it is announced as “row one column four” and on the Actions History page, it is announced as “column four clickable”.

As this element doesn’t have a visual or programmatically associated label, it would be confusing for users. They would not know what the button does before clicking it. They are not equipped to make an informed decision on whether they want to interact with it.

2.13.2 Code snippet

  • Patient Information: <td _ngcontent-jve-c125="" tabindex="4" class="icon-next tab-button-focus tab-button-focus-light" style="cursor: pointer;"> &gt; </td>

  • Action History: <td _ngcontent-poi-c136="" tabindex="4" class="icon-next tab-button-focus tab-button-focus-light" style="cursor: pointer;"> &gt; </td>

2.13.3 Recommendation

Provide visual and programmatically-associated labels that inform users of its purpose.

Refactor this element to a native HTML button with an informative label such as “More details about medication”. This should be programmatically associated with the row identifier (such as the Programme Name) so that screen reader users are informed which row they are interacting with.

2.13.4 Spotcheck: December 2022

NVDA speech reader highlighted on patient details page

FIGURE 2.32: NVDA speech reader highlighted on patient details page

This issue is unresolved. When a user tabs to this element all the text in the row is announced at once. This can add to the audible clutter for screen reader users and can be confusing. We recommend implementing a separate native HTML button with an informative label such as “More details about medication” where the chevron is.