Digitale Medien

Die meisten Faktoren hinsichtlich Typografie und Farbgestaltung sind medienübergreifend gültig. In Deutschland regelt die Barrierefreie-Informationstechnik-Verordnung BITV 2.0 die Umsetzung aller öffentlich zugänglichen Webanwendungen von Behörden der Bundesverwaltung. Sie orientiert sich dabei ausdrücklich an den Web Content Accessibility Guidelines ( WCAG 2.1 ) des World Wide Web Consortiums, die den internationalen Standard für die Umsetzung barrierefreier Online-Medien bilden.

Damit Menschen mit Sehbehinderungen die Inhalte von Webangeboten vollständig erfassen können, benötigen sie neben der barrierefreien Programmierung auch eine Erläuterung von Bildinhalten, sofern diese für das Verständnis des Seiteninhalts notwendig sind. In der Web Component Library der Bundesregierung sind für Abbildungen entsprechende HTML Alt-Attribute vorgesehen.

Kategorien

Man kann Abbildungen und die daraus folgenden Anforderungen an Alternativtexte in folgende fünf Kategorien einteilen:

Dekorative Abbildungen vermitteln inhaltlich keine zusätzlichen Informationen zu den Texten einer Website. Das sind z. B. rein dekorative oder redundante Abbildungen, deren Informationsgehalt bereits vollständig durch den Kontext abgedeckt ist. Sie werden mit einem »leeren« Alternativtext versehen; dieser weist keinen Inhalt auf und wird dementsprechend vom Screenreader ignoriert.


Suchmaske mit Lupensysmbol und dem Text: Suche

Der Alternativtext zum Lupensymbol ist leer, da das Wort „Suche” ohnehin vom Screenreader vorgelesen wird.



  • Schriftgrafiken sind grafisch gestaltete Darstellungen von Text, z. B. gestaltete Schriftzüge und Logos, die nicht verlinkt sind. Hier wird sowohl die Bezeichnung als auch der Wortlaut genannt, die grafische Gestaltung sollte jedoch nicht beschrieben werden.

Bildwortmarke: Die Bundesregierung

Alternativtext: „Bildwortmarke: Die Bundesregierung“




  • Auch die Darstellung von Medien wie z. B. Broschürentitel, Plakate oder Websites gehört zu dieser Kategorie. Hier reicht es aus, lediglich die Art des Mediums und den Titel zu benennen sowie ggfs. den Wortlaut, sofern dieser nicht bereits im Fließtext enthalten ist.

Veranstaltungsplakat zum Tag der offenen Tür der Bundesregierung: Hallo Politik, am 17. und 18. August 2019

Alternativtext: „Veranstaltungsplakat zum Tag der offenen Tür der Bundesregierung: Hallo Politik, am 17. und 18. August 2019“



Funktionale Abbildungen verweisen auf eine Aktion. Es handelt sich hierbei um interaktive Elemente wie Links oder Schaltflächen. Beispiele: Druck-Icon, Suchbutton mit Lupe oder verlinkte Logos, wenn diese nur als Bild (z. B. Lupe) und nicht zusätzlich auch als Textzeile (z. B. »suchen«) eingesetzt werden. Diese erhalten einen funktionalen Alternativtext, der angibt, was geschieht, wenn die Nutzerinnen und Nutzer auf das Icon oder den Button klicken.

  • Oftmals können die Alternativtexte für funktionale Abbildungen nicht redaktionell über das CMS bearbeitet werden; in diesem Fall werden diese direkt in der Programmierung eingearbeitet.

Suche

Alternativtext: „Suche“




  • Im Falle verlinkter Logos ist die Beschreibung des Logos nicht erforderlich. Aus dem funktionalen Alternativtext sollte jedoch immer das Ziel des Links eindeutig hervorgehen.

zur Startseite: Die Bundesregierung

Alternativtext: „zur Startseite: Die Bundesregierung“



Durch diese Abbildungen werden entweder wesentliche Informationen zum Text ergänzt oder vollständig eigene Inhalte hinzugefügt.

Der Informationsgehalt wird als identifizierender bzw. beschreibender Alternativtext in einem prägnanten Ausdruck oder in einem eindeutigen Satz dargelegt.

  • Piktogramm zur eindeutigen Kennzeichnung einer Information wie das einer Nummer vorangestellte Zeichen eines Telefons oder Faxgerätes. Eine Beschreibung der grafischen Gestaltung ist nicht erforderlich. 

Telefon 030 123 45 67

