2.16 Visual labels different from what is being announced by screen readers (H)

Synchronize modal activated with 'cancel' and 'synchronize now' buttons highlighted on the Monitoring patient information page

FIGURE 2.35: Synchronize modal activated with ‘cancel’ and ‘synchronize now’ buttons highlighted on the Monitoring patient information page

2.16.1 WCAG 2.4.4 (A), 2.5.3 (A), 4.1.2 (A) - Desktop

On the Synchronize modal within the Monitoring Patient Information page, two buttons labelled ‘Cancel’ and ‘Synchronize Now’ are both announced as “Close button” by screen readers.

This affects different user groups:

  • Sighted or partially sighted screen reader users would find this confusing since the information presented visually on screen is different to what is being read out.

  • Low vision screen reader users would find this confusing since there are two buttons with the same label. Interacting with the second “close button” option would actually trigger the ‘Synchronize’ function—this would be completely unexpected for them.

  • This would also impact users using speech navigation tools such as Dragon. Users use these tools to interact with links and buttons by stating the visually presented name of the element. In this case, users would say “click Cancel button” but this command would not be recognised since the label name is different.

This issue occurs because the aria-label="close" overrides the button label.

2.16.2 Code Snippet

<button type="button" data-dismiss="modal" aria-label="Close"> Cancel </button>

<button type="button" data-dismiss="modal" aria-label="Close"> Synchronize Now </button>

2.16.3 Recommendation

Remove aria-label="Close" from the button element.

2.16.4 Spot check: December 2022

This issue is unresolved. Please refer to the recommendation above to fix the issue.