Bilder und Grafiken
Arten von Bildern und Grafiken
Bilder und Grafiken können für vielfältige Zwecke genutzt werden. Ihr Alternativtext sollte zur Verwendungsart passen. Folgende Arten von Grafiken werden hierfür unterschieden:- Informationsorientierte Grafiken
- Bilder, die Informationen vermitteln und bedeutende Inhalte enthalten.
- Alternativtexte sollten wesentliche Informationen des Bildes wiedergeben.
- Diagramme:
- Es wird eine ausführliche Bildbeschreibung benötigt. Geben Sie hierfür einen Überblick, über allgemeine Informationen (Titel, Diagrammtyp, ...), beschreiben Sie die Achsen (Anordnung, Beschriftung, ...) und gehen Sie auf die Daten (Anzahl Datenreihen, Beschreibung grober Verläufe, konkrete Datenwerte, ...) ein.
- Verlinkte Grafiken
- Bilder, die eine Aktion ausführen. Sie enthalten zum Beispiel einen Link, der zu einer anderen Seite führt. Häufig werden dafür Logos oder Icons verwendet.
- Alternativtexte beschreiben die Aktion, die von dem Bild ausgeführt wird.
- Schmuckgrafiken
- Bilder, die keine Informationen vermitteln und lediglich zur Dekoration dienen, wie zum Beispiel Bilder von Farbflächen oder mit Mustern.
- Alternativtexte müssen leer gelassen werden.
- Schriftgrafiken
- Bilder von Texten. Diese werden nicht von Screenreadern vorgelesen und sollten dementsprechend vermieden werden.
- Falls sich die Verwendung nicht vermeiden lässt, sollten Alternativtexte den exakten Text wiedergeben. Beginnen Sie hierfür mit 'Schriftgrafik: '.
- Screenshots:
- Alternativtexte sollten nur wesentliche Inhalte wiedergeben.
- Gescannte Dokumente:
- Alternativtexte sollten den exakten Text wiedergeben.
- Formeln:
- Alternativtexte sollten eine ausgeschriebene Variante der Formel beinhalten. Beginnen sie beispielsweise mit 'Gleichung: '.
Informationsorientierte und verlinkte Grafiken
Folgende Kriterien stammen aus der Checkliste:- Verlinkte Grafiken oder informationsorientierte Grafiken und Bilder sind mit Alternativtexten versehen.
Alternativtexte
Informationsorientierte Grafiken
Beschreiben Sie in einem Satz mit maximal 140 Zeichen, was auf dem Bild zu sehen ist. Gehen Sie dabei neutral vor und verzichten Sie auf eigene Interpretationen. Informationen, die bereits im umliegenden Text gegeben sind, sollten nicht wiederholt werden.
Starten Sie mit 'Foto von ...' oder 'Bild eines ...'.
Verlinkte Grafiken
Alternativtexte von verlinkten Grafiken beschreiben die Aktion, die von der Grafik ausgeführt wird. Zum Beispiel 'Umfrage öffnen'. Der Link selber wird nicht angegeben.
Alternativtexte von Logos geben den vollständigen Namen der Institution an.
Auszeichnung von informationsorientierten und verlinkten Grafiken
Bilder und Grafiken in OPAL anlegen
- In der Symbolleiste des Seiteneditors das Bild-Icon auswählen.
- Die Bildquelle entweder als Freitext angeben oder ein Bild über das rechte Upload-Icon direkt hochladen.
- Alternativtext unter 'Alternativtext' eingeben und speichern.
HTML-Tags: <img>, Alternativtexte: alt-Attribut
<img src="image.jpg" alt="Description of the image">
BITV-Anforderungen:
Schmuckgrafiken
Folgende Kriterien stammen aus der Checkliste:- Schmuckgrafiken, welche keine Informationen vermitteln, werden nicht verwendet. Ansonsten besitzen sie einen leeren Alternativtext oder werden mit CSS in die Webseite integriert.
Auszeichnung von Schmuckgrafiken
Bilder und Grafiken in OPAL anlegen
- In der Symbolleiste des Seiteneditors das Bild-Icon auswählen.
- Die Bildquelle entweder als Freitext angeben oder ein Bild über das rechte Upload-Icon direkt hochladen.
- Das Häckchen unter Barrierefreiheit bei 'Bild ist dekorativ' setzen und speichern.
HTML-Tags: <img>, Alternativtexte: alt-Attribut
<img src="image.jpg" alt="">
Einbindung als SVG: Da das alt-Attribut nicht gesetzt werden kann, müssen die Inhalte über aria-hidden='true' vor Screenreadern verborgen werden.
<svg aria-hidden="true"> </svg>
Einbindung über CSS: background-image: url('')
body {background-image: url('image.gif');}