Accessible SVGs

Scalable Vector Graphic (SVG) entwickelt sich zum bevorzugten Grafikformat für das Web. Geben Sie die Icon-Schriftarten auf oder ersetzen Sie alte JPG-, GIF- und PNG-Grafiken durch das gut unterstützte SVG? Lassen Sie uns sehen, wie sich dies auf Benutzer von assistiver Technologie (AT) auswirkt und was erforderlich ist, um eine großartige Benutzererfahrung für alle zu gewährleisten.

Grafiken und Alternativtext

Bevor wir mit barrierefreien SVGs beginnen, einige kurze Punkte zu Grafiken, Barrierefreiheit und Alternativtext.

1. Benötigt die betreffende Grafik einen Alternativtext?

Wenn eine Grafik rein dekorativ ist, benötigt sie keinen Alternativtext.

Alle <img>-Tags benötigen das alt-Attribut, um gültig zu sein. Das Attribut kann jedoch leer gelassen werden (kein Leerzeichen) <img src="pathtofile.svg" alt=""> und trotzdem gültig sein. 😮

2. Welchen Kontext hat die Grafik und der umgebende Text?

Wenn um die Grafik Text/Inhalt vorhanden ist, der den Alternativtext liefert, ist kein zusätzlicher alt-Text erforderlich. Zum Beispiel

Siehe den Pen SVG as img src for figure with figcaption von Heather Migliorisi (@hmig) auf CodePen.

Was ist der am besten geeignete Alternativtext für die Grafik, wenn sie ein alt-Attribut benötigt (siehe Beispiel 4 für weitere Informationen)? Je nach Inhalt des Bildes kann es unterschiedlich gehandhabt werden

Siehe den Pen SVG as img src for figure with figcaption von Heather Migliorisi (@hmig) auf CodePen.

3. Hat die Grafik eine Funktion? Wenn ja, sollte dies dem Benutzer mitgeteilt werden

Zum Beispiel, anstatt Icons exakt so zu beschriften, wie sie dargestellt werden

Schlechtes Code-Beispiel

<a href="http://codepen.io/username">
  <img src="codepen_icon.png" 
      alt="CodePen Logo">
</a>

Stellen Sie dem Benutzer einen Kontext zur Verfügung

Gutes Code-Beispiel

<a href="http://codepen.io/username">
  <img src="codepen_icon.png" 
  alt="See Picked Pens">
</a>

Für weitere Informationen lesen Sie bitte den Artikel „Alternative Text“ von WebAIM (Artikel über Alternativtext) für ein umfassendes Verständnis barrierefreier Grafiken und die WAI Web Accessibility Tutorials zu Bildern.

Die folgenden Beispiele wurden entwickelt, um mit

1. Browsern zu funktionieren, die SVG unterstützen: IE 10+, FF, Chrome und Safari
2. Am häufigsten verwendeten Screenreader: Jaws, NVDA, VoiceOver (VO) und Narrator

Grundlegender Bildersatz

Für die grundlegendste Implementierung eines SVG haben wir folgende Optionen

1. SVG als img src

Siehe den Pen SVG as img src von Heather Migliorisi (@hmig) auf CodePen.

Lassen Sie uns unsere Browser-Nutzungsstatistiken überprüfen, um zu sehen, ob wir weitere Schritte unternehmen müssen. Wenn die Benutzer der Website die neueste Version (Safari Desktop Version 9.1.1 oder iOS Version 9.3.2) oder neuer verwenden, können wir hier aufhören.

Wenn jedoch die Mehrheit der Benutzer noch ältere Versionen von Safari oder iOS verwendet, müssen wir role="img" zu <img src="linktofile.svg" alt="Pixels, my super cute cat" role="img"> hinzufügen.

👏 Dank an die Leute, die den Safari/WebKit-Bug behoben haben!

Dieses Beispiel kann als einfacher Bildersatz verwendet werden, ermöglicht uns aber keinen Zugriff auf den Inhalt des SVG für AT oder CSS/JS. Wenn wir also mehr Kontrolle über das SVG wünschen, müssen wir das SVG direkt in das HTML einbetten.

2. Inline-SVG

Das Inline-Einbetten von SVG liefert vorhersagbarere Ergebnisse und mehr Kontrolle als die Verwendung von <use> oder <img>, da die SVG-Quelle direkt im DOM verfügbar ist, das für die Barrierefreiheits-API, die von AT verwendet wird, zugänglich ist.

