Gib jedem wiederholten Symbol ein eigenes äußeres SVG mit einem barrierefreien Namen und verwende darin nur die Zeichnung erneut. Diese Anleitung zeigt, wie du auf einem Mac eine kleine Liste beschrifteter Grafiken erstellst und Seitenlayout, SVG-Koordinaten und barrierefreie Benennung voneinander trennst.

Bei einer einfachen Grafik empfiehlt MDN, role="img" und eine Beschriftung auf das äußere SVG zu setzen, damit assistive Technologien es als ein Bild behandeln können. Das praktische Muster hier ist ein Wrapper pro Vorkommen, der jeweils auf seine eigene Beschriftung verweist. ARIA: img-Rolle

Wo gehört die barrierefreie Beschriftung jeder Instanz hin?

Setze den Namen auf das Element, das das jeweilige Vorkommen darstellt. Wenn mehrere separate Grafiken dasselbe Symbol verwenden, gib jedem äußeren svg einen eigenen Verweis auf aria-labelledby oder aria-label. Beschränke das gemeinsam genutzte Symbol auf die wiederverwendbare Geometrie.

Damit wird zwischen einer Definition und ihren gerenderten Instanzen unterschieden. Das SVG-Element use verweist auf Grafiken und rendert wiederverwendete Inhalte über einen Shadow Tree; die dabei erzeugten Formen sind keine gewöhnlichen untergeordneten Knoten im DOM der Seite. Durch die Wiederverwendung einer Zeichnung entstehen daher keine separat bearbeitbaren Kopien ihrer internen Beschriftung in deinem HTML. Dokumentstruktur — SVG 2

Ein Titel innerhalb des gemeinsam genutzten Symbols kann außerdem ohne einen weiteren Benennungsmechanismus keinen unterschiedlichen Text für verschiedene Vorkommen bereitstellen. Dieselbe neutrale Kachelzeichnung könnte beispielsweise an einer Stelle Sample Alpha und an einer anderen Sample Beta darstellen. Diese Namen gehören zu den jeweiligen Vorkommen, auch wenn ihre Geometrie identisch ist.

Wähle die Benennungsmethode danach aus, wo der nützliche Text bereits vorhanden ist:

Situation Empfohlenes Muster
Eine kurze sichtbare Bildunterschrift benennt die Grafik Verweise mit aria-labelledby auf ihre eindeutige ID im äußeren SVG.
Die Grafik benötigt einen Namen, hat aber keine sichtbare Bildunterschrift Füge in jedes äußere SVG ein eindeutiges title ein und verweise mit aria-labelledby darauf, oder verwende aria-label.
Die Grafik dekoriert lediglich Text, der bereits alle Informationen vermittelt Blende das SVG gegenüber assistiven Technologien aus, statt einen redundanten Namen hinzuzufügen.
Mehrere Vorkommen müssen einzeln auffindbar bleiben Fasse sie nicht in einem einzigen äußeren role="img"-Bild zusammen.

MDN empfiehlt, auf sichtbaren Text zu verweisen, wenn dieser das SVG benennen kann. Die Dokumentation zur Image-Rolle erklärt außerdem, dass role="img" den Inhalt als eine einzelne Einheit darstellt. Deshalb ist die Grenze des Wrappers wichtig. Das Element für den barrierefreien Namen von SVG, ARIA: img-Rolle

Erstelle eine vollständige Seite mit zwei unabhängig benannten Instanzen

Das folgende Beispiel ist ein vollständiges HTML-Dokument mit ausschließlich synthetischem Text und einer einfachen Kreis-und-Quadrat-Zeichnung. Es benötigt weder JavaScript noch ein externes Sprite, eine Bibliothek oder einen Build-Prozess. Speichere es auf deinem Mac in einem Klartext-Codeeditor als symbol-labels.html und öffne die Datei anschließend in einem Desktopbrowser.

Beide Vorkommen verweisen auf tile-mark, aber ihre äußeren SVGs verweisen auf unterschiedliche sichtbare Bildunterschriften. Dabei wird das von MDN dokumentierte Benennungsmuster mit sichtbarem Text verwendet. Das Attribut href ist der aktuelle SVG-Referenzmechanismus; MDN führt xlink:href als veraltet auf. Das Element für den barrierefreien Namen von SVG, 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>

