Matching visible and non-visible names

For: Development, Design

Label in name (2.5.3 level A)

https://www.w3.org/WAI/WCAG21/Understanding/label-in-name

  • Ensure the accessible names like aria-label contain the exact match of the visible label, so that screen reader users can activate controls without any surprises.
  • For example, a buttons visible label says, “Buy now” then the accessible name too should say “Buy now” instead of “Shop now.”