Titles and ARIA

<title> as an element's first child gives it a short name and a hover tooltip; <desc> holds a longer description and <metadata> machine-readable data. For screen readers, every graphic is one of two kinds. An informative one gets role="img" and a name, from its <title> via aria-labelledby or from aria-label. A decorative one, such as an icon beside a text label, gets aria-hidden="true". An <img> uses alt.

Informative, unlabeled and decorative SVG side by sideHTMLLive

<svg role="img" aria-labelledby="logo-t" aria-describedby="logo-d" viewBox="20 0 190 190">
  <title id="logo-t">BookNest</title><desc id="logo-d">Six book spines in a nest</desc>
  <path d="M36 118 Q120 142 204 118 Q196 182 120 184 Q44 182 36 118 Z" fill="#263238"/>
</svg>
<svg width="40" height="40"><circle cx="20" cy="20" r="18"/></svg>
<button><svg aria-hidden="true" width="24" height="24"><use href="#i-cart"/></svg>
  Add to cart</button>
<button aria-label="Search"><svg aria-hidden="true" width="24" height="24">
  <use href="#i-search"/></svg></button>
<img src="booknest-logo.svg" alt="BookNest home">

- img "BookNest"
- img
- button "Add to cart"
- button "Search"
- img "BookNest home"

That is Chrome 1 's accessibility tree for the listing, captured with Playwright 26,280 's ariaSnapshot(). The second SVG is the mistake to avoid: unnamed and not hidden, it is exposed as an unlabeled image.

MENU