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.
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.
Check that all elements with role=”link”, role=”button”, or role=”menuitem” have a clear, accessible name.
<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
<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
For more examples, visit W3C’s GitHub’s ATC Rules library.