Label and accessible name (accessible-name)

For components with visible labels (such as buttons, form fields, checkboxes, etc.), the accessible name (e.g. aria-label) should contain/match the same text as the label that is visually presented to the user.


Non-descriptive hidden text:

This button has a hidden span element meant for assistive technologies (this hidden text is supposed to add more context). However, this span element contains incompatible text ("Lorem ipsum"):


Note: Impossible to auto-test. Requires a human tester or AI to determine if the hidden accessibility text matches the visual one, as descriptiviness is not programmatically detectable.

axe detected: none  |  QualWeb detected: none