Accessible names for UI components include visible labels

Voice control users activate elements by speaking their visible label. If a button's aria-label reads 'Send form data' but the visible text reads 'Submit', a voice control user saying 'Submit' cannot activate it. WCAG 2.2 SC 2.5.3 (Label in Name) is a Level A requirement: the accessible name must contain the visible text label as a substring. This is a common bug introduced when developers override visible labels with different aria-label values for screen readers.

Ensure aria-label always contains the visible button text verbatim, or eliminate aria-label in favor of augmenting the visible text with a screen-reader-only span.

// Bad — aria-label does not contain visible text 'Delete'
<button aria-label="Remove this item permanently">
  <TrashIcon /> Delete
</button>

// Good — aria-label starts with visible text
<button aria-label="Delete account (permanent)">
  <TrashIcon /> Delete
</button>

// Better — no aria-label needed; sr-only adds context without replacing label
<button>
  <TrashIcon aria-hidden="true" />
  Delete
  <span className="sr-only"> your account permanently</span>
</button>

Search the codebase for buttons and links that have both visible text children and an aria-label. In every case, confirm the aria-label begins with the exact visible text string.