Nehmen wir das gleiche Basis-SVG aus dem <img>-Beispiel und sagen, wir möchten den Augen Bewegung hinzufügen. Dies können wir über JS tun, wenn wir das SVG direkt in das HTML einbetten.

Siehe den Pen Basic SVG – Cat von Heather Migliorisi (@hmig) auf CodePen.

Da dieses SVG keinen sichtbaren Text enthält, der die Grafik beschreibt, müssen wir den Alternativtext (unsichtbar) hinzufügen, indem wir

• Innerhalb des <svg> fügen Sie hinzu
  • <title>Ein kurzer Titel des SVG</title>
    • muss das erste Kind seines Elternelements sein
    • wird als Tooltip verwendet, wenn sich das Zeigegerät darüber bewegt
• Eine Beschreibung kann hinzugefügt werden, wenn nötig
  • eine Beschreibung– beachten Sie, dass dies von Narrator nicht vorgelesen wird (Fehler gemeldet)

Laut der W3C-Spezifikation sollten wir nichts Zusätzliches für SVGs tun müssen, außer dem <title> und möglicherweise einem <desc> bereitzustellen, da diese für die Accessibility API verfügbar sein sollten. Leider ist die Browserunterstützung noch nicht ganz da (Fehler gemeldet für: Chrome und Firefox).

Um sicherzustellen, dass AT auf <title> und <desc> zugreifen kann

• Fügen Sie die entsprechenden IDs zu <title> und <desc> hinzu
  • <title id="uniqueTitleID">Der Titel des SVG</title>
  • <desc id="uniqueDescID">Eine längere, vollständigere Beschreibung für komplexe Grafiken.</desc>
