Agent Wranglers

Accessibility Required

Name every link and button

Never ship a link or button without a name a screen reader can read. Give icon-only controls an aria-label. This is WCAG criterion 4.1.2 (A).

How to do it

Give every icon-only button and link an aria-label. Hide the icon itself with aria-hidden="true".

Example

<button type="button" aria-label="Close">
  <svg aria-hidden="true" width="24" height="24">…</svg>
</button>

How to check

axe button-name and link-name pass.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/empty-links-buttons.