GSA / smartpay-training

Prototype for new GSA SmartPay training quizzes
8 stars 4 forks source link

Resolves accessibility flag for WCAG 2.1 compliance #444

Closed brentryanjohnson closed 10 months ago

brentryanjohnson commented 10 months ago

As described in #441 this is a nuanced accessibility flag, which requires a matching string for accessible labels and visual text.

This fix isn't ideal, since it coerces the accessible name into a matching string. But there's a unique accessible case for doing so, described in this article and the WCAG guidance:

Speech input users can interact with a webpage by speaking the visible text labels of menus, links, and buttons that appear on the screen. It is confusing to speech input users when they say a visible text label they see, but the speech command does not work because the component's accessible (programmatic) name does not match the visible label. When a user interface component has a visible text label — whether it be real text or an image of text — that text must also be found in the component's accessible (programmatic) name. When the visible label and accessible (programmatic) name for interactive components are in sync, speech input users can effectively interact with those components.

If the program and vendor partners agree, we recommend adjusting the aria-label to accommodate this use case.