• Fügen Sie dem <svg>-Tag hinzu
  • aria-labelledby="uniqueTitleID uniqueDescID" (verwenden Sie die IDs von Titel und Beschreibung) – sowohl Titel als auch Beschreibung sind in aria-labelledby enthalten, da es eine bessere Unterstützung durch Screenreader hat als aria-describedby (siehe Tipp #4)

Noch etwas

• Fügen Sie dem <svg>-Tag hinzu
  • role="img" (damit das SVG nicht von Browsern durchlaufen wird, die das SVG der Rolle "group" zuordnen)

Möchten Sie eine einfache Animation hinzufügen, wie z.B. blinzelnde Augen?

setInterval(function blinkeyes() {
  var tl = new TimelineLite();
  tl.to(".eye", .4, {scaleY:.01, repeat:3, repeatDelay:.4, yoyo:true, transformOrigin: "50% 70%", ease:Power2.easeInOut});
  return tl; 
 }, 5000);

var master = new TimelineLite(); 
master.add(blinkeyes());

Aktualisieren Sie den Titel/die Beschreibung, sodass sie das Bild genau erklären.

<desc id="catDesc">An illustrated gray cat with bright green blinking eyes.</desc>

Siehe den Pen Simple Inline Accessible SVG Cat – using title and desc von Heather Migliorisi (@hmig) auf CodePen.

3. SVG über object oder iframe einbetten

Vorerst würde ich davon abraten, <object> und <iframe> zu verwenden. In Bezug auf die Verwendung mit einem Screenreader sind sie nicht ausreichend.

Hier sind meine Erfahrungen

Wählen Sie Ihre Methode zum Einbetten des SVG und fügen Sie tabindex="0" hinzu

<object type="image/svg+xml" 
    data="/path-to-the-svg/filename.svg" 
    width="50%" 
    tabindex="0">
  <img src="Fallback_image.jpg" alt="alt content here">
</object>

<iframe src="/path-to-the-svg/filename.svg" 
    width="65%" 
    height="500" 
    sandbox 
    tabindex="0">
  <img src="Fallback_image.jpg" alt="alt content here">             
</iframe>

Beginnend mit dem endgültigen SVG aus dem Inline-Beispiel müssen wir role="img" durch role="group" auf dem SVG ersetzen.

<svg id="cat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" aria-labeledby="pixels-title pixels-desc" role="group">

Hier beginnt es, bergab zu gehen...

Fügen Sie ein <text>-Element im SVG hinzu, das den Inhalt von <title> und möglicherweise <desc> enthält (für NVDA)

<text id="nvda-title">A cute, gray cat with green eyes. Cat illustration by Heather Migliorisi.</text>

Fügen Sie dann eine Klasse hinzu, um den Text visuell auszublenden, aber den Inhalt für Screenreader verfügbar zu halten. Dies können wir tun, indem wir font-size: 0 setzen.

.sr-only { font-size: 0; }

Somit haben Sie sowohl den <title> (und möglicherweise <desc>) *als auch* <text> mit demselben Inhalt, um sowohl JAWS als auch NVDA zu unterstützen.

Ich empfehle (basierend auf Browser-/Screenreader-Unterstützung), <img src="svg.svg> zu verwenden, wenn möglich. Obwohl es nicht immer möglich ist, da Objekt/iframe Interaktivität/Animation unterstützen, wo img oft nicht, und Fallback-Lösungen schwieriger sind.

Icons

Es gibt mehrere Artikel zum Thema des Ersetzens von Icon-Schriftarten durch SVG. Ich war neugierig, ob die Verwendung von SVG für Icons eine einfachere Implementierung der Barrierefreiheit ermöglichen würde. Bedeutet: ob die Browser <title> unterstützen würden, wenn man das SVG mit <use> in der Haupt-SVG-Quelldatei implementiert. Leider nein. Aber es ist einfach genug, dies mit dem Icon selbst zu tun, und wir zeigen Ihnen unten, wie.

Sobald die SVG-Datei erstellt ist, die die Icons enthält (ich verwende gerne icomoon dafür) und sie im Dokument enthalten ist (http://codepen.io/hmig/full/OXWMLr/), müssen wir die Muster (Icon + Link, Icon + Text, nur das Icon, etc.) bestimmen, die für die Website benötigt werden. Aus diesen Mustern können wir die geeignete Methode zur Anwendung von Alternativtext entwickeln.

Zunächst sieht der Code für Icons normalerweise so aus, wenn er von einem Icon-Generator kommt

<svg> 
  <title>phone</title>
  <use xlink:href="#icon-phone"></use>
</svg>

Beispiel 1: Eigenständiges Icon, aussagekräftig

Aussagekräftige Icons benötigen Alternativtext. Diese Methode ähnelt stark dem Beispiel „Basic Image Replacement, Inline SVG Example“.

• Aktualisieren Sie den Titeltext so, dass er widerspiegelt, wofür das Icon verwendet wird – sagen wir, es zeigt an, dass ein Dienst mobile Geräte unterstützt
• Zum <svg> fügen Sie role="img" hinzu (da das SVG nicht konsistent zugeordnet wird, wird es nicht immer von AT erkannt. Zum Beispiel funktioniert Folgendes nicht: Mac – VoiceOver + Chrome oder Safari, Windows – NVDA + FF)

<svg role="img"> 
  <title>Supports Mobile Devices</title>
  <use xlink:href="#icon-phone"></use>
</svg>

Auch hier überprüfen wir unsere Browser-Nutzungsstatistiken, um zu sehen, ob wir weitere Schritte unternehmen müssen. Wenn die Benutzer der Website die neueste Version (Chrome 49.1) oder neuer verwenden, können wir hier aufhören.

Wenn jedoch die Mehrheit der Benutzer noch ältere Versionen von Chrome verwendet, müssen wir der <title> eine id="xxxx" und dem <svg> ein aria-labelledby="xxxx" hinzufügen.

👏 Dank an die Leute, die den Chrome-Bug behoben haben!

Siehe den Pen Example 1: Standalone SVG Icon, Meaningful von Heather Migliorisi (@hmig) auf CodePen.

Beispiel 2: Eigenständiges Icon, dekorativ

Dekorative Icons (Icons, die die durch Text vermittelten Informationen wiederholen oder keinen wesentlichen Mehrwert bieten) benötigen keinen Alternativtext und sollten für Screenreader ausgeblendet werden. Für dieses Beispiel blenden Sie das SVG mit aria-hidden="true" aus.

<p>
  <svg aria-hidden="true"> 
    <title>checkmark</title>
    <use xlink:href="#icon-checkmark"></use>
  </svg> 
  Success! Your order went through.
</p>

Siehe den Pen yJYVpa von Heather Migliorisi (@hmig) auf CodePen.

Beispiel 3: Verknüpftes Icon, kein Text

Für verknüpfte Icons, die nicht mit Text kombiniert sind, können wir aria-label auf dem <a>-Element verwenden, um einen beschreibenden Alternativtext bereitzustellen. Fügen Sie aria-label="See Picked Pens" dem <a>-Element hinzu.

<a href="link" aria-label="See Picked Pens">
  <svg> 
    <use xlink:href="#icon-codepen"></use>
  </svg>
</a>

Siehe den Pen Example 3: Linked Icon, no text von Heather Migliorisi (@hmig) auf CodePen.

Beispiel 4: Verknüpftes Icon, mit statischem Text

Auch hier gilt: Bei verknüpften Icons, die mit Text kombiniert sind, verwenden wir aria-label auf dem <a>-Element, um einen beschreibenden Alternativtext bereitzustellen.

Mit aria-label im Anker-Tag liest der Screenreader den Text im Link nicht vor. Fügen Sie aria-label="See Picked Pens" dem <a>-Element hinzu.

<a href="link" aria-label="See Picked Pens">
  <svg> 
    <use xlink:href="#icon-codepen"></use>
  </svg>
  CodePen
</a>

Siehe den Pen Linked Icon, with static text von Heather Migliorisi (@hmig) auf CodePen.

Beispiel 5: Verknüpftes Icon, mit dynamischem Text

Nehmen wir an, es gibt einen dynamischen Wert im verknüpften Text + dem Icon. Hier sollten wir aria-label nicht auf dem Link verwenden, da sonst der Wert des dynamischen Textes verloren geht. Für dieses Beispiel können wir Spans und die Off-Screen-Text-Methode verwenden. Der numerische Wert im Span mit der ID "itemsInCart" ist das dynamisch hinzugefügte Element.

• Fügen Sie einen zusätzlichen Span mit dem Rest des Alternativtextes hinzu (z. B. „Artikel in Ihrem Warenkorb“)
• Fügen Sie die class="offscreen-text" hinzu, um diesen Text visuell auszublenden
• Fügen Sie aria-hidden="true" zum SVG hinzu

<a href="http://example.com" id="cart">
  <span id="itemsInCart">0</span>
  <span class="offscreen-text">items in your shopping cart</span>
  <svg aria-hidden="true">
    <use xlink:href="#icon-cart"></use>
  </svg>
</a>

Siehe den Pen Example 5: Linked Icon, with dynamic text von Heather Migliorisi (@hmig) auf CodePen.

Vollständige Liste der Icon-Beispiele

Siehe den Pen Accessible SVG Icons von Heather Migliorisi (@hmig) auf CodePen.

Komplexe Bilder – Ein barrierefreier Graph

Es ist großartig, dass wir SVGs anstelle von PNGs und JPGs verwenden können, insbesondere wenn es um komplexe Webinhalte wie ein Diagramm geht. Es wäre übertrieben, all diese Informationen im alt-Attribut bereitzustellen, daher wäre die Bereitstellung von Alternativtext für dieses Bild (als PNG/JPG) schwierig. Stattdessen können wir ein SVG verwenden und all diese Texte direkt zugänglich machen!

1. Einrichten der Datei

Reihenfolge der Ebenen – In Adobe Illustrator werden die Ebenen aus dem SVG von unten nach oben exportiert. Dies ist wichtig, da wir die Ebenen in der Reihenfolge einrichten wollen, in der sie vom Tastatur für das Lesen logisch durchlaufen werden sollen. Die Gruppe "Jaws" sollte zuerst im Code aufgeführt werden, sodass die Jaws-Ebene in Illustrator ganz unten liegt.

Ebenennamen – Es ist ratsam, die Ebenen zu benennen, da diese als IDs zum exportierten SVG hinzugefügt werden. Machen Sie sich keine Sorgen, wenn Ebenen denselben Namen haben, die IDs werden in diesem Fall inkrementiert.

Gruppierung von Ebenen – Es ist wichtig zu beachten, wie die Elemente hier gruppiert sind. Textbeschriftung + Schlüsselelement (für Farbe) und die Balken im Diagramm sind für jede Diagrammvariante (Jaws, NVDA usw.) in einer Gruppe enthalten. Der Grund für diese Einrichtung ist für Personen, die einen Screenreader zur Textverständnis verwenden. In einigen Browsern kann der Benutzer auf den Balken klicken und der entsprechende Text wird vorgelesen und/oder hervorgehoben.

Speichern/Exportieren – Als Sicherheitsmaßnahme behalte ich gerne zwei Versionen meines SVG bei, eine zum Bearbeiten in Illustrator und die andere zur Codebearbeitung. Also mache ich ein "Speichern unter" für die Illustrator-Version und "Datei > Exportieren > SVG" für die sauberere Webversion.

Optimierung – Das Letzte vor der manuellen Bearbeitung des SVG ist die Optimierung. Jake Archibalds Werkzeug, SVGOMG, ist ein ausgezeichnetes Werkzeug dafür. Fügen Sie das SVG hinzu und wechseln Sie dann zur Ansicht "CODE", um genau zu sehen, was die Feature-Schalter bewirken. Stellen Sie "prettify" ein, da wir den Code immer noch bearbeiten müssen, also wollen wir ihn lesbar haben.

Es ist am besten, mit der manuellen Bearbeitung des SVG (Hinzufügen von Barrierefreiheitsfunktionen) zu warten, bis absolut sicher ist, dass das SVG aus gestalterischer Sicht vollständig ist. Sobald wir uns auf den Weg der manuellen Bearbeitung begeben, kann es schwierig sein, zu erkennen, ob ein Editor (Inkscape/Illustrator/usw.) versehentlich etwas geändert hat, das explizit hinzugefügt wurde.

Versionskontrolle – Wenn Sie eine Git-basierte Variante der Versionskontrolle verwenden (Git, SourceTree usw.), committen Sie das SVG. Die Verwaltung der Datei über eines dieser Systeme hilft, eigenartige/unerwünschte Änderungen zu erkennen, wenn sie nach der manuellen Bearbeitung von Illustrator (oder anderen visuellen Editoren) geöffnet und gespeichert wird, da Code (aria-*) den Illustrator nicht versteht, ihn entfernt/löscht.

2. Machen wir es barrierefrei

Screenreader-durchlaufbar – Stellen Sie sicher, dass das SVG in allen Browsern durchlaufbar ist, indem Sie role="group" zum <svg> hinzufügen. Gemäß dem neuen SVG-Standard sollten sie der Rolle "graphics-document" zugeordnet werden. Der Standard ist jedoch noch ein Arbeitsentwurf, daher haben die Browser dies noch nicht implementiert.

Titel und Beschreibung – Da wir Textelemente im SVG haben, die wie Titel und Beschreibung wirken, verknüpfen wir sie mit dem <svg>-Element mit aria-labelledby="graph-title" und aria-describedby="graph-desc".

Bereinigung des Inhalts – Bereinigen Sie alle seltsamen Elemente, die Illustrator möglicherweise erstellt hat. Zum Beispiel wurden mehrere <tspan>s zum folgenden <text>-Element hinzugefügt. Ein Screenreader könnte die einzelnen Buchstaben vorlesen ("J" "a" "w" "s" "-" "44%") anstatt des Wortes ("Jaws – 44%"). Entfernen Sie also die unnötigen <tspan>s, die um einzelne Buchstaben gewickelt sind.

Beispiel schlecht

<text class="cls-2" transform="translate(345.49 36.45)">
  J
  <tspan x="6.23" y="0">a</tspan>
  <tspan x="14.22" y="0">w</tspan>
  <tspan x="26.51" y="0">s - 44%</tspan>
</text>

Beispiel behoben

<text class="cls-2" transform="translate(345.49 36.45)">
  Jaws - 44%
</text>

Link zur Umfrage hinzufügen – Inhaltlich, da dieses Diagramm auf einer Umfrage basiert, lassen Sie es uns verknüpfen. Vorerst (es ist keine Anforderung in SVG 2), fügen Sie in SVGs xlink: zum href hinzu.

<a xlink:href="http://webaim.org/projects/screenreadersurvey6/#used">

Weitere Informationen zu xlink finden Sie unter „We’ll Always Have Paris: Using SVG Namespacing and XLink“ von Dudley Storey.

Semantische Rollen hinzufügen – Fügen Sie den Gruppen, die die Balken, die Beschriftung und die Legende enthalten, semantische Rollen hinzu. Machen wir die Gruppe, die all diese enthält, zu einer Liste, da die meisten Screenreader die Gesamtzahl der Elemente in der Liste und die Position des aktuellen Elements in der Liste ansagen

<g id="bars" role="list">

und die einzelnen Gruppen darin können Listenelemente sein

<g id="Jaws" role="listitem">

Liste beschriften – Bieten Sie AT-Benutzern mehr Informationen über das Diagramm, mit dem sie interagieren. Fügen Sie der Gruppe, die die Liste enthält, ein Label mit aria-label="bar graph" hinzu.

<g id="bars" role="list" aria-label="bar graph" transform="translate(0,58)">

Testen und beheben – Lassen Sie uns mit dem Screenreader testen. Wie erwartet, liest der Screenreader den Titel, die Beschreibung und die Listenelemente der Legende durch. Aber er durchläuft auch die Prozentwerte auf der Y-Achse, jedes Rechteck und jede Linie.

Ein kurzer Hinweis zum Ausblenden von Elementen (Rechteck, Kreis, Text) aus AT in einem SVG – Die einzige Möglichkeit, Elemente in einem SVG vor einem Screenreader auszublenden, besteht darin, role="presentation" hinzuzufügen. Dies negiert die nativen Semantiken des Elements, sodass sie nicht für die Accessibility API abgebildet werden. Wenn Sie mehrere Elemente ausblenden möchten, können Sie leider nicht alles in ein <g> einpacken und role="presentation" hinzufügen. Dies blendet nur dieses Element aus AT aus, die Kindelemente sind weiterhin durchlaufbar. Wir müssen also role="presentation" zu jedem einzelnen Element hinzufügen, das ausgeblendet werden soll. Auf der positiven Seite soll die neue SVG Accessibility Spec diese Bürde erleichtern. Elemente wie Formen ohne Alternativtext werden als Rolle "none" oder "presentation" behandelt.

Formen/Linien ausblenden – Blenden Sie die Formelemente vor dem Screenreader aus, indem Sie role="presentation" zu jedem Element hinzufügen.

Textelemente ausblenden – Blenden Sie die verwirrenden Textelemente (wie oben gelb hervorgehoben – die 0-50% auf der Y-Achse, die X/Y-Achsenlinien und die Balken im Diagramm) vor dem Screenreader aus, indem Sie role="presentation" und aria-hidden="true" hinzufügen.

Siehe den Pen Accessible Complex Image – Bar Graph von Heather Migliorisi (@hmig) auf CodePen.

Demos von Screenreadern als Videos

• JAWS
• NVDA
• VoiceOver
• Narrator

Interaktive Bilder

Noch besser als barrierefreie Diagramme und Grafiken sind barrierefreie interaktive Bilder. Betrachten wir eine einfache Zeitleisten-Infografik. Was dies aufschlüsselt, sind: der obere "Titel"-Textabschnitt und der Zeitleistenabschnitt. Von dort aus unterteilt sich die Zeitleiste in Zeitsegmente, die einen Titel, ein Bild und eine Beschreibung enthalten.

Lassen Sie uns dieser Zeitleiste etwas Leben einhauchen und die Zeitsegmente animieren. Anstatt alle Informationen auf einmal anzuzeigen, zeigen wir nur die Zeit und den Aktivitätstitelkreis an. Wenn ein Benutzer mit dem Zeitbereich oder dem Aktivitätskreis interagiert, werden die restlichen Inhalte angezeigt.

1. Einrichten der Datei

Folgen Sie zuerst dem Abschnitt "Einrichten der Datei", der zuvor in diesem Artikel behandelt wurde. Ausgehend von der weboptimierten Version überspringen wir den CSS-Animationspart und tauchen direkt in die Zugänglichkeit ein.

2. Machen Sie es zugänglich

Stil-Eigenschaften wurden in den folgenden Beispielen entfernt, um den Code zu vereinfachen, sind aber in der tatsächlichen Demo vorhanden.

Bildschirmleser-zugänglich – Stellen Sie sicher, dass das SVG in allen Browsern zugänglich ist, fügen Sie dazu role="group" zum <svg> hinzu.

<svg id="InteractiveSVG" role="group">

Titel und Beschreibung – Für dieses Beispiel können wir den Text oben im SVG <g id="timeline-title"> als Titel verwenden und ihn durch Hinzufügen von aria-labelledby zum <svg> verknüpfen.

<svg id="InteractiveSVG" aria-labelledby="timeline-title" aria-describedby="timeline-desc" role="group">

Fügen Sie dann eine ID zur <desc> hinzu und verknüpfen Sie sie mit aria-describedby auf dem <svg>.

<desc id="timeline-desc">An Interactive Timeline</desc>

<svg id="InteractiveSVG" aria-labelledby="timeline-title" aria-describedby="timeline-desc" role="group">

Semantische Rollen hinzufügen – Fügen Sie semantische Rollen zu den Gruppen hinzu, die die Zeitleiste und die Zeitsegmente enthalten. Machen wir die Gruppe, die all diese enthält, zu einer Liste: <g id="timeline" role="list">.

Fügen Sie der Liste eine Beschriftung hinzu: <g id="timeline" role="list" aria-label="die Zeitleiste, von morgens bis abends">

und die einzelnen gruppierten Zeitsegmente darin können Listenelemente sein: <g id="play" role="listitem">

Interaktiv/Tastatur-zugänglich – Fügen Sie unmittelbar nach jedem <g> mit der role="listitem" ein <a xlink:href></a> hinzu, damit es die gesamte Gruppe umschließt. Derzeit ist dies die *einzige* Möglichkeit, Interaktivität zu einem SVG hinzuzufügen.

Fügen Sie tabindex="0" hinzu, um sicherzustellen, dass es in allen Browsern fokussierbar ist.

<a xlink:href="#play-group" tabindex="0" id="play-group"></a>

Semantik des Links korrigieren – Beachten Sie, dass der Link auf sich selbst verweist. Dies ist wirklich kein semantischer Link, da er nirgendwohin verlinkt und Benutzer von Screenreadern verwirren könnte. Fügen wir also eine role="img" hinzu, um anzuzeigen, dass es sich um ein Bildelement und nicht um einen Link handelt.

<a xlink:href="#play-group" role="img" id="play-group"></a>

Den Text innerhalb des Zeitsegments zugänglich machen – Das Hinzufügen der img-Rolle verhindert, dass der AT die restlichen Elemente durchläuft. Wir müssen also aria-labelledby mit den IDs der Textelemente in der Reihenfolge hinzufügen, in der sie gelesen werden sollen.

<a xlink:href="#play-group" role="img" aria-labelledby="play-time play-text" tabindex="0" id="play-group"></a>

Versteckten beschreibenden Text für die Bilder hinzufügen – Verwenden Sie das <tspan> mit einer Offscreen-Klasse, sodass es visuell versteckt ist, aber im DOM verbleibt.

<tspan class="offscreen" id="play-description">A gray kitten tangled in a ball of yarn.</tspan>

Die ID zum aria-labelledby auf dem xlink hinzufügen, damit sie gelesen wird.

<a xlink:href="#play-group" role="img" aria-labelledby="play-time play-text play-description" tabindex="0" id="play-group"></a>

Visuelle CSS für Fokus einstellen – Das Einstellen einer visuellen Darstellung für den Fokus ist für Benutzer, die die Tastatur zur Navigation verwenden, notwendig. Mir gefiel, wie es aussah, also habe ich es auch zum Hover-Zustand hinzugefügt.

a:focus [class*="time-circle"], a:hover [class*="time-circle"] {
  stroke: black;
  stroke-width: 5;
  paint-order: stroke;
}

JavaScript für Fensterfokus hinzufügen – Bei SVGs verschiebt sich das Fenster beim Navigieren durch die Link-Elemente nicht immer so, dass das Element im sichtbaren Bereich liegt. Der Grund ist, dass einige Browser (Fehler gemeldet und hoffentlich bald behoben) das <svg>-Element als Ganzes scrollen, ohne Rücksicht auf die Kindelemente, die möglicherweise außerhalb des Bildschirms liegen. Fügen wir also etwas JavaScript hinzu, um das Fenster zu scrollen und sicherzustellen, dass die fokussierten Elemente sichtbar sind.

Es gibt wahrscheinlich eine effizientere Methode, dies zu tun, aber dies ist nur ein kurzes Beispiel

$("#play-group").focus(function() {
  window.scrollTo(250,350);
});
...
$("#cuddle-group" ).focus(function(){
  window.scrollTo(250 , 1350);
});

Siehe den Pen Accessible Interactive SVG von Heather Migliorisi (@hmig) auf CodePen.

Demos von Screenreadern als Videos

• JAWS
• NVDA
• VoiceOver
• Narrator

SVGs und High Contrast Mode

Ein weiterer Haken: Windows und der High Contrast Mode für Menschen mit eingeschränktem Sehvermögen nutzen diese Funktion zur Verbesserung der Lesbarkeit von Inhalten. Es ist ein Haken, denn wenn er verwendet wird, können sich Text und Dokumentenkörper ändern, wenn die Funktion aktiviert wird, aber Elemente in einem SVG werden nicht aktualisiert, wenn ein Benutzer verschiedene Kontrastmodi wählt.

Die gute Nachricht: Es gibt Media Queries, um dies zu handhaben.

Beispiele, wie der Icon-Bereich im Artikel korrigiert werden kann

@media screen and (-ms-high-contrast: active) {
  .icon svg {
    /* select a color that will contrast 
       well on black or white because other 
       color modes can be chosen and you 
       need a color that will work with either 
    */
    fill: green;
  }
}

/* black text on white background *.
@media screen and (-ms-high-contrast: black-on-white) {
   .icon svg {
     /* select a dark color that will 
        contrast on black 
        (#fff is too much contrast) 
     */
    fill: #333;
  }
}

