Buttons with no name

WCAG 4.1.2 (A) · EN 301 549 9.4.1.2

Some buttons have no visible text and no accessible name.

Why it matters

This usually hits icon-only buttons: the close X, the search magnifier, the basket in the header. A screen reader announces them as "button" and the person has to activate them to find out what they do.

How to fix it

If the button has visible text, you are done. If it is icon-only, add an aria-label with the action and mark the icon aria-hidden="true".

<button><svg>…</svg></button>

<button aria-label="Dismiss notice">
  <svg aria-hidden="true">…</svg>
</button>

On your platform

• Shopify

  In Dawn and its derivatives, header icon buttons live in sections/header.liquid.

• WooCommerce

  Icon buttons usually come from the theme; look in header.php and the cart templates.

Related

• Image button with no alternative text
• Embedded frame with no title
• Form fields with no label
• Links with no name