SVG/Tutorials/Einstieg/barrierefreie SVGs

20min

leicht

Grundkenntnisse in

• HTML
• Einstieg in SVG

SVG hat gegenüber Rastergrafiken und Canvas viele Vorteile, die sie immer beliebter machen.

• Text wird als Klartext gerendert und damit von Screenreadern lesbar, bzw. von Suchmaschinen auffindbar
• SVGs können ohne Qualitätsverlust skaliert werden, weil das Bild nicht Pixel für Pixel gespeichert ist, sondern quasi als Anweisung, wie es gezeichnet wird
• inline-SVGs können mit CSS gestaltet und animiert werden.
  Dabei können auch Benutzereinstellungen wie prefers-color-scheme und prefers-reduced-motion berücksichtigt werden.

Allerdings gibt es einige Dinge, die Sie beachten müssen, damit Ihre SVGs barrierefrei zu nutzen sind.

SVG in img-Elementen

Dass zum Einbinden eines Bilds mit img-Element zwingend ein Alternativtext angegeben werden muss, ist heute selbstverständlich. Alternativ könnte eine Grafik innerhalb eines figure-Elements mit einer figcaption erläutert werden.

Da in älteren Safari-Versionen der Alternativtext bei SVGs unterdrückt wurde, wurde empfohlen, ein role-Attribut hinzuzufügen, dass das Vorlesen erzwingt. Obwohl der Bug gefixt wurde, ist es auch für Screenreader besser eine solche Rolle zuzuweisen:

Referenz auf Bild mit Alternativtext und role-Attribut

<img src="advent.svg"
     alt="Baum mit brennender Kerze"
     role="img"
>

Bei Dekorationsgrafiken kann ein aria-hidden="true" hinzugefügt werden. Damit werden sie vom Screenreader nicht weiter erwähnt.

Inline SVG

Die volle Kontrolle über visuelle Gestaltung oder Animation Ihrer Bilder erhalten Sie mit Inline-SVGs, die direkt im HTML-Markup notiert werden. So haben Sie außerdem mehr Möglichkeiten, Nutzern von Screenreadern zusätzliche Bildinformationen zur Verfügung zu stellen.

Metadaten in SVG

Neben dem schon aus HTML bekannten title-Element kann man Definitionsabschnitte, Gruppierungen und Objekte mit einem desc-Element als erstem Kindelement mit einer Beschreibung (description) erläutern.

zugängliche Daten in SVG

<svg role="img" aria-labelledby="my-title" aria-describedby="my-desc"> <title id="my-title">Beispiele für lineare Farbverläufe</title> <defs> <desc id="my-desc">Hier werden die Farbverläufe definiert und über die id dann aufgerufen</desc> <linearGradient id="verlauf1" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3337599" /> </linearGradient> </defs> <text id="eins" x="10" y="10" fill="url(#verlauf1)"> von Screenreadern lesbarer Text </text> </svg>

Das SVG-Element erhält erneut ein role-Attribut, um es als Grafik erkennbar zu machen. Der title und die Beschreibung sollten eigentlich direkt dem Dokument zugeordnet werden können. Da dies noch nicht von allen User-Agents unterstützt wird, werden sie über die aria-Attribute aria-labelledby und aria-describedby über eine eindeutige ID mit dem SVG-Fragment verknüpft.

Diagramme

Häufig sind SVGs eben keine Bilder, sondern Infografiken und Diagramme. Doug Schepers zeigt in seinem Youtube-Kanal, wie ein solches Diagramm „vorgelesen“ und mehrere Werte miteinander verglichen werden:

• YouTube: Accessible SVG Data Visualization

Hauptartikel: Datenvisualisierung

Benutzerwünsche respektieren

Nicht nur die Bildschirmabmessungen - auch die Vorlieben der Nutzer in Bezug auf Farbschemata, Kontraste und Animationen unterscheiden sich. Dies kann direkt im OS oder in den Browsereinstellungen festgelegt und über Medienabfragen ermittelt werden:

Dark Mode

Mittlerweile wird das Wechseln zwischen hellem Hintergrund und so genanntem Dark Mode von allen Browsern unterstützt. Selbst in externen SVGs ist Dark Mode mit einer Medienabfrage im Stylesheet der Grafik möglich.

externes SVG mit Light und Dark Mode

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      svg {
        background-color: white;
        color-scheme:light dark;
      }
      @media (prefers-color-scheme:dark) {
        svg {
          background-color: black;
        }
      }
    </style>
  </defs>
</svg>

Bilder, die mit img oder object referenziert werden, lesen nun die Benutzereinstellungen aus und übernehmen das gewünschte Farbschema. Allerdings funktioniert das nur im Firefox ohne Probleme; Chrome lädt nur einmal und schaltet nach dem Laden nicht mehr um; Safari unterstützt es noch nicht.

Überhaupt kein Problem ist dies mit Inline-SVGs, die genauso wie das HTML mit CSS und custom properties formatiert werden können:

Webseite mit SVGs mit Light und Dark Mode ansehen …

:root{
	color-scheme: light dark;
  --background-color: #fff;
  --blue: #306f91;
  --green: #8db243;
  --orange: #df6c20;
  --red: #c32e04;
  --yellow: #dfac20;
  --lightblue: #e6f2f7;
  --lightgreen: #ebf5d7; 
  --lightorange: #ffede0;
  --lightred: #ffebe6;
  --lightyellow: #fdfcf3;
  --font-color: #4c4a4a;
  --link-color: rgb(0 102 204);		
  background-color: var(--background-color);
  color: var(--font-color);
}
@media (prefers-color-scheme: dark) {
	:root { 
  	--background-color: #000033;
  	--font-color: white;
  	--link-color: skyblue;			
	}
}

Wie in der Info-Box erklärt, können Sie mit [F12] Ihre Entwicklerwerkzeuge öffnen und zwischen hellem und dunklem Modus umschalten.

Neben Hintergrund-, Text- und Linkfarbe wird auch das Inline-SVG verändert: Die Pastell-Töne der SELFHTML-Farbpalette wirken im Dunklen Modus zu grell - stattdessen werden die Volltöne verwendet.

Die Info-Box bleibt gleich.

Oben rechts wird der jeweils akutelle Modus gezeigt, indem zwei span-Element von display:none auf inline gestellt werden.

Icons in Textfarbe

Analog zu der Trennung von Inhalt, Präsentation und Verhalten in HTML und CSS sollte SVG-Markup im Idealfall nur die Geometrie umfassen - Farben gehören zur Präsentation und damit ins CSS der Grafik oder noch besser: der Webseite.

SVG in Textfarbe ansehen …

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140">
  <circle stroke="currentColor" stroke-width="10" cx="70" cy="70" r="60"/>
  <circle cx="69" cy="39" r="11" fill="currentColor" />
  <path fill="currentcolor"	
        d="M80 100c0 3 1.6 3.9 4 4l5 0.1v5h-38v-5l5-0.12.4-0.1 4-1 4-4v-31c0-4.4-6-4-9-3.9v-5l29-1"/>
</svg>

Die Farbangaben der stroke- und fill-Attribute erhalten den Wert currentColor. Damit wird die jeweils aktuelle Textfarbe der CSS-color-Eigenschaft übernommen und das Icon passt sich automatisch an die Farbschemata der Webseite an.

Hauptartikel: SVG/Tutorials/Icons

SVG-Favicons

Mittlerweile unterstützen alle Browser bis auf Safari Favicons im SVG-Format.

Referenzieren eines SVG-Favicons ansehen …

<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

Auch dort ist es möglich, mit prefers-color-scheme das gewünschte Farbschema abzufragen und die Gestaltung entsprechend zu ändern.

Beachten Sie: Das SELF-Logo hat in der Webseite selbst nun einen weißen Hintergrund und wirkt im dunklen Modus evtl. etwas grell. Das verlinkte SVG-Favicon hat dagegen nur gelb und blau; das "S" selbst ist transparent und sieht im dunklen Modus zu blass aus.

unterschiedliche Farben bei SVG-Favicons

<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      fill: green;
    }
    @media (prefers-color-scheme: dark) {
      rect {
        fill: red;
      }
    }
  </style>
  <rect width="50" height="50" rx="5"/>
</svg>

Animationen

Einer der großen Vorteile von SVG war die Möglichkeit einzelne Elemente mit SMIL zu animieren. Stand dort früher eher die fehlende Unterstützung durch IE und die frühen Versionen des Edge im Vordergrund, ist heute das Bewusstsein dafür gestiegen, dass Nutzer selbst entscheiden sollten, ob und wie viel Animation und Bewegung sie auf dem Bildschirm haben wollen.

Dabei geht es nicht nur um das worst-case-scenario eines epileptischen Anfalls durch aufblitzendes Licht, sondern oft nur um die Unterdrückung unerwünschter Ablenkung.

Eliah Manor zeigt, wie man SMIL-Animation mit viel JavaScript pausieren kann, allerdings gibt es eine zeitgemäße Möglichkeit CSS-Animationen nur dann auszuführen, wenn der Nutzer dies auch wünscht:

Abfrage mit prefers-reduced-motion ansehen …

@media screen and (prefers-reduced-motion: reduce) {
   .snowfall,
   .flicker {
       animation: none;
   }
   .snow {
       display: none;
   }
}

Die Flamme besteht aus mehreren Ellipsen, die übereinander liegen und von der Animation gestreckt und gestaucht werden.

• SVG mit CSS animieren
• Einstieg in SVG
  (Übersicht)
• SVG in responsiven Webseiten