Ensures Every ARIA Button, Link, and Menuitem Has an Accessible Name

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expert

July 29, 2024

Disabilities affected: Blind Low vision Mobility

Standards: WCAG 2.2 Level A

ARIA requires all elements to have discernible text that clearly describes the destination, purpose, function, or action of a button, link, or menu item for screen reader users.

Why It Matters

Screen readers cannot automatically detect the purpose of links, buttons, and menu items if they don’t have an accessible name, which can isolate certain website users.

Fixing the Issue

Check that all elements with role=”link”, role=”button”, or role=”menuitem” have a clear, accessible name.

Good Code Example

Code example

<div role="link" id="al" aria-label="Name"></div><div role="button" id="alb" aria-labelledby="labeldiv"></div><div role="menuitem" id="combo" aria-label="Aria Name">Name</div><div role="link" id="title" title="Title"></div>

Copy

Bad Code Example

Code example

<div role="link" id="empty"></div><div role="button" id="alempty" aria-label=""></div><div role="menuitem" id="albmissing" aria-labelledby="nonexistent"></div><div role="link" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>

Copy

Test Cases

For more examples, visit W3C’s GitHub’s ATC Rules library.