Die vorgesehenen barrierefreien Namen sind Sample Alpha und Sample Beta. Dies sind erwartete Ergebnisse des Markups, keine berichteten Browser-Testergebnisse. Die Zeichnung innerhalb jedes Wrappers ist für assistive Technologien ausdrücklich ausgeblendet; das benannte äußere SVG bleibt zugänglich. Die SVG-Zuordnungen für Barrierefreiheit unterscheiden ausgeblendete Nachfahren von ihrem zugänglichen übergeordneten Element. SVG-Zuordnungen für Barrierefreiheit zu APIs

Wenn du ein drittes Vorkommen hinzufügst, verwende erneut href="#tile-mark", erstelle eine neue Beschriftungs-ID und passe aria-labelledby dieses Vorkommens entsprechend an. Verwende weiterhin denselben Symbolverweis, aber einen für das jeweilige Vorkommen spezifischen Beschriftungsverweis.

Sichtbare Bildunterschriften können beim Vorlesen durch Screenreader auch separat erfasst werden. Wenn die Kachel keine zusätzlichen Informationen über ihre Bildunterschrift hinaus vermittelt, verwende stattdessen das dekorative Muster: Entferne role="img" und aria-labelledby aus dem äußeren SVG und gib ihm dann aria-hidden="true". Behalte die sichtbare Bildunterschrift bei. In der SVG-Dokumentation zu Zuordnungen wird das Ausschließen mithilfe von aria-hidden beschrieben. SVG-Zuordnungen für Barrierefreiheit zu APIs

Welcher Browsermechanismus steuert welchen Teil des Layouts?

In diesem Beispiel gibt es drei getrennte Aufgaben: die Anordnung der Karten, das Zeichnen des Symbols und die Berechnung barrierefreier Namen. Eine Änderung an einer davon übernimmt nicht automatisch die anderen.

CSS Grid ordnet die HTML-Listenelemente an. Mit display: grid werden die direkten Kindelemente des Containers zu Grid-Elementen; grid-template-columns legt die Spalten fest. Hier ändert die Media Query die Liste von zwei Spalten auf eine. Das wirkt sich auf das Seitenlayout der Karten aus. Grundlegende Konzepte des Grid-Layouts

SVG-Koordinaten steuern die Formen innerhalb jeder Grafik. Das viewBox="0 0 48 48"-Attribut des Symbols legt dessen Koordinatenrechteck fest, und die Abmessungen des Elements use bestimmen die Größe des Darstellungsbereichs für das referenzierte Symbol. Diese Abmessungen erzeugen weder HTML-Kartenspalten noch Abstände für Bildunterschriften. SVG 2 unterscheidet ausdrücklich zwischen dem Layout wiederverwendeter Grafiken und dem CSS-Boxlayout. Dokumentstruktur — SVG 2

Die barrierefreie Benennung verknüpft jedes äußere SVG über aria-labelledby mit Text. Sie zeichnet keinen Text, positioniert keine Bildunterschrift und skaliert keine Grafik. Die Benennungsrichtlinien des W3C beschreiben dieses Attribut als Verweis auf Inhalte, die zur Berechnung des barrierefreien Namens verwendet werden. Barrierefreie Namen und Beschreibungen bereitstellen

Diese Trennung liefert eine nützliche Diagnosehilfe: Prüfe Grid, wenn Karten falsch angeordnet sind, SVG-Koordinaten, wenn Zeichnungen falsch positioniert sind, und Benennungsverweise, wenn Beschriftungen falsch sind. Werden x oder y zu use hinzugefügt, verschiebt das wiederverwendete Grafiken innerhalb des SVG-Raums; die HTML-Bildunterschrift wird dadurch nicht bewegt. Außerdem sind use-Abmessungen kein allgemeiner Ersatz für die Skalierung beliebiger referenzierter Formen: MDN dokumentiert ihre Wirkung beim Verweis auf ein SVG oder Symbol mit einem viewBox. SVG-use-Element

Was ist, wenn es keine sichtbare Bildunterschrift gibt?

Verwende einen Titel pro Instanz, wenn die Grafik einen Namen benötigt, das Design aber keinen geeigneten sichtbaren Text enthält. Das folgende Fragment ersetzt das erste sichtbare SVG im vollständigen Beispiel. Es greift weiterhin auf das vorhandene Symbol tile-mark zurück:

<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>

