2.9 Buttons do not have accessible labels (H)

Back button highlighted on the patient information page with NVDA speech viewer activated

FIGURE 2.17: Back button highlighted on the patient information page with NVDA speech viewer activated

Refresh button highlighted on the monitoring page with NVDA screen reader activated

FIGURE 2.18: Refresh button highlighted on the monitoring page with NVDA screen reader activated

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

On the Patient Information page, the button to go to the previous page is announced as “blank” by screen readers. Similarly, the refresh button on the monitoring page is simply announced as “button”.

The purpose of these buttons are visually presented to sighted users through the associated images. However, visually impaired screen reader users need to be informed using alternative text for these images.

The back button has been assigned a null alt text (alt="") and the refresh button does not have an alt tag. Both of these need to be provided with an accessible label.

2.9.2 Code Snippet

  • Back button: <img src="../icon_back.svg" tabindex="3" alt="" class="tab-button-focus tab-button-focus-secondary">

  • Medical Record Synchronise button: <button tabindex="3" class="loading-icon tab-button-focus tab-button-focus-secondary"> <img src="../icon_refresh.png"> </button>

2.9.3 Recommendation

Images and functional images need to be assigned accessible names. The native alt attribute of images allows for this.

For example:

  • <img url=... alt=" Refresh Medical Record" >
  • <img url=... alt="Back" >

2.9.4 Spot check: December 2022

Back button on patient details page highlighted with NVDA screen reader open

FIGURE 2.19: Back button on patient details page highlighted with NVDA screen reader open

Refresh button on patient details page highlighted with NVDA screen reader open

FIGURE 2.20: Refresh button on patient details page highlighted with NVDA screen reader open

This issue is unresolved. The back button is announced as “Graphic” and the refresh button is announced as “Refresh”. Please refer to the recommendation above to fix the issue.