Give every button a clear name

Make the action of every button understandable in text, including buttons that only show an icon.

Why it matters

An unnamed button may be announced only as “button”, leaving screen-reader and voice-control users unable to identify or activate it.

How to fix it

1. 1

   Prefer visible button text that describes the action.

2. 2

   Add an aria-label when an icon-only button is genuinely necessary.

3. 3

   Check that repeated buttons still make sense out of context.

Example

<button>
  <svg aria-hidden="true"><!-- search icon --></svg>
</button>

<button aria-label="Search">
  <svg aria-hidden="true"><!-- search icon --></svg>
</button>

How to check your fix

Check your page again with ibin. The issue disappears from your report once every place is fixed. Then try it yourself the way a visitor would.

• Check the page again and make sure the issue no longer shows up in your report.
• Try the fixed part yourself: with a mouse, with only a keyboard, and zoomed in.
• If you can, ask someone who uses a screen reader to try it too.

Also available in Nederlands, Français, Deutsch