Gib dem Titel für jedes weitere Vorkommen eine andere ID und passe den Verweis des übergeordneten Elements an. MDN dokumentiert title als SVG-Element zur barrierefreien Benennung und empfiehlt, es für Kompatibilität mit SVG 1.1 an den Anfang zu setzen. Titeltext wird nicht sichtbar als Teil der Zeichnung gerendert, obwohl Browser ihn üblicherweise als Tooltip anzeigen. Das Element für den barrierefreien Namen von SVG

Für einen kurzen Namen ohne Titelelement ersetze aria-labelledby bei diesem Vorkommen durch aria-label="Sample Alpha" im äußeren SVG. Lass keine konkurrierenden Benennungsattribute stehen: Laut W3C hat aria-labelledby Vorrang vor aria-label. Ein übrig gebliebener Verweis kann daher verhindern, dass die neue Zeichenfolge zum Namen wird. Barrierefreie Namen und Beschreibungen bereitstellen

Versuche nicht, einen instanzspezifischen Titel zuzuweisen, indem du einen erzeugten Klon bearbeitest. SVG 2 definiert den Instanz-Shadow-Tree als schreibgeschützt. Auch der aktuelle Entwurf der SVG Accessibility API Mappings schränkt den ARIA-ID-Referenzabgleich in Shadow Trees von use ein. Diese Grenzen sind dokumentiert; sie belegen nicht, dass sich alle Browser identisch verhalten. Wenn du die Beschriftung im selbst verfassten Wrapper belässt, bist du nicht auf die Suche im Klon angewiesen. Dokumentstruktur — SVG 2, SVG-Zuordnungen für Barrierefreiheit zu APIs

Wie prüfst und behebst du das Ergebnis?

Prüfe die sichtbare Darstellung und die barrierefreien Namen getrennt voneinander in deinem Mac-Browser. Untersuche jedes äußere SVG in den Barrierefreiheitstools des Browsers und prüfe es anschließend mit VoiceOver. Das W3C empfiehlt ausdrücklich Tests mit assistiven Technologien für Namen, die anhand von aria-labelledby berechnet werden. Barrierefreie Namen und Beschreibungen bereitstellen

Verwende die folgenden erwarteten Ergebnisse als kurze Abnahme-Checkliste:

  1. Beide Zeichnungen werden mit ihren jeweiligen sichtbaren Bildunterschriften angezeigt.
  2. Jedes äußere SVG hat die Bildrolle und den entsprechenden Namen.
  3. Die Symbold​​efinition erscheint nicht als zusätzliche bedeutungsvolle Grafik.
  4. Wenn du das Fenster schmaler machst, ändert sich die Kartenanordnung, während jede Grafik ihre Beschriftung behält.
  5. Wenn du nur die zweite Bildunterschrift änderst, ändert sich nur der berechnete Name der zweiten Grafik.

Wenn beide Grafiken denselben Namen erhalten, vergleiche zuerst ihre aria-labelledby-Werte. Prüfe dann, ob jede referenzierte ID auf den vorgesehenen Text verweist. Geh nicht davon aus, dass die räumliche Nähe die Beziehung herstellt: Das Attribut verweist ausdrücklich anhand der ID auf ein Element. Barrierefreie Namen und Beschreibungen bereitstellen

Wenn die gesamte Zeichnung als ein Bild angesagt wird, obwohl du mehrere unabhängige Bilder benötigst, prüfe, wo role="img" steht. Eine einzelne Bildrolle um die ganze Sammlung herum fordert assistive Technologien auf, diese Sammlung als eine Einheit zu behandeln. Verwende für separate einfache Grafiken jeweils eigene Bild-Wrapper. ARIA: img-Rolle

Wenn du tatsächlich eine SVG-Datei über ein HTML-img einbindest, verwende für jedes Vorkommen das Attribut alt dieses Elements. Laut WHATWG ist alt gleichwertiger Fallback-Inhalt für das Bild. Inline-SVG verwendet andere Benennungsmechanismen und unterstützt alt nicht als Attribut für Alternativtext. HTML-Standard: Das img-Element, Einführung zu SVG in HTML

Behalte für diese Layoutaufgabe eine gemeinsam genutzte Zeichnungsdefinition und eine Benennungsentscheidung pro Vorkommen bei. Wähle den Wrapper danach aus, was Leser erfassen sollen, verknüpfe ihn mit dem passenden Text und prüfe den resultierenden barrierefreien Namen unabhängig vom visuellen Layout.

Quellen