Skip to content
Wiki
Automated Checks
Button Name

Button name

All buttons must have discernible text, WCAG 4.1.2 (opens in a new tab)

Screen readers rely on the "accessible name" of elements, so having a button that only uses an icon SVG or emoji to indicate its purpose makes using the app very difficult.

Use the browser developer tools to inspect these buttons, they should enable you to see that only the right button has a legible, accessible name associated with it.

Ways to fix

The simplest way to give the button some legible text is to use aria-label or aria-labelledby. Some other ways include defining some screen reader only text within the button, or just giving it visible text!

The automated rule this comes from, axe-core button-name (opens in a new tab), has other good examples of how to fix this. The simplest being just using real text, or, as below, using aria-label.

<button aria-label='Delete'>

</button>

References