/* black text on white background */
@media screen and (-ms-high-contrast: white-on-black) {
 .icon svg {
    /* select a light color that will 
       contrast on white 
       (#000 is too much contrast)
    */
    fill: #efefef;
  }
}

Fazit

• Feststellen, ob alternativer Text benötigt wird
  1. Wenn nein, das Bild/SVG ausblenden aria-hidden="true"
  2. Wenn ja
     1. Titel und/oder Beschreibung zum SVG-Element hinzufügen/verknüpfen
     2. Rollen zur semantischen Wertigkeit verwenden (z. B. role="list", role="listitem")
     3. Grafische Elemente und Gruppen, die nicht gelesen werden sollen, mit role="presentation" ausblenden
     4. Textelemente, die nicht gelesen werden sollen, mit role="presentation" und aria-hidden=”true” ausblenden
• Feststellen, ob das SVG interaktiv ist
  1. Wenn nein – nichts weiter tun
  2. Wenn ja
     1. Fokus mit xlink + tabindex="0" setzen
     2. Wenn der Link kein tatsächlicher Link ist, eine Rolle hinzufügen, um ihn semantisch zu machen
     3. JS zum Setzen des Fensterfokus hinzufügen
     4. Visuelles CSS für Fokus einstellen: Umriss
• Mit verschiedenen Screenreadern + Browsern testen. Unterschiedliche Kontrastmodi testen. Tastaturnavigation testen.

Besonderer Dank

Ein riesiges „Dankeschön“ an Amelia Bellamy-Royds und Leonie Watson dafür, dass sie einige der Beispiele nochmals überprüft und auf Probleme hingewiesen haben! Ohne ihre Hilfe hätte ich diesen Artikel nicht zusammenstellen können.

Während der Arbeit an diesem Artikel gemeldete Fehler \o/

Microsoft

• https://connect.microsoft.com/IE/Feedback/Details/2483564
• https://connect.microsoft.com/IE/Feedback/Details/2480772

Mozilla

• https://bugzilla.mozilla.org/show_bug.cgi?id=1257399
• https://bugzilla.mozilla.org/show_bug.cgi?id=1257600

Während der Arbeit an diesem Artikel behobene Fehler 👏

• Safari/WebKit-Fehler, der die Hinzufügung von role="img" zum <img>-Tag erforderte
• Chrome-Fehler, der erforderte, dass aria-labelledby oder aria-label zum svg hinzugefügt wird, damit der Titel gelesen wird.

Ressourcen

• Der Wechsel von Icon Fonts zu SVG: Konvertierung von Schrift-Icons in SVG von Sara Soueidan
• WAI-Bild-Tutorial
• WebAIM: Alternativer Text, Kontext ist alles
• W3C – Anforderungen für die Bereitstellung von Text als Alternative für Bilder
• Accessibility APIs: Ein Schlüssel zur Web-Barrierefreiheit von Léonie Watson & Chaals McCathie Nevile
• W3C – Die Elemente „desc“ und „title“
• Tipps für die Erstellung zugänglicher SVGs von Léonie Watson
• SVGOMG von Jake Archibald
• W3C – graphics-doc (role)
• We'll Always Have Paris: SVG-Namensräume und XLink verwenden von Dudley Storey
• Grundlegende Befehle für Screenreader zum Testen der Barrierefreiheit von The Paciello Group
• W3C – Elemente in den Barrierefreiheitsbaum aufnehmen
• -ms-high-contrast Media Query