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

Photo of Researcher
Yotam Flohr
Researcher
Blind Low vision Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Photo of Researcher
Yotam Flohr
Researcher
Photo of Expert
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

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