2.25 “Cancel” button announced as “Close Button” by screen readers (H)

FIGURE 2.57: Cancel button with NVDA screen reader speech viewer highlighted

2.25.1 WCAG 2.5.3 (A), 4.1.2 (A) - Desktop

In the settings modal, the “Cancel” button is announced as “Close button” by screen readers.

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. 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. This is similar to issue Visual labels different from what is being announced by screen readers (H) .

2.25.2 Code snippet

<button _ngcontent-ety-c52="" type="button" data-dismiss="modal" aria-label="Close" role="button"> Cancel </button>

2.25.3 Recommendation

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

2.25.4 Spot check: December 2022

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

---