Give each repeated symbol its own outer SVG with an accessible name, while reusing only the drawing inside it. This guide shows how to build a small labeled graphic list on a Mac and keep page layout, SVG coordinates, and accessible naming separate.

For a simple graphic, MDN recommends putting role="img" and a label on the outer SVG so assistive technology can treat it as one image. The practical pattern here is one wrapper per occurrence, each referencing its own label. ARIA: img role

Where should each instance’s accessible label go?

Put the name on the element representing that particular occurrence. When several separate graphics reuse one symbol, give each outer svg its own aria-labelledby reference or aria-label. Keep the shared symbol focused on reusable geometry.

This follows the distinction between a definition and its rendered instances. The SVG use element references graphics and renders reused content through a shadow tree; those generated shapes are not ordinary child nodes in the page’s DOM. Reusing a drawing therefore does not create separately editable copies of its internal label in your HTML. Document Structure — SVG 2

A title stored inside the shared symbol also cannot supply different text for different occurrences without another naming mechanism. For example, the same neutral tile drawing might represent Sample Alpha in one place and Sample Beta in another. Those names belong with the two occurrences, even though their geometry is identical.

Choose the naming method according to where the useful text already exists:

Situation Recommended pattern
A concise visible caption names the graphic Reference its unique ID with aria-labelledby on the outer SVG.
The graphic needs a name but has no visible caption Put a unique title inside each outer SVG and reference it with aria-labelledby, or use aria-label.
The graphic merely decorates text that already conveys everything Hide the SVG from assistive technology rather than adding a redundant name.
Several occurrences must remain individually discoverable Avoid grouping all of them into one outer role="img" image.

MDN recommends referencing visible text when it can name the SVG. Its image-role documentation also explains that role="img" presents the contents as a single entity, which is why the wrapper boundary matters. The SVG accessible name element, ARIA: img role

Build a complete page with two independently named instances

The following example is a complete HTML document containing only synthetic text and a simple circle-and-square drawing. It needs no JavaScript, external sprite, library, or build process. On your Mac, save it from a plain-text code editor as symbol-labels.html, then open the file in a desktop browser.

Both occurrences reference tile-mark, but their outer SVGs reference different visible captions. This uses the visible-text naming pattern documented by MDN. The href attribute is the current SVG reference mechanism; MDN documents xlink:href as deprecated. The SVG accessible name element, SVG use element

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Independently labeled SVG instances</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      color: #222;
    }
    .sprite {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .samples {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      max-width: 36rem;
      padding: 0;
      list-style: none;
    }
    .sample {
      padding: 1rem;
      border: 1px solid #777;
    }
    .sample svg {
      display: block;
      width: 5rem;
      height: 5rem;
      margin-bottom: 0.75rem;
    }
    @media (max-width: 30rem) {
      .samples { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <svg class="sprite" xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true">
    <defs>
      <symbol id="tile-mark" viewBox="0 0 48 48">
        <rect x="4" y="4" width="40" height="40" rx="6"
              fill="none" stroke="currentColor" stroke-width="2" />
        <circle cx="24" cy="24" r="9" fill="currentColor" />
      </symbol>
    </defs>
  </svg>

  <h1>Sample tiles</h1>
  <ul class="samples">
    <li class="sample">
      <svg xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 48 48" role="img"
           aria-labelledby="sample-alpha-label">
        <use href="#tile-mark" width="48" height="48"
             aria-hidden="true" />
      </svg>
      <span id="sample-alpha-label">Sample Alpha</span>
    </li>
    <li class="sample">
      <svg xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 48 48" role="img"
           aria-labelledby="sample-beta-label">
        <use href="#tile-mark" width="48" height="48"
             aria-hidden="true" />
      </svg>
      <span id="sample-beta-label">Sample Beta</span>
    </li>
  </ul>
</body>
</html>

The intended accessible names are Sample Alpha and Sample Beta. These are expected results from the markup, not reported browser test results. The drawing inside each wrapper is explicitly hidden from assistive technology; the named outer SVG remains exposed. SVG accessibility mappings distinguish hidden descendants from their exposed parent. SVG Accessibility API Mappings

When adding a third occurrence, reuse href="#tile-mark", create a new caption ID, and update that occurrence’s aria-labelledby to match. Keep the symbol reference shared and the label reference specific to the occurrence.

Visible captions can also be encountered separately during screen-reader reading. If the tile adds no information beyond its caption, use the decorative pattern instead: remove role="img" and aria-labelledby from the outer SVG, then give it aria-hidden="true". Retain the visible caption. The SVG mappings document exclusion through aria-hidden. SVG Accessibility API Mappings

Which browser mechanism controls each part of the layout?

There are three separate jobs in this example: arranging the cards, drawing the symbol, and computing accessible names. Changing one does not automatically perform the others.

CSS Grid arranges the HTML list items. Declaring display: grid makes the container’s direct children grid items; grid-template-columns defines the columns. Here, the media query changes the list from two columns to one. This affects the cards’ page layout. Basic concepts of grid layout

SVG coordinates control the shapes inside each graphic. The symbol’s viewBox="0 0 48 48" establishes its coordinate rectangle, and the use element’s dimensions size the referenced symbol viewport. Those dimensions do not create HTML card columns or caption spacing. SVG 2 explicitly distinguishes reused-graphics layout from CSS box layout. Document Structure — SVG 2

Accessible naming associates each outer SVG with text through aria-labelledby. It does not draw text, position a caption, or resize a graphic. W3C’s naming guidance describes this attribute as a reference to content used to calculate the accessible name. Providing Accessible Names and Descriptions

This separation gives you a useful diagnostic rule: inspect Grid when cards are misplaced, SVG coordinates when drawings are misplaced, and naming references when labels are wrong. Adding x or y to use offsets reused graphics inside SVG space; it does not move the HTML caption. Also, use dimensions are not a general replacement for scaling arbitrary referenced shapes: MDN documents their effect when referencing an SVG or symbol with a viewBox. SVG use element

What if there is no visible caption?

Use a per-instance title when the graphic needs a name but the design has no suitable visible text. The following is a replacement fragment for the first visible SVG in the complete example. It still depends on the existing tile-mark symbol:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48" role="img"
     aria-labelledby="sample-alpha-title">
  <title id="sample-alpha-title">Sample Alpha</title>
  <use href="#tile-mark" width="48" height="48"
       aria-hidden="true" />
</svg>

For each additional occurrence, give the title a different ID and update its parent’s reference. MDN documents title as an SVG accessible naming element and recommends placing it first for compatibility with SVG 1.1. Title text is not visibly rendered as part of the drawing, although browsers usually display it as a tooltip. The SVG accessible name element

For a short name without a title element, replace aria-labelledby with aria-label="Sample Alpha" on that occurrence’s outer SVG. Avoid leaving competing naming attributes behind: W3C documents that aria-labelledby has precedence over aria-label. A leftover reference can therefore prevent your new string from becoming the name. Providing Accessible Names and Descriptions

Do not try to assign an occurrence-specific title by editing a generated clone. SVG 2 specifies a read-only instance shadow tree. The current SVG Accessibility API Mappings Working Draft also restricts ARIA ID-reference matching into use shadow trees. These are documented boundaries; they are not evidence that every browser implements identical behavior. Keeping the label on the authored wrapper avoids depending on clone lookup. Document Structure — SVG 2, SVG Accessibility API Mappings

How do you check and troubleshoot the result?

Check the visible result and accessible names separately in your Mac browser. Inspect each outer SVG in the browser’s accessibility tools, then check it with VoiceOver. W3C specifically recommends assistive-technology testing for names calculated through aria-labelledby. Providing Accessible Names and Descriptions

Use these expected results as a small acceptance checklist:

  1. Both drawings appear, with their respective visible captions.
  2. Each outer SVG has an image role and the corresponding name.
  3. The symbol definition does not appear as an extra meaningful graphic.
  4. Narrowing the window changes the card arrangement while each graphic retains its label.
  5. Changing only the second caption changes only the second graphic’s computed name.

If both graphics receive the same name, compare their aria-labelledby values first. Then check that each referenced ID identifies the intended text. Do not assume that visual proximity establishes the relationship: the attribute explicitly references an element by ID. Providing Accessible Names and Descriptions

If the entire drawing is announced as one image when you need several independent images, inspect where role="img" sits. A single image role around the entire collection asks assistive technology to treat that collection as one entity. Keep separate image wrappers for separate simple graphics. ARIA: img role

If you are actually embedding an SVG file through HTML img, use that element’s alt attribute for each occurrence. WHATWG defines alt as equivalent fallback content for the image. Inline SVG uses different naming mechanisms and does not support alt as its alternative-text attribute. HTML Standard: The img element, SVG in HTML introduction

For this layout task, keep one shared drawing definition and one naming decision per occurrence. Choose the wrapper according to what the reader needs to encounter, connect it to the appropriate text, and verify the resulting accessible name independently of the visual layout.

Sources