Alternativtext: „Telefon 030 123 45 67“




  • Abbildung, Gebrauchsanweisung o.ä. mit einer eindeutigen und kurzen Information

Eine unzulässig verzerrte Bildwortmarke ist durchgestrichen.

Alternativtext:„Eine unzulässig verzerrte Bildwortmarke ist durchgestrichen.“




  • Einfache Diagramme: Neben einer identifizierenden Alternativtext sollte die Bezeichnung des Diagrammtyps genannt sein.

Säulendigramm mit zwei Säulen: Januar rot 40 %, Februar schwarz 80%

Alternativtext: „Säulendigramm mit zwei Säulen: Januar rot 40 %, Februar schwarz 80%“




  • Abbildung mit geringem oder bereits auf der Seite enthaltenen Informationsgehalt, die lediglich der Illustration des Textes dient.

Drei nebeneinander angeordnete Farbfelder in der Reihenfolge Schwarz, Rot, Gold.

Alternativtext: „Drei nebeneinander angeordnete Farbfelder in der Reihenfolge Schwarz, Rot, Gold.“




  • Abbildung mit zusätzlicher Information zum Text:

Vermaßungslinien begrenzen den Raum um die Bildwortmarke im Abstand eines Adler-Emblems.

Alternativtext: „Vermaßungslinien begrenzen den Raum um die Bildwortmarke im Abstand eines Adler-Emblems.“




  • Abbildungen, die Emotionen auslösen sollen: Hier steht zunächst ein kurzer identifizierende Alternativtext, die so sachlich und genau wie möglich die Bildelemente beschreibt, die den beabsichtigten Eindruck hervorrufen.

Ggf. kann auch der beabsichtige Eindruck direkt beschrieben werden. Alternativtext: „Ein Kochhemd tragende junge Frau in einer Großküche präsentiert lächelnd eine Torte, was auf erfüllende Jobs für Azubis im Handwerk hinweist.“


Ein Kochhemd tragende junge Frau in einer Großküche präsentiert lächelnd eine Torte.

Alternativtext: „Ein Kochhemd tragende junge Frau in einer Großküche präsentiert lächelnd eine Torte.“



Komplexe Abbildungen beinhalten substantielle Informationen, die nicht in einem einzigen prägnanten Ausdruck oder Satz vermittelt werden können. Oftmals werden mit Hilfe komplexer Abbildungen Beziehungen und Zusammenhänge verdeutlicht. Beispiele: Grafen, Diagramme, Organigramme, Karten, Vermaßungen etc., von denen das Verständnis des Textes abhängig ist.
Hier werden beschreibende Alternativtexte verfasst, die Inhalte und Zusammenhänge vermitteln. Werden diese bereits im Kontext der Seite erläutert, reicht ein kurzer identifizierender Alternativtext aus.


Vermaßung der typografischen Elemente auf der vorderen Umschlagseite

Alternativtext: „Vermaßung der typografischen Elemente auf der vorderen Umschlagseite“



Gegebenenfalls kann der Alternativtext zusätzlich auf eine „lange Beschreibung“ verweisen. Dafür wird ein Longdesc-Attribut verwendet: Dieses führt zu einer externen Text- oder HTML-Datei oder zu einer Stelle auf derselben Seite. Beispiel für eine solche »lange Beschreibung«

Alternativtext: „Vermaßungslinien geben die Position des Identitätsbereiches mit einem Randabstand nach oben, links und rechts von 70 % der Größe eines Adler-Emblems an. Im Identitätsbereich ist die Bildwortmarke linksbündig angeordnet, unter Berücksichtigung ihrer Schutzzone in der Größe von einem Adler-Emblem ringsherum. Die Oberkante der Headline im erweiterten Identitätsbereich beginnt horizontal eineinhalb Adler-Embleme unterhalb des Flaggenstabes und ist vertikal linksbündig mit dem Schriftzug angeordnet. Darunter steht mit dem 1 ½-fachen Zeilenabstand die Subheadline. Deren Abstand zum unteren Ende des Identitätsbereiches beträgt wiederum ein Adler-Emblem. Die maximale Textbreite entspricht dabei der Breite des Identitätsbereiches abzüglich eines Adler-Emblems. Die maximale Höhe des Identitätsbereiches ist auf die Hälfte der Formathöhe begrenzt.“

Handelt es sich nicht um Fotos, wird die Bildgattung in den Alternativtext aufgenommen. Z. B. „Organigramm“, „Tortendiagramm“, „Vermaßung“ etc.