Images · SVG

Name the control, not every icon.

An SVG’s treatment depends on whether it decorates text, names a control, or communicates information on its own.

Prerequisites: decorative images and functional images.

The principle

Put the accessible name on the element with the role. Hide an SVG that only decorates an already-named button or link.

Four patterns

Start with purpose.

There is no single attribute recipe for every SVG. Decide whether the graphic adds meaning and whether it is itself interactive.

Icon beside visible text

<button><svg aria-hidden="true"…></svg> Add to cart</button>

Icon-only button

<button aria-label="Close dialog"><svg aria-hidden="true"…></svg></button>

Decorative standalone SVG

Information
<svg aria-hidden="true" focusable="false"…></svg>

Informative standalone SVG

Service uptimeAll systems operational
<svg role="img" aria-labelledby="title desc"><title id="title">Service uptime</title>…</svg>

Decision guide

One role, one useful name.

Avoid duplicate speech: do not name both the button and its child SVG. Do not add tabindex="0" to an SVG inside a control; the button or link is the focus stop.

Visible text exists

Let that text name the control and hide the icon.

Icon-only control

Name the button or link with an accurate action or destination.

SVG conveys information

Give the SVG image semantics plus a concise name and, when useful, a description.