Buttons with no name

Why it matters

A button that holds only an icon (the hamburger menu, the magnifying glass, the cross that closes a dialog) is announced as "button" and nothing else. Someone using a screen reader can't tell the menu from the basket, and someone using voice control has nothing to say to press it.

A button's name comes from the text inside it, the alt of an image inside it, an aria-label, or a title. An icon drawn with CSS or an SVG with no <title> gives it none.

Source: WCAG 2.2, 4.1.2 Name, Role, Value (Level A).

How to fix it

Name the button for what it does, not what it looks like:

<button type="button" aria-label="Open menu">
    <svg aria-hidden="true">…</svg>
</button>

Text that is there for screen readers and hidden from sight works as well, and survives translation tools better than aria-label.

Examples

These are the rule's own test pages, and what it says about each. They are run on every change to the rule book.

<button type="button" class="menu-toggle">
<svg viewBox="0 0 24 24">
<path d="M3 6h18M3 12h18M3 18h18"/>
</svg>
</button>

Warning1 button has no name, so a screen reader says only "button": button.menu-toggle.

fail-icon-only

<button type="button" class="menu-toggle" aria-label="Open menu">
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M3 6h18M3 12h18M3 18h18"/>
</svg>
</button>

PassedEvery button has a name (1 button).

pass-aria-label

<button type="button" class="menu-toggle">Menu</button>

PassedEvery button has a name (1 button).

pass-text