Abbildungen im Web

Grundsätzliches zu Grafiken

Die folgende Zusammenstellung bezieht sich zum Großteil auf Heather Migliorisi mit ihrem Beitrag auf CSS-Ticks

Fall 1: Dekografiken

Wenn eine Grafik rein dekorativ ist, braucht sie keinen Alternativtext. Alle img-Tags benötigen das alt-Attribut, um gültig zu sein, aber das Attribut kann leer gelassen werden (kein Leerzeichen) <img src="pathtofile.svg" alt=""> und damit trotzdem gültig sein.

Fall 2: umgebender Text beschreibt Grafik

Eine Ansicht von weather.com für Pittsburgh, 6. Juni 2016, 5:45 PM mit mehreren verstreuten Stürmen, die von West nach Ost ziehen.
auch dann kann das Alt-Attribut leer bleiben. Je nach Kontext kann aber ergänzend ein Alt-Attribut hinzugefügt werden.
Eine Ansicht von weather.com für Pittsburgh mit mehreren verstreuten Stürmen, die von West nach Ost ziehen.
Als Wetterradar werden alle Radargeräte bezeichnet, die vorwiegend zur Erfassung von Wetterdaten dienen. Wetterradargeräte sind oft untereinander vernetzt und speisen ihre Radarinformation in einen Großrechner ein, der aus diesen aktuellen Beobachtungen eine Großwetterlage berechnet und eine Wettervorhersage durch Simulationen und Vergleichen mit bereits aus der Vergangenheit bekannten Wetterabläufen ermöglicht. Informationen aus wikipedia
<img ... alt="Eine Ansicht von weather.com für Pittsburgh mit mehreren verstreuten Stürmen, die von West nach Ost ziehen.">

Fall 3: Die Grafik erfüllt eine Funktion

Ist dies der Fall (z.B. Link ohne Beschriftung mit lediglich einem Icon), sollte sie dem Benutzer vermittelt werden.

Zeige die Codepen Seite von Heather Migliorisi 
<a href="https://codepen.io/hmig">
  <img src="../img/codepen1.png"
alt="Zeige die Codepen Seite von Heather Migliorisi"></a>
Weitere gute Hinweise zur Entscheidung zum Alternativtext und Co.:
Informative Bilder bei Jan Hellbusch
Tutorial zum Thema Bilder bei W3.org
Gut fürs Image (Handreichung DVBS)

SVG und Barrierefreiheit

Warum SVG?

Skalierbare Vektorgrafiken (SVG) sind das bevorzugte Grafikformat im Webbereich, wann immer eine Pixelgrafik sich vermeiden lässt (Ausnahme sind beispielsweise Fotos). Durch die verlustfreie Vergrößerbarkeit ist dieses Grafikformat wie kein anderes für responsives Design geeignet und ist die vom W3C (World Wide Web Consortium) empfohlene Variante. Zusätzlich unterstützt es Animationen, ist über das DOM beispielsweise mit Javaskript manipulierbar und ist damit für interaktive Elemente geeignet. Vektorbilder bestehen aus Linien, Strichen und mit Farbe gefüllten Formen, welche über Koordinaten und weitere Eigenschaften definiert sind (z.B. eine Ellipse).

Einfaches Beispiel

Ellipsentitel Beschreibung 

  <svg viewBox="0 0 300 180" role="img" aria-labelledby="titleElli descElli">
  <title id="titleElli">Ellipsentitel</title>
  <desc id="descElli">Beschreibung</desc>
  <ellipse cx="100" cy="100" rx="90" ry="50" stroke="black" stroke-width="7" fill="yellow">
  </svg>
Das kann wesentlich komplexer werden - hier gleich ein Beispiel, in welchem title und desc angegeben sind, aber kein aria-labelledby.
Codepen Logo Beschreibung
<svg viewBox="0 0 138 26" stroke="#000" role="img"> <title id="titleCodepen">Codepen Logo</title> <desc id="descCodepen">Beschreibung</desc> <path d="m 1.15,8.45 11,-7.3 11,7.3 v 7.4 l -11,7.3 -11,-7.3 z m 0,0 11,7.4 11,-7.4 m 0,7.4 -11,-7.4 -11,7.4 m 11,-14.7 v 7.3 m 0,7.4 v 7.3"</path></svg>

Struktueller Aufbau 


<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>HTML5 Seite</title>
</head>
<body>
<svg xmlns="https://www.w3.org/2000/svg" ...>
<title>...</title>
<path fill="#5DD7FC" d="M0.5… />
</svg>
</body>
</html>
Möchte man Verlinkungen einfügen muss man zusätzlich die Definition von xlink durch folgenden Zusatz hinzufügen xmlns:xlink="https://www.w3.org/1999/xlink". Dann lassen sich über IDs und xlink:href="..." Links innerhalb der SVG erzeugen.

Möglichkeiten der Einbindung

Option 1: im <img>-Tag

Wird eine SVG Grafik in ein img-Tag eingebunden, so ist die Grafik wie jede Abbildung zu handhaben. Ein Alternativtext wird über das alt-Attribut hinzugefügt. Die Richtlinien aus "Grundsätzliches zu Grafiken" sind dabei zu berücksichtigen. Soll die Grafik nicht weiterverarbeitet werden (Stilanpassung, Animation, Manipulation mit Javascript) so ist diese Einbindung ausreichend. Im DOM ist sie aber nicht vorhanden und kann daher nicht weiter angepasst werden.
Aktuell ist dieser Weg aus Sicht der Barrierefreiheit der zuverlässigste. Er bietet jedoch keine Option, interaktive Elemente zu nutzen oder gezielte Anpassungen vorzunehmen.

Option 2: inline im <svg> Tag

SVG-Code kann direkt in die html-Seite geschrieben werden. Dadurch bleiben die Funktionen von SVG erhalten und es ist derzeit die beste Möglichkeit für eine nachträgliche Manipulation. Die Bildbeschreibung kann dann aber nicht in ein alt-Attribut mitgegeben werden, sondern muss über ein title-Tag (kurzer Name) und über desc-Tag die Beschreibung übergeben werden. Leider sind nicht alle Screenreader darauf ausgelegt, die beiden Elemente auszulesen, daher sollte es wie folgt umgesetzt werden: Die beiden Tags erhalten jeweils IDs
<title id="TitleID_1">Titel der SVG</title>
<desc id="DescID_1">Ausführlichere Beschreibung der Grafik.</desc>
Anschließend ist im <svg>-tag noch der Verweis hinzuzufügen, damit alle Screenreader die Information erhalten:
aria-labelledby="TitleID_1 DescID_1" ergänzend sollte, damit alle Browser eine korrekte Ausgabe ermöglichen im svg-Tag role="img" ergänzt werden.
Ein großer Vorteil dieser Einbindung ist die Option beispielsweise über einen Knopfdruck die Linienstärke erhöhen zu können, andere Farbgebungen anzulegen oder Elemente auszublenden.

weitere Optionen

Neben der Einbindung im img-Tag und der inline-Einbindung sind verschiedene andere Optionen von technischer Seite her möglich, aber nicht barrierefrei. Daher sollte die Einbindung über <object>, <iframe> oder <embed> Tags vermieden werden. Falls aus irgendeinem Grunde darauf nicht verzichtet werden kann, so muss eine Fallbackalternative mit Alternativtext ergänzend hinzugefügt werden.

Beispiele

weitere Hinweise zur SVG Konfiguration
Hilfreiches Tool für die Optimierung von SVG (v.a. Entschlackung)
zurück zur Hauptseite