Labeling Icons

Labeling Icons

Labeling Icons for Accessibility and SEO

Real <text> in inline SVG is page text: screen readers read it, find-in-page finds it and Google indexes it (and SVG files); text converted to outlines is none of these. Shapes that carry meaning need a name, and icons beside a text label need hiding. With the Building the BookNest Icon Set sprite on the page:

A rating image and two icon buttons, labeled for assistive technologyHTMLLive

<svg role="img" aria-label="Rated 4.6 out of 5" width="100" height="20">
  <use href="#five"/></svg>
<button><svg aria-hidden="true" width="24" height="24"><use href="#i-search"/></svg>
  <span style="position:absolute; width:1px; height:1px; overflow:hidden">Search books</span>
</button>
<button aria-label="Add The Quiet Harbor to cart"><svg width="24" height="24">
  <title>Cart</title><use href="#i-cart"/></svg></button>

Chrome 154 1 's accessibility tree (Playwright 26,280 's ariaSnapshot()) names the image and both buttons as intended, but under the cart button it also lists img "Cart": the icon's <title> is announced a second time, so hide that SVG too. Unlike aria-label, the hidden span survives page translation.

MENU