Dateiformate
Boot mit Spiegelung im Wasser

Bilder digital barrierefrei im Web
[Materialsammlung]

Bedeutung von Bildern

Begriffe und Bezeichnungen

Es geht fast ausschließlich um das, was mit dem img-Element versehen ist: Fotos, Diagramme, Portraits, Screenshots und Ähnliches. Kurz gesagt betreibe ich in diesem Artikel also Überlegungen zu Bildern.

Nun wird der englische Ausdruck Image von den gängigsten Screen Readern JAWS und NVDA mit Grafik übersetzt. Diese Übersetzung ist zwar etwas irreführend. Die Leute haben sich aber daran gewöhnt, vielleicht auch weil mit der Taste G die nächste Grafik, also das nächste Bild, angesprungen werden kann.

Ich verwende in diesem Artikel den Ausdruck Bild als Überbegriff und den Ausdruck Grafik nur in Kontexten, in denen es eher um Diagramme, Icons und Ähnliches geht. Fotos oder Gemälde hingegen sind in meiner Ausdrucksweise keine Grafiken.

Wahrnehmung durch Blinde

Fotos und Grafiken dienen auf Webseiten zur Dokumentation, Illustration oder als Blickfang. Damit deren Inhalt oder Funktion im Kontext einer Webseite auch für sehbehinderte Menschen wahrnehmbar sind, bedürfen Bilder technischer und redaktioneller Maßnahmen.

Textuelle Alternativen können knappe Alternativtexte, detaillierte Beschreibungen oder Datentabellen sein. Was auf dem Bild zu sehen ist und die Bedeutung des Bildes im Kontext wird auf diese Weise auch für Screen Reader wahrnehmbar.

Bilder unterstützen das Verständnis

Ein Bild sagt mehr als tausend Worte.

In einer Grafik oder einem Diagramm können komplexe Zusammenhänge vereinfachend dargestellt werden. Obwohl zum Verständnis auch eine textuelle Alternative vorhanden sein muss, sollte das Potential der Veranschaulichung zum besseren Verständnis natürlich ausgenützt werden.

Bilder können weiters eine Stimmung ausdrücken oder Emotionen auslösen. Wenn diese Effekte erwünscht sind, ist der Einsatz von Bildern natürlich auch aus der Perspektive der Barrierefreiheit zulässig.

Icons oder Symbolgrafiken erlauben eine spontane Wahrnehmung von Informationen oder verfügbaren Funktionalitäten. Sofern sie bekannt sind, erleichtern sie die visuelle Wahrnehmung und das Verständnis, insbesondere auch für Menschen mit Lese- oder Lernbeeinträchtigungen und das über Sprachgrenzen hinweg.

Verknüpfungen zur analogen Welt

Wenn ich ein Gebäude schon einmal auf einer Webseite gesehen habe, finde ich es in der realen Welt wohl einfacher. Gesichter, von denen ich schon Fotos gefunden habe, werde ich bei einer Veranstaltung vielleicht wieder erkennen.

Dies gilt natürlich nicht, wenn ich völlig blind bin. Doch selbst als Sehbehinderter kann ich von Fotos profitieren, insbesondere wenn sie etwa durch die Auswahl des Bildausschnitts optimiert sind.

Alternativtexte für inhaltsvolle Bilder

In diesem Abschnitt geht es rein um Bilder und Grafiken, die mit inhaltlicher Bedeutung auf einer Webseite erscheinen. Rein dekorative Bilder oder Bilder, die gleichzeitig als Link fungieren bedürfen einer gesonderten Behandlung. Ebenso bedürfen Bilder mit sichtbaren Bildunterschriften weiterer Überlegungen.

Bedeutung von technischen Alternativtexten

Als Alternativtext wird ein redaktionell erstellter Text bezeichnet, der technisch für einen Screen Reader Inhalt oder Funktionalität eines Bildes wiedergibt. Im Gegensatz zu einer Bildunterschrift ist dieser Text also am Bildschirm normalerweise nicht sichtbar.

Alternativtexte sollen vor allem blinden Menschen helfen, selbständig ein Bild im Kontext zu verstehen. Sie werden jedoch auch angezeigt und benötigt, wenn im Browser die Darstellung von Bildern deaktiviert ist.

Darüber hinaus können Alternativtexte auch von Suchmaschinen wahrgenommen werden und dienen daher auch zur Suchmaschinenoptimierung (SEO).

Technische Realisierung von Alternativtexten

Berta von Suttner

In HTML wird der Alternativtext für ein img-Element im alt-Attribut etwa folgendermaßen eingebettet:


<img
  src="images/bertha_v_suttner.jpg"
  alt="Bertha von Suttner"
/>

Ein Screen Reader kann den Elementtyp img technisch erkennen und gibt ihn beim Vorlesen beispielsweise als Grafik an.

Das alt-Attribut muss unbedingt vorhanden sein, wenn dessen Wert bei dekorativen Bildern auch leer sein kann. Screen Reader versuchen sonst, aus allfällig vorhandenen title-Attributen oder gar dem Bildnamen den Inhalt des Bildes anzugeben.

Sie werden den Alternativtext im nebenstehenden Bild auf dem Bildschirm nicht finden, außer Sie haben im Browser die Darstellung von Bildern deaktiviert. Eingeblendet wird im Browser gewöhnlich nur der Wert des title-Attributs durch Überstreichen mit der Maus.

Formulierung des Alternativtexts (Texting)

Im Alternativtext knapp und präzise den Inhalt des Bildes wiederzugeben, ist eine Herausforderung an die Redaktion. Häufig werden zu lange Formulierungen überlegt und unnötige Detailbeschreibungen vorgenommen. Gänzlich ungeeignet sind Zusatzinformationen, die nicht dem Inhalt des Bildes entsprechen, etwa Angaben zum Copyright.

Der Alternativtext wird kaum einmal aus einem ganzen Satz bestehen, muss nicht einmal grammatikalisch korrekt sein, etwa wenn Artikel entfallen. (Landesrätin Palfrader eröffnet Kindergarten)

Ich persönlich stehe auf der Seite derer, die einen minimalistischen Ansatz verfolgen. Der Alternativtext muss auf das Wesentliche reduziert werden. Jegliche Detailinformation muss im Kontext textuell dargestellt werden, sofern sie von Relevanz ist.

Folgende Fragestellungen können bei der Formulierung überdacht werden:

Wappen von Breitenwang

Was ist auf dem Bild im Wesentlichen zu sehen?

Handelt es sich um eine Person, ein Tier oder einen Gegenstand oder um ein Ereignis?

Wenn diese Frage geklärt ist, können die nun folgenden angegangen werden.

Wer ist auf dem Bild zu sehen?

In der Regel genügt es bei Einzelpersonen oder einer kleinen Gruppe die Namen der Personen anzuführen. Selten ist es ergänzend erforderlich, welche Haarfarbe die Personen haben oder ob sie gerade lächeln.

Auch Titel oder Funktion einer Person können entfallen, wenn diese als bekannt vorauszusetzen sind. Sollten diese im Kontext angeführt werden, sind sie im Alterativtext nicht unbedingt nötig. Sollten Titel oder Funktion im Kontext nicht angeführt werden, fehlen diese Zusatzinformationen allen, die nicht mit einem Screen Reader arbeiten!

Welcher Gegenstand oder welches Lebewesen ist auf dem Bild zu sehen?

Manchmal wird es genügen, den Gegenstand oder das Tier im Alternativtext anzuführen, die auf dem Bild zu sehen sind. (Katze, Autowrack, Landesmuseum,  …) Entscheidend ist der Kontext. Auf einer Seite zu den Innsbrucker Sehenswürdigkeiten wird es genügen, das Foto des Landesmuseums mit dem Alternativtext Landesmuseum zu versehen.

Gelegentlich wird es erforderlich sein, nähere Erläuterungen je nach Kontext im Alternativtext zu ergänzen. (Katze im Adventkranz, Autowrack im Inn, Landesmuseum vor der Renovierung, …)

Welches Ereignis ist auf dem Bild zu sehen?

Handelt es sich bei einem Foto nicht einfach um eine Person oder einen Gegenstand, können wir nach dem Wesen des Ereignisses fragen, das abgebildet ist. War es eine Eröffnung, eine Hochzeit oder eine Protestdemonstration?

Derartige Ereignisse können natürlich einer kurzen Detailbeschreibung im Alternativtext bedürfen: Eröffnung des renovierten Landesmuseums, Hochzeit von Prinz Ralph und Prinzessin Jessica, Demonstration gegen Autobahnbau, … Auf ausführlichere Beschreibungen würde ich in der Regel verzichten und diese wenn nötig allen Menschen im sichtbaren Text präsentieren.

Ist der spezielle Bildtyp von Relevanz?

Handelt es sich bei der Abbildung um ein Wappen, eine Collage, ein Gemälde, eine Karikatur oder Ähnliches, sollte dies im Alternativtext erwähnt werden.

Der spezielle Bildtyp wird in der Regel der Angabe des Bildinhalts vorangestellt (Wappen von Breitenwang, Screenshot Dialogfeld Datei öffnen).

Ist die Perspektive von Relevanz?

Die Perspektive selbst kann zur Beschreibung des Bildes erforderlich sein: Luftbild von Innsbruck, Profilansicht von Julius Caesar, Überschwemmungen aus der Vogelperspektive, …

Die Angabe der Perspektive kann im Kontext, etwa einer Wanderroute, von Relevanz sein: Blick zurück auf die Serles, …

Könnte ein Inhalt oder Aspekt des Bildes zur Verständigung zwischen blinden Menschen und deren Assistenzpersonen beitragen?

Eine illustrierte Wegbeschreibung enthält das Foto eines alten Gebäudes, das früher einmal das Rathaus war. Der Alternativtexte sollte Altes Rathaus lauten und nicht bloß Altes Gebäude.

Dass es sich um das alte Rathaus handelt, ist auf dem Foto zwar nicht zu sehen, allerdings könnte eine blinde Person Einheimische nach dem Weg zum alten Rathaus fragen. Optimalerweise wird eine solche Information natürlich im Kontext auch für Sehende bereitgestellt.

Wiederholung semantischer Angaben vermeiden

Screen Reader können technisch ein Bild oder einen Link als solche erkennen. Sie geben diese Elementtypen auch automatisch bei der Nutzung bekannt. Die entsprechenden semantischen Informationen müssen daher nicht in den Alternativtext aufgenommen werden, im Gegenteil, sie schaden der Kürze und Prägnanz der Information.

In folgenden Beispielen für Alternativtexte habe ich unnötigen Ballast an Information in eckige Klammern gesetzt und durchgestrichen:

Abkürzungen vermeiden

Screen Reader werden meist in Kombination mit einer Sprachausgabe verwendet. Abgesehen davon, dass Abkürzungen nicht allen bekannt sein werden, sind sie unter Verwendung einer Sprachausgabe vielfach gänzlich unverständlich. Sehen wir uns etwa folgendes Beispiel an:

alt="LRin Gabriele Fischer"

So hört sich das mit einer Sprachausgabe an:

Es ist daher fein, wenn Abkürzungen ausgeschrieben werden:

alt="Landesrätin Gabriele Fischer"

So hört sich der Titel ausgeschrieben nun an:

Ausnahme: Prüfungsbilder

Wenn ein Bild zu Test- oder Übungszwecken dient, muss eine textuelle Alternative zum Bildinhalt unter Umständen entfallen. Auf die Prüfungsfrage, was auf einem Bild zu erkennen ist, kann die Antwort nicht in der Bildunterschrift stehen.

Der Alternativtext könnte in diesem Fall etwa Prüfungsbeispiel lauten.

Abbildungen von Text

Bedeutung von Abbildungen von Text

Als Abbildungen von Text werden Grafiken bezeichnet, auf denen ein Text zu lesen ist. Üblich ist dies gelegentlich bei Logos, Preisauszeichnungen und dergleichen, um besondere Schriftzüge oder Farben darzustellen. Sinnvoll sind Abbildungen von Text darüber hinaus zur Abbildung von Handschriften oder speziellen Schriftarten, für die keine technischen Fonts verfügbar sind.

Die Problematik solcher Textgrafiken besteht darin, dass der Text für einen Screen Reader nicht unmittelbar zugänglich ist. Für eine Darstellung auf der Braillezeile oder die Wiedergabe mittels Sprachausgabe sind textuelle Informationen Voraussetzung. Selbst wenn bei der Nutzung eine Texterkennung für Bildschirminhalte zur Verfügung steht, liefert diese lediglich fehlerbehaftete Texte und das auch nur mit zusätzlichem Aufwand.

Leider finden sich immer wieder auch Texte, die unnötigerweise lediglich auf einer Grafik abgebildet sind. Ich habe als solche schon Veranstaltungshinweise, Datentabellen und sogar Stellenausschreibungen gefunden. Diese sind gelegentlich auf Webseiten zu finden. Besonders anfällig scheinen mir jedoch E-Mails und Newsletter, in denen unbedacht einfach Screenshots oder eingescannte Inhalte verwendet werden.

Technische Herangehensweisen für Textgrafiken

nur € 19,99

Zu allererst sollte überlegt werden, ob der Text tatsächlich in einem Bild dargestellt werden muss. Wenn nicht außerordentliche Anforderungen an die Schriftgestaltung vorliegen, kann der Inhalt einer Textgrafik schlicht in textueller Form angeboten werden. Für Wünsche zur visuellen Gestaltung kann in der Regel auf die geläufigsten CSS-Anweisungen zurückgegriffen werden.

Besteht der Text auf dem Bild aus wenigen Worten oder nur aus einem kurzen Satz, ist es zulässig, ihn im alt-Attribut wiederzugeben. Einen objektiven Standard für die maximale Länge eines Alternativtexts habe ich leider nicht gefunden.

Sollte der dargestellte Text auf einer Grafik über Varianten von Semantik verfügen (Überschriften, Listen oder Tabellen), kann der Text nicht in einen Alternativtext verpackt werden. Eine textuelle Alternative mit der entsprechenden Semantik muss ergänzend verfügbar sein.

Sollte der Text Handschrift oder schwer lesbare Schriftarten enthalten, empfiehlt es sich ohnedies, den Text auch außerhalb der Grafik in einer leserlichen Schriftart für alle anzubieten. In diesem Fall kann der Wert des alt-Attributs unter Umständen aus Handschrift bestehen oder leer sein.

Logos

Ist der Schriftzug der Firma oder Einrichtung auf dem Logo zu lesen, genügt es in der Regel, die Bezeichnung im alt-Attribut wiederzugeben. Eine Beschreibung allfällig vorhandener Icons oder Symbole kann ergänzend in einer Detailbeschreibung des Logos erfolgen.

Wenn sich auf dem Logo kein Schriftzug mit der Bezeichnung der Firma oder Einrichtung befindet, kann die Bezeichnung ergänzend in einem title-Attribut eingefügt werden. Dies wäre eine für einige hilfreiche, jedoch nicht für alle hinreichende Intervention. Wer eine Maus nicht über das Bild bewegen kann, hat keinen Zugriff auf den Inhalt des title-Attributs.

Befindet sich das Logo im Kopfbereich (banner) einer Seite, muss im alt-Attribut auch nicht dieser Grafiktyp angegeben werden. Ein Logo im Kopfbereich einer Seite ist gebräuchlich und kann als bekannt vorausgesetzt werden.

alt="Logo Zweiter Blick"

Handelt es sich beim Logo wie oft um einen Link zur Startseite, wird die Funktion der Linkgrafik angegeben

alt="Startseite".

Rein dekorative Abbildung von Text

In Einzelfällen kann Text, der auf einem Bild erscheint, auch rein dekorativ sein. Denken wir etwa an das Deckblatt eines Wörterbuchs, auf dem einzelne Wörter dargestellt werden, die ohne Informationsverlust durch andere Wörter ersetzt werden könnten.

In solchen Fällen darf der abgebildete Text nicht im Alternativtext wiedergegeben werden. Das alt-Attribut könnte als Wert stattdessen beispielsweise Deckblatt Englisch-Deutsch Wörterbuch erhalten.

Schiff mit Spiegelung im Wasser

Schiff mit Spiegelung im Wasser

Beschriftete Bilder

Bedeutung von beschrifteten Bildern

Mit beschrifteten Bildern meine ich solche, zu denen ein kurzer Text sichtbar hinzugefügt ist. Üblicherweise befindet sich der Text direkt unterhalb des Bildes.

Die Beschriftung erfolgt technisch als tatsächlicher Text und nicht als Text innerhalb einer Pixelgrafik (Abbildung von Text). Als solcher ist er auch für Screen Reader unmittelbar zugänglich.

Die Beschriftung kann das Bild unmittelbar beschreiben oder auch kommentieren. Oft ist das Bild in letzterem Fall nur die Illustration zum Kommentar. Je nachdem muss der Alternativtext zum Bild technisch unterschiedlich realisiert werden.

Kurzbeschreibung als Bildbeschriftung

Es gibt viele Gründe, die Beschreibung eines Bildes nicht allein in ein alt-Attribut zu verpacken, sondern auch sichtbar als Bildunterschrift. Oder würden Sie im folgenden Beispiel erkennen, dass es sich um ein Foto aus dem Jahr 1903 von Berta von Suttner handelt?

Anmerkung für Screen Reader: In folgendem Bild wurde die Beschriftung nicht für Screen Reader versteckt, um alle relevanten Elemente wahrnehmbar zu lassen. Den vorgeschlagenen Code finden Sie samt Erläuterungen nach dem Bild.

Berta von Suttner 1903

Berta von Suttner (1903).

Code für beschreibende Beschriftungen

Ich schlage folgenden Code für dieses Bild mit beschreibender Beschriftung als Best Practise vor:


<img
  alt="Berta von Suttner 1903"
  src="images/Suttner_1903.png"
/>
<p
  aria-hidden="true"
> 
  Berta von Suttner (1903).
</p>

Anmerkungen zum Code

  • Das alt-Attribut im img-Element beschreibt knapp das Bild. Auf diese Weise kann ein Screen Reader das Vorhandensein eines Bildes und dessen Inhalt wiedergeben.
  • Die Beschreibung wird inhaltlich in der Bildunterschrift wiederholt.
    Um diese Wiederholung für Screen Reader zu vermeiden, wird das aria-hidden-Attribut eingesetzt.
    Das Bild selbst mittels alt=" " zu verbergen, würde das Vorhandensein eines Bildes für Screen Reader gänzlich verbergen. Die Bildbeschriftung bliebe daher als solche nicht mehr verständlich.
  • Auf ein title-Attribut kann verzichtet werden, nachdem der Inhalt ohnedies unter dem Bild sichtbar beschrieben wird.

Kurzkommentar als Bildbeschriftung

Der Inhalt der Beschriftung entspricht vielfach nicht dem Inhalt, der auf dem Bild dargestellt ist. Er kann kommentierend eine knappe Zusatzinformation enthalten oder einen launigen Kurzkommentar auf der Online Ausgabe einer Zeitung.

Für sehbehinderte und andere Menschen muss daher der Inhalt des Bildes selbst in einem alt-Attribut angegeben werden. Die Formulierung des Alternativtextes kann dabei mit der kommentierenden Beschriftung korrelieren. Ich schlage folgende technische Realisierung vor:

Berta von Suttner

Die angehende Friedensnobelpreisträgerin im Jahr 1903.

Beschreibung des Beispiels

Auf dem Foto ist Berta von Suttner abgelichtet, die im Jahr 1905 den Friedensnobelpreis erhielt. Was auf dem Bild zu sehen ist, entspricht also nicht der Bildunterschrift und muss daher in einem alt-Attribut kurz erklärt werden.

Code des Beispiels

Ein Code für dieses Bild mit Beschriftung kann folgendermaßen aussehen:


<img
  alt="Berta von Suttner"
  src="images/Suttner_1903.png"
  title="Berta von Suttner"
/>
<p>
  Die angehende Friedensnobelpreisträgerin im Jahr 1903.
</p>

Anmerkungen zum Code

  • Das alt-Attribut im img-Element beschreibt knapp das Bild.
  • Im title-Attribut kann die Beschreibung ergänzend für Menschen bereitgestellt werden, die motorisch in der Lage sind, eine Maus über das Bild zu führen. Für alle anderen muss eine alternative Bildbeschreibung visuell verfügbar sein (Bildunterschrift, Bildkontext, …).
  • Im Beispiel wird der Kommentar in einem p-Element verpackt. Dieses Element ist hinreichend, aber nicht unbedingt notwendig für die Darstellung des Kommentars. Andere HTML-Elemente wären denkbar.

Verfügt ein Bild über eine verlinkte Detailbeschreibung sollte dies im unmittelbaren Kontext des Bildes wahrnehmbar sein.

Der eleganteste Weg besteht darin, das Bild gleich in den Link mit der Beschriftung einzubetten. Auf diese Weise vergrößert sich die Schaltfläche des Links und Bild und Link werden sauber in ein Element gruppiert. Die grafische Anordnung wird mittels CSS-Anweisungen realisiert.


<a href="wappen_desc.html">
  <img
    alt="Wappen von Breitenwang"
    src="images/wappen.png"
  />
  <span class="underImg">Detailbeschreibung des Wappens</span>
</a>

Weitere Zugänge zu Bildbeschriftungen finden sich im Abschnitt ↓ Detailbeschreibungen für Grafiken.

Rein dekorative Bilder

Bedeutung rein dekorativer Bilder

Auf vielen Webseiten werden einige Bilder lediglich zur Behübschung eingebaut ohne dass diese Bilder zum Verständnis des Inhalts von Relevanz sind. Gelegentlich werden Bilder auch noch eingesetzt, um ein erwünschtes Layout zu realisieren. Solche Beispiele stehen exemplarisch für rein dekorative Bilder.

Wer beim Surfen auf einen Screen Reader angewiesen ist, möchte soweit wie möglich von der Information über dekorativen Ballast verschont werden. Alle Informationen werden vom Screen Reader rein textuell und linear wiedergegeben. Jegliche mögliche Reduktion der Textflut ist daher willkommen.

Die meisten blinden Menschen sind froh, wenn sich die Informationen durch den Screen Reader so knapp wie möglich gestalten und verzichten daher gerne auf Alternativtexte für überwiegend dekorative Bilder. Andere wiederum möchten in jedem Fall einen knappen Alternativtext erhalten, etwa um Assistenzpersonen darauf hinweisen zu können. Die jeweilige Einstufung als rein dekorativ / relevant für blinde Menschen kann daher eine subjektive Komponente aufweisen oder im Hinblick auf spezielle Inhalte variieren.

Wenn das Bild vorhandene Texte illustriert, kann es hingegen nicht unbedingt als rein dekorativ eingestuft werden.

Wann ist ein Bild rein dekorativ?

Rein dekorative Bilder dienen lediglich ästhetischen Überlegungen und enthalten keinerlei Information oder interaktive Funktionalität. Klingt klar, verursacht jedoch Spielräume in der Einschätzung.

Erarbeiten blinde Menschen mit sehender Assistenz eine Webseite, kann allein das Vorhandensein eines Bildes als Orientierungspunkt schon relevant sein: Springe zur nächsten Grafik! Darunter findest du gleich das Zitat von Wittgenstein. Diese Anweisung führt die blinde Person nicht zum Ziel, wenn die Grafik technisch als rein dekorativ gekennzeichnet ist.

Vorsichtige Einstufung als rein dekorativ

Folgende Merkmale können für die Einstufung eines Bildes als rein dekorativ herangezogen werden:

Design für Bereiche
Dient eine Grafik lediglich zum Umranden, Einrücken oder Abgrenzen eines Bereichs, ist sie in jedem Fall als rein dekorativ anzusehen.
Die folgende Grafik enthält beispielsweise lediglich eine horizontale Linie mit Blümchen zum Abgrenzen vom nächsten Listenelement:
Trennstrich aus Sonnenblumen
Design für Steuerelemente
Bilder werden gelegentlich ergänzend zu Beschriftungen von Links oder Formularkomponenten eingesetzt. Ist die textuelle Beschriftung des Steuerelements aussagekräftig, muss die Grafik unter folgenden Umständen als dekorativ eingestuft werden:
  1. Die Grafik dient lediglich zur Erweiterung der Schaltfläche.
  2. Die Grafik dient ohne Zusatzinformation zur Dekoration oder visuellen Beschreibung der Beschriftung. Dazu zählt etwa auch die Verwendung von Zusatzicons oder Symbolen im Kontext von einfacher Sprache.
  3. Ein visueller Indikator zur Kennzeichnung des Zustandes wird parallel durch technische Anweisungen gekennzeichnet (aria-current="true", …).

WAI Tutoial | Decorative Images

Großzügige Einstufung als rein dekorativ

Eine weite Auslegung für die Einstufung als rein dekorativ empfiehlt als Faustregel die Frage:

Welchen Text würde ich einsetzen, wenn ich das Bild nicht verwenden könnte? Fällt Ihnen nach gründlicher Überlegung kein Text ein, dürfte es sich um ein rein dekoratives Bild handeln.

Wenn ich persönlich diese Auslegung auch bevorzugen würde, entspricht sie nicht den einschlägigen Empfehlungen. Ich selbst kann mit meinem Sehpotential noch das Vorhandensein eines Bildes und dessen Inhalt durch Vergrößerung wahrnehmen. Blinde Menschen hingegen können das nicht und könnten sich trotzdem für beides interessieren.

Code für dekorative Bilder

Leeres alt-Attribut

Die Aufgabe bei rein dekorativen Bildern besteht darin, das Bild gänzlich für Screen Reader zu verbergen. Dies gelingt, indem für das ALT-Attribut ein leerer Wert vergeben wird. Der Code sieht also zum Beispiel folgendermaßen aus:


<img
  src="images/smiley.png"
  alt=" "
/>

aria-hidden-Attribut

Natürlich kann das img-Element wie jedes andere auch mittels aria-hidden für assistierende Technologien verborgen werden. Ein gänzlich fehlendes alt-Attribut könnte jedoch bei einzelnen Validationstools zu unbegründeten Fehlermeldungen führen.


<img
  src="images/smiley.png"
  aria-hidden="true"
/>

Verbergen in HTML5

In [W3C] HTML5.3 sollte die Kurzschreibweise alt genügen. Allerdings wird diese Technik bei meinem Test unter Firefox 71.0 und JAWS 2019 noch nicht unterstützt. 


<img
  src="images/smiley.png"
  alt
/>

Sie können die Unterstützung in Ihrer aktuellen Arbeitsumgebung an Hand folgenden Bildes überprüfen. Falls vom Screen Reader eine Grafik mit dem Alternativtext Testgrafik angezeigt wird, genügt es für Ihre Arbeitsumgebung nicht, schlicht alt in den Code zu Schreiben

Prüfen von HTML5 alt.

Empfehlungen zu dekorativen Bildern

Wenn visuelle Effekte nicht durch Grafiken, sondern durch CSS realisiert werden, erhält eine Webseite eine sauberere Semantik und Struktur.

Reine Dekoration
Glossar mit Definition des W3C
[W3C] Decorative Images
Web Accessibility Tutorial der WAI mit Beispielen für dekorative Bilder

Grafiklinks und Icon-Buttons

Bedeutung von Grafiklinks und grafischen Schaltern (Icons)

Grafiken werden auch als interaktive Elemente verwendet. Die Bedeutung eines Schalters kann vielfach mittels Icons schneller erfasst und platzsparender realisiert werden als mit Beschriftungen. Bilder und Symbolgrafiken haben den Vorteil, dass sie kein Sprachverständnis voraussetzen. Aus diesen Gründen haben sie eine Berechtigung im digitalen Design, auch im Interesse der Barrierefreiheit.

Voraussetzung ist natürlich, dass die Bedeutung eines Icons bekannt oder intuitiv verständlich ist. Wer weiß schon, dass ein Männchen mit ausgestreckten Armen für Barrierefreiheit steht?

Jedenfalls müssen visuelle Elemente mit einer interaktiven Rolle eine textuelle Alternative erhalten. Dabei muss ihre Funktion in den Blickpunkt genommen werden und nicht das, was abgebildet ist.

Formulierung des Alternativtextes für interaktive Grafiken

Bedeutung der Beschriftung von interaktiven Grafiken

Screen Reader geben relevante Informationen über die Rolle eines Elements wieder, etwa Überschrift, Link oder Schalter. Der Wert, also der Text des Elements richtet sich entsprechend nach der jeweiligen Rolle des Elements. Besteht ein Link oder ein Formularelement nur aus einer Grafik, müssen daher Zielrichtung oder Funktion technisch im Wert beschrieben werden.

Ein Link zur Startseite, der mit dem üblichen Icon dargestellt wird, erhält nicht die Beschreibung Häuschen, sondern Startseite. Das Icon für einen Suchschalter erhält nicht die Beschreibung Lupe, sondern Suchen.

Alternativtext für Grafiklinks

Der Alternativtext stellt für ein Grafiklink den textuellen Wert des Elements dar und muss daher kurz und prägnant den Inhalt des Linkziels wiedergeben.

  1. Führt der Link zu einer Webseite, dürfte der Alternativtext inhaltlich dem Seitentitel der Zielseite entsprechen.
  2. Führt der Link zu einem Abschnitt innerhalb einer Seite, gilt der Blick der entsprechenden Überschrift für den Abschnitt auf der Zielseite.

Vorausgesetzt muss natürlich werden, dass Seitentitel oder Überschrift den Inhalt tatsächlich aussagekräftig zusammenfassen.

Beispiele für Alternativtexte von Grafiklinks
Thema Kontext Alternativtext
Logo im Kopfbereich Der Link führt zur Startseite des Webauftritts. Startseite
Angebotsliste Webshop mit verlinkten Produktbildern, etwa einer Bio vom Hof Milch. Bio vom Hof Milch
Netzwerkpartner oder Sponsorenliste Sammlung von verlinkten Logos führt jeweils zu einer externen Webseite, etwa der Kulturabteilung des Landes Tirol. Auf dem Bild ist Das Wappen Tirols mit dem Schriftzug Tirol – Unser Land zu sehen. Land Tirol Kulturabteilung

Alternativtexte für Icons

Lupe als Icon für Suchschalter

Besteht ein Schalter lediglich aus einem Icon oder einem anderen Bild, wird die Funktion des Bildes im Alternativtext wiedergegeben. Entscheiden ist also, welches Ereignis durch einen Klick ausgelöst wird.

Beispiele für Alternativtexte für Icons
Thema Kontext Alternativtext
Suchformular Eine Lupe in einem Suchformular löst die Suche aus. Suchen
Grafischer Text
(↑ Abbildung von Text) 		Grafik mit dem Schriftzug Jetzt bestellen! am Ende eines Bestellformulars.
Der Schalter sollte auch mit Spracheingabe-Software bedient werden können. 		Jetzt bestellen
Zum nächsten Schritt Ein Formular wird in mehreren Schritten realisiert. Ein Bild mit einem Pfeil nach rechts führt zum nächsten Schritt. Weiter

Alternativtexte für Bilder als Auswahlelemente

Werden Formularelemente, wie Angebote in einer Optionsgruppe oder Checkboxen, lediglich grafisch dargestellt, wird der Alternativtext für die jeweilige Grafik aus der Kurzbeschreibung des dargestellten Inhalts bestehen. Voraussetzung ist, dass der Auswahlbereich mit einer technisch verfügbaren Beschriftung versehen ist.

Für die Beschriftung einer Auswahlgruppe können folgende Techniken verwendet werden:

  1. Das legend-Element in Kombination mit einem fieldset.
  2. Das aria-describedby-Attribut zweckmäßigerweise in Kombination mit einer Überschrift.
Beispiele für Alternativtexte für Auswahlelemente
Thema Kontext Alternativtext
Bild für Checkbox Ein Pizzabestelldienst hat im Online-Formular in einem fieldset-Bereich mehrfache Belegungen im Angebot.
Das legend-Element ist entsprechend beschriftet. Die Auswahl besteht jeweils aus einer Checkbox, die mit einem Bild versehen ist.
Ein Bild zeigt grüne Oliven. 		Grüne Oliven
Bild als Optionsschalter Ein österreichisches Restaurant bietet in einem Bestellformular unterschiedliche Beilagen jeweils auf einem Foto an.
Die Auswahlmöglichkeiten stehen unter der Überschrift Beilagen. Auf diese wird von jeder einzelnen Option mittels aria-describedby referenziert.
Ein Foto zeigt Kartoffel. 		Erdäpfel (Kartoffel)
Dringende Empfehlung!

Der Inhalt eines Bildes kann visuell vielfach nicht eindeutig identifiziert werden. Die Bedeutung des Elements sollte daher unbedingt auch als Text lesbar sein.

Wird ein Bild technisch durch einen adäquaten Text ergänzt, sollte das Bild für den Screen Reader gänzlich verborgen werden. (↑ alt=" ")

Ein Klick vergrößert das Bild

Es ist vor allem für Menschen mit Sehbehinderung fein, wenn Mechanismen bereitgestellt werden, mit denen ein Bild durch einen Klick vergrößert werden kann. Damit ein solcher Klick beim Arbeiten mit einem Screen Reader funktioniert, muss er übrigens auch allein mit der Tastatur ausgelöst werden können.

Für den Alternativtext schlage ich vor, dass der Bildinhalt zunächst knapp beschrieben wird und ergänzend die Funktionalität angefügt wird. Der Code könnte also etwa folgendermaßen lauten:

alt="Berta von Suttner | vergrößern"

Ich empfehle, zwischen der Bildbeschreibung und der Funktion ein Satzzeichen als Trennzeichen zu verwenden, im Beispiel einen senkrechten Strich (ALTGR+<). Die Ansage von Satzzeichen kann zwar durch Konfigurieren des Screen Readers ausgeschalten werden. Es bleibt meines Erachtens trotzdem ein gangbarer Weg.

Wiederholung semantischer Angaben vermeiden

Screen Reader können technisch einen Schalter oder einen Link als solche erkennen. Sie geben diese Elementtypen bereits bekannt. Die entsprechenden semantischen Informationen müssen daher nicht in den Alternativtext aufgenommen werden, im Gegenteil, sie schaden der Kürze und Prägnanz der Information.

In folgenden Beispielen für Alternativtexte habe ich unnötigen Ballast an Information in eckige Klammern gesetzt und durchgestrichen:

Visuelle Anforderungen an interaktive Grafiken

Dient eine Grafik für sich stehend als Link oder Schalter, ergeben sich daraus nach den WCAG spezielle grafische Anforderungen:

Technische Realisierung von Alternativtexten für interaktive Grafiken

Die Mindestanforderung an die technische Beschreibung einer interaktiven Grafik besteht darin, einen angemessenen Alternativtext mit der Angabe der Zielrichtung oder Funktion vorzusehen. Der code könnte dafür etwa folgendermaßen lauten:


<a
  href="home.html">
  <img
    src="images/home.png"
    alt="Startseite"
  />
</a>

Ein Screen Reader würde für dieses Element etwa folgenden Text vorlesen:

Link Grafik Startseite

Die Information, dass die Zielbeschreibung des Links von einer Grafik getragen wird, scheint überflüssig. Diese Information kann unter Verwendung des aria-label-Attributs im A-Tag überschrieben werden. Der Code kann dafür etwa folgendermaßen strukturiert werden:


<a
  aria-label="Startseite"
  href="home.html">
  <img
    alt=" "
    src="images/home.png"
  />
</a>

Ein Screen Reader würde nun etwa lediglich folgenden Text vorlesen:

Link Startseite

Die Änderung, die bei der Nutzung mit einem Screen Reader durch diese Technik erzielt wird, mag als geringfügig eingeschätzt werden. Allerdings wird dadurch nicht nur ein Wort, sondern eine unnötige semantische Information eingespart. Ich schätze diese Technik daher als Best Practise für die Beschriftung von Grafiklinks ein. Allerdings ist sie zur Erfüllung der WCAG Kriterien nicht erforderlich.

Textlinks und Schalter mit zusätzlichen Grafiken

Bedeutung von Zusatzgrafiken für beschriftete interaktive Elemente

Grafiken werden in unterschiedlichen Szenarien in Kombination mit einem beschrifteten Link oder Schalter eingesetzt. Ich schlage folgende Unterscheidungen vor:

Typisierende Zusatzgrafiken für Links
Gelegentlich werden in einem Link zur Beschreibung der Zielseite Zusatzinformationen mittels eines Icons dargeboten.
Die Zusatzinformationen weisen typischerweise auf Dateitypen (PDF, Word, …) oder die Sprache der Zielseite hin.
Dekorative Zusatzgrafiken
Wird in einem interaktiven Element zum beschreibenden Text eine Grafik rein dekorativ oder als Blickfang ergänzt, ist sie für Screen Reader ohne Bedeutung und wird technisch verborgen.
Cards (Links aus Grafik und Beschriftung)
In Links ist eine ergänzende Zusatzgrafik schneller als rein dekorativ einzustufen, als eine Grafik ohne interaktive Rolle. In einem Link zur Tiroler Landeshauptstadt mit dem Text Innsbruck und einem Foto des Goldenen Dachls würde ich das Foto gewöhnlich als rein dekorativ ansehen.
Steht ein Blickfang jedoch für eine relevante Zusatzinformation, ist er als typisierend einzustufen (Sonderangebot, Aktuell, …).

Alternativtexte für Grafiken in Textlinks

Weist die Zusatzgrafik auf ein typisierendes Merkmal zum Inhalt des Linkziels hin, wird als textuelle Alternative der spezielle Typ angegeben. (PDF, Englisch, Sonderangebot, ...)

Ist die Zusatzgrafik rein dekorativ, wird sie für Screen Reader gänzlich verborgen, etwa durch ein leeres alt-Attribut (alt=" ").

Es empfiehlt sich grundsätzlich, eine zum Link assoziierte Grafik tatsächlich technisch in den Link einzubetten und nicht außerhalb des Links zu platzieren. Ich sehe dafür folgende Vorteile:

  1. Die Fläche, auf der ein Link oder Schalter durch Maus und Touch Screen aktiviert werden können, erweitert sich um die Fläche des Bildes.
  2. Wenn die Grafik eine Zusatzinformation zum Linktext transportiert, sollte sie im Link technisch verfügbar sein. Bei der Navigation mittels Tabulator-Taste und beim Auflisten aller Links mittels Screen Reader wird diese Zusatzinformation dadurch angegeben.

Techniken für typisierende Zusatzgrafiken zu Textlinks

Linkgrafiken können zu einem Linktext Informationen über die Zielseite (Format, Sprache, …) ergänzen. Dass sich die Zusatzinformation in einer Grafik verbirgt, ist für einen Screen Reader eigentlich uninteressant. Ich schlage daher folgenden Code für die Einbindung einer typisierenden Grafik vor:


<a href="vo_thg.pdf">
<img 
  role="presentation"
  aria-label="PDF-Datei"
  alt=" "
  src="images/pdf.png"
  title="PDF-Datei"
/>
 Verordnung zum Teilhabegesetz
</a>

Anmerkungen

Techniken für dekorative Zusatzgrafiken zu Textlinks

Wenn eine Grafik in einem Link keinen informativen Mehrwert bietet, sollte sie für Screen Reader gänzlich verborgen werden. Folgender Code ist dafür naheliegend:


<a href="home.html">
  <img 
    alt=" "
    src="images/home.png"
  />
  Startseite
</a>

Detailbeschreibungen für Grafiken

Bedeutung von Detailbeschreibungen

Für einige Bilder oder Grafiken ist es erforderlich, eine genauere Beschreibung vorzunehmen. Diese geht über das hinaus, was in einen Alternativtext gepfercht werden kann und muss.

Typischerweise stehen Diagramme, Organigramme oder Karten für derartige komplexe Grafiken. In bestimmten Kontexten können aber auch Fotos oder Bilder eine Detailbeschreibung erfordern, etwa in einem digitalen Ausstellungskatalog.

Aufbau von Detailbeschreibungen

Eine detaillierte Beschreibung kann typischerweise folgende Elemente enthalten:

Titel der Grafik
Ist auf der Grafik ein Titel oder eine Überschrift zu lesen?
Beispiel: Ergebnis der Wahl 2020 im Vergleich zu 2016
Überblick
Was wird auf der Grafik dargestellt und wie?
Beispiel: Das Säulendiagramm zeigt den prozentuellen Stimmenanteil der wahlwerbenden Parteien. Die Ergebnisse der einzelnen Parteien stehen zum Vergleich des aktuellen Ergebnisses mit den Ergebnissen von 2016 gepaart nebeneinander.
Tendenzen
Welche maßgeblichen Entwicklungen sind spontan aus der Grafik abzulesen?
Beispiel: Die FPÖ musste einen massiven Stimmeneinbruch hinnehmen.
Detailangaben
Welche exakten Werte sind auf der Grafik dargestellt?
Für ein Säulendiagramm wird an dieser Stelle etwa eine Datentabelle eingefügt.
Bildkomposition
Wie wird auf dem Bild das Objekt in Szene gesetzt?
Beispiel: Der Kopf des Vogels in Nahaufnahme erscheint vor einem unscharfen grünen Urwaldhintergrund.

Detailbeschreibungen im unmittelbaren Kontext darstellen

Der einfachste Weg, eine Detailbeschreibung WCAG-konform einzubetten, ist es, sie technisch und grafisch in der unmittelbaren Umgebung des Bildes darzustellen. Technisch befindet sich die unmittelbare Nähe dabei im Code direkt vor oder hinter dem IMG-Element.

Um für einen Screen Reader das Bild und dessen Beschreibung technisch in einen Zusammenhang zu bringen, kann beides in ein figure-Element eingebettet werden.


<figure>
  <figcaption
    aria-hidden="true"
  >
    Entwicklung des Wahlergebnisses
  </figcaption>
  <img
    alt="Ergebnis der Wahl 2020 im Vergleich zu 2016"
    src="images/wahlergebnis_16-20.png"
  />
  <h2>Erläuterungen zum Diagramm</h2>
  […]
  <table>
    <caption>Wahlergebnisse 2020 im Vergleich zu 2016</caption>
    […]
  </table>
  […]
</figure>

Anmerkungen zum Code

Nicht empfehlenswerte Alternative

Alternativ könnte in HTML5 die gesamte Detailbeschreibung einfach technisch in das figcaption-Element eingepackt werden. Ich rate davon jedoch dringend ab, wenn diese Methode auch in prominenten Tutorials vorgeschlagen wird. Screen Reader lesen ansonsten die gesamte Detailbeschreibung beim Eintritt in das figure-Element, in das figcaption-Element und auch wieder am Ende des Elements vor.

Code: Bild mit Beschreibung in der figcaption

<figure>
  <img
    alt="Ergebnis der Wahl 2020 im Vergleich zu 2016"
    src="images/wahlergebnis_16-20.png"
  />
  <figcaption>
    <h2>Erläuterungen zum Diagramm</h2>
    […]
    <table>
      <caption>Wahlergebnisse 2020 im Vergleich zu 2016</caption>
      […]
    </table>
    […]
  </figcaption>
</figure>

Eine umfangreiche Detailbeschreibung kann auf dem Hintergrund der Komposition des Seiteninhalts stören. Auch die Useability einer Webseite kann darunter leiden, weshalb es sich in diesen Fällen empfiehlt, die Detailbeschreibung verlinkt anzubieten.

Die verlinkte Detailbeschreibung kann sich auf einer eigenen Webseite oder außerhalb des Hauptinhalts einer Webseite befinden. Der Link wird natürlich im unmittelbaren Kontext des Bildes dargestellt, zweckmäßig unmittelbar darunter.

Die vielfach eleganteste Zugangsweise besteht darin, Bild und Hinweis zur Detailbeschreibung gemeinsam in einen Link einzubetten. Ich habe diese Technik bereits im Abschnitt ↑ Link zur Detailbeschreibung als Bildbeschriftung vorgestellt.

Ein einfacher und effizienter Weg, eine verlinkte Detailbeschreibung einer Grafik darzustellen besteht schlicht darin, den Link im Code unmittelbar unter der Grafik einzubetten.

Ich bezeichne diese Verlinkung als sequentiell, weil das Bild nicht selbst verlinkt ist. Die sequentielle Verlinkung bietet den Vorteil, dass deren Bedeutung textuell einfach realisiert werden kann und so leicht wahrnehmbar und verständlich ist. 


<p>
  <img
    alt="Wappen von Breitenwang"
    src="images/wappen.png"
  /> <br />
  <a
    href="wappen_desc.html">
    Beschreibung des Wappens
  </a>
</p>

Gruppieren von Bild und Link mittels figure

Bedeutung des Gruppierens

Durch das Gruppieren von Bild und Link zur Detailbeschreibung kann deren Korrelation semantisch deutlicher dargestellt werden als in einem schlichten Absatz oder durch bloßes Aufeinanderfolgen im Code.

In einem Tutorial der Web Accessibility Initiative (WAI) wird vorgeschlagen, Bild und Link zur Beschreibung in einem figure-Element zu gruppieren. Der Link wird dabei in das figcaption-Element eingebettet:

[WAI Tutorial] Complex Images (abgerufen 12.02.2020)

Diese Technik warf bei meinen Tests Probleme in der Verständlichkeit für Screen Reader auf, für die ich keine einfache Lösung sehe. Ich kann sie daher momentan nicht empfehlen.

Code zum Gruppieren

Der Code für unser Wappen würde dem Vorschlag der WAI entsprechend folgendermaßen lauten:


<figure
  role="group"
>
  <img
    alt="Wappen von Breitenwang"
    src="images/wappen.png"
  />
  <figcaption>
    <a
      href="wappen_desc.html">
      Beschreibung des Wappens
    </a>
  </figcaption>
</figure>

Screen Reader Verhalten

JAWS interpretiert diesen Code in der Standardkonfiguration der Version 2019 folgendermaßen:

Gruppe Beschreibung des Wappens Start
Wappen von Breitenwang
Link Beschreibung des Wappens
Gruppe Ende

Anmerkungen zu dieser Technik

Verweis auf die Detailbeschreibung im alt-Attribut

Grundsätzlich wäre es auch möglich, auf eine Detailbeschreibung zum Bild im Alternativtext hinzuweisen. Dieser Zusatzhinweis müsste jedenfalls exakt und prägnant sein:

alt="Wappen von Breitenwang: Beschreibung unter der Überschrift Unser Wappen im Detail"

Ich rate von diesem Zugang aus folgenden Gründen ab:

longdesc-Attribut zur Detailbeschreibung

Bedeutung des longdesc-Attributs

In HTML kann in ein img-Element mittels des longdesc-Attributs quasi ein verborgener Link zu einer Detailbeschreibung für assistierende Technologien bereitgestellt werden.

[W3C] HTML5 Image Description Extension (longdesc)

Diese Strategie weist eine Reihe von Nachteilen auf, weshalb ich von dessen Nutzung generell abrate. Wer sich schon die Mühe gemacht hat, eine Detailbeschreibung zu formulieren, stellt diese doch gleich allgemein und nicht nur für die Nutzung mittels assistierender Technologien zur Verfügung.

Das longdesc-Attribut wird aber von der WAI weiterhin als hinreichende Technik vorgestellt, um eine Detailbeschreibung bereitzustellen:

[WAI] H45: Using longdesc

Technische Realisierung eines longdesc-Attributs

Der Code zur Einbettung der Detailbeschreibung würde etwa folgendermaßen aussehen:


<img
  alt="Wappen von Breitenwang"
  longdesc="wappen_desc.html"
  src="images/wappen.png"
/>

Der Wert des Attributs besteht aus dem URI, der auf die Detailbeschreibung verweist.

Die Detailbeschreibung kann sich auf der Webseite mit dem Bild selbst befinden oder auf einer separaten Seite. Für eine separate Seite spricht, dass sie auch von anderen Seiten her klar genutzt werden kann auf der aktuellen Seite selbst zu einer Textverminderung führt. Befindet sich die Detailbeschreibung auf derselben Seite, kann sie jedoch ohne weitere Vorkehrungen auch von allen wahrgenommen werden, die nicht über assistierende Technologien verfügen.

Nachteile des longdesc-Attributs

aria-describedat (Obsolete Technik)

Das Attribut aria-describedat wurde nicht in die ARIA 1.1 Spezifikation aufgenommen und ist obsolet. Wo es bereits verwendet wurde, muss es ersetzt werden, am besten durch eine allgemeine Verlinkung zur Detailbeschreibung oder durch aria-details.

Komplexe Grafiken im Detail

Bedeutung von komplexen Grafiken

Komplex ist für das barrierefreie Web Design ein Bild oder eine Grafik dann, wenn deren Inhalt zum Verständnis im Kontext nicht in einem knappen Alternativtext verpackt werden kann. Komplexe Bilder bedürfen daher einer ↑ Detailbeschreibung.

Bevor ich an der Beschreibung einer komplexen Grafik arbeite, überlege ich mir, ob die Komplexität der Grafik überhaupt erforderlich ist. Lassen sich Elemente der Grafik entfernen, ohne dass deren Bedeutung verloren geht? Können komplexe Zusammenhänge vielleicht besser durch eine Aufsplittung auf mehrere Grafiken veranschaulicht werden?

Ich sammle im Folgenden Materialien zur Optimierung der Barrierefreiheit von einzelnen Typen von komplexen Bildern und Grafiken.

Bilder mit spezieller Sinneserfahrung

Wikipedia | Optische Täuschung: Relativität von Helligkeit

Dient ein Bild einem speziellen Sinneseindruck oder zielt es etwa von seiner Natur als Kunstwerk her auf eine besondere visuelle Sinneserfahrung ab, können die wahrnehmbaren Inhalte selten in einem Alternativtext hinreichend wiedergegeben werden. Der Alternativtext beschreibt knapp die jeweilige visuelle Erfahrung (Optische Täuschung: Relativität von Helligkeit, Vincent van Gogh, Selbstbildnis, …)

Ergänzend zum Alternativtext, der quasi den Bildtitel darstellt, ist in bestimmten Kontexten eine Detailbeschreibung erforderlich. Dieser kann physiologische Ursachen für eine Sinnestäuschung beschreiben oder als Teil eines digitalen Ausstellungskatalogs ohnedies schon verfügbar sein. In Einzelfällen kann darüber hinaus eine Beschreibung visueller Details für Menschen hilfreich sein, die über eine Sinnesbeeinträchtigung verfügen, seien sie blind oder farbfehlsichtig.

Landkarten und Lagepläne

Bedeutung von Landkarten und Lageplänen

Landkarten sind ein geniales Medium, um geografische Daten und Zusammenhänge visuell darzustellen. Doch wie können all diese Daten und Zusammenhänge für Menschen alternativ aufbereitet werden, die keinen visuellen Zugang zu den Karten und Plänen haben?

Auf einer Landkarte finden sich typischerweise zu einer einzigen Stadt Informationen über die Höhenlage, Stadtgrenzen, deren Flächenaufteilung, in unterschiedlichen Farben Gewässer, Straßen- und Bahnverbindungen, regionale und überregionale Verknüpfungen oder Beziehungen und vieles mehr. All das ließe sich niemals textuell erschöpfend wiedergeben und schon gar nicht effizient zugänglich machen.

Bei der Erstellung tastbarer Stadtpläne für blinde Menschen wird daher schon darauf verzichtet, alle visuellen Informationen in tastbarer Form umzusetzen. Die Informationen werden in taktilen Plänen auf das reduziert, was vermeintlich wesentlich erscheint.

Doch was ist auf digitalen Karten und Plänen die wesentliche Information? Das hängt wie so oft im barrierefreien Web Design vom Kontext ab, vor allem aber von der Zielgruppe, für die Webinhalte jeweils vorgesehen sind.

Anfahrtsbeschreibungen und Lagepläne

  1. Geben Sie in der Detailbeschreibung zur Karte relevante Umgebungsinformationen an, etwa Haltestellen in der Nähe von welchen Linien des öffentlichen Verkehrs angefahren werden!
  2. Stellen Sie relevante Informationen zur analogen Barrierefreiheit in Ihrem unmittelbaren Bereich bereit! Wenn sich auf Ihrem Areal Servicepoints mit Assistenzangeboten, 3D Modelle, taktile Bodenindikatoren (TBI) für Blinde oder ähnliche Infrastrukturmaßnahmen befinden, sollte dies auf Ihrer Webseite zur Anfahrt dokumentiert sein.
  3. Machen Sie die GPS-Daten eines Standorts verfügbar! Navigations-Apps verfügen teilweise schon über barrierefreie Navigationsfunktionalitäten, auf die auch blinde Menschen zugreifen können.
  4. Lassen Sie sich nicht beirren, wenn einzelne Personen sich dabei diskriminiert fühlen, weil diese nicht über die erforderlichen Apps verfügen oder die Buslinien oder Haltestellen noch nicht über eine ausreichende analoge Barrierefreiheit verfügen. Diese Umweltfaktoren liegen nicht in Ihrem Aufgabenbereich bei der Erstellung der Anfahrtsbeschreibung. Allerdings ist es mehr als eine freundliche Geste, wenn Sie in Ihrer textuellen Anfahrtsbeschreibung auch auf mögliche Störfaktoren hinweisen, wenn diese ihnen bekannt sind oder bekannt gemacht werden.
  5. Wenn sich auf der Karte mehrere Standorte zu Ihrer Einrichtung befinden, listen Sie diese in der Detailbeschreibung auf und führen Sie jeweils die hier angeführten Maßnahmen durch!

Google Maps

Als interaktive Landkarten bieten Google Maps spezielle Möglichkeiten, aber auch Herausforderungen an das barrierefreie Web Design.

Folgende Links scheinen mir für eine vertiefte Recherche hilfreich:

[Google] Accessibility in Google Maps
Bedienungskonzepte alleine mit der Tastatur werden von Google selbst auf dieser Seite zusammengefasst.
[Carnegie Museums of Pittsburgh] Maps
Eine Empfehlung aus einer WebAIM Diskussion 2018 mit redaktionellen und technischen Tipps und weiterführenden Links.

Die Brauchbarkeit dieser Hinweise muss ich noch genauer testen und Anregungen zur Optimierung von Google Maps finden. Sicherheitshalber sollten jedenfalls die Hinweise zu allgemeinen Landkarten berücksichtigt werden.

Anregungen zum Einsatz von Google Maps

Folgende Hinweise erscheinen mir schon recht brauchbar:

Organisationsstrukturen und Organigramme

Höchst effizient lassen sich komplexe Organisationsstrukturen, wie beispielsweise Organigramme, grafisch übersichtlich darstellen. Solche zweidimensionalen Veranschaulichungen müssen für die eindimensionale Wahrnehmung mittels Screen Reader jedoch adaptiert und herunter gebrochen werden.

Hierarchische Beziehungen lassen sich in einer Detailbeschreibung unter Verwendung einer Überschriftenhierarchie oder von verschachtelten Listen teilweise linearisieren. Führt diese Linearisierung zu einer besonders langen Darstellung, sollte der Einsatz von interaktiven Elementen zum Aus- und Einklappen von Unterebenen überlegt werden.

Die Linearisierung ist vielfach mit einer Verbalisierung verbunden. Einzelne Relationen werden in einzelnen Sätzen ausformuliert. Solche Formulierungsübungen sind zwar mühsam, sie helfen bei der Entwicklung des Organisationsdiagramms aber auch dazu, Strukturen zu präzisieren.

Säulendiagramme

Bei Säulendiagrammen werden in der Detailbeschreibung die einzelnen Werte alternativ in einer Datentabelle angeboten. Entsteht dabei eine sehr hohe Spaltenanzahl sollten Möglichkeiten überlegt werden, die Daten aus der Tabelle in mehreren kleineren Tabellen umzubrechen.

Können aus dem visuellen Diagramm signifikante Entwicklungen spontan erkannt werden, sollten diese in der Detailbeschreibung auch verbalisiert werden. Ich würde die Beschreibung der Tendenzen der Datentabelle voranstellen.

Verlaufsdiagramme

Bei Verlaufsdiagrammen können die Hinweise zu ↑ Säulendiagrammen sinngemäß angewendet werden.

Screenshots

Eine Datentabelle als Screenshot einzubetten, ergibt aus der Perspektive der Barrierefreiheit keinen Sinn. Die Datentabelle muss ohnedies in textueller Form verfügbar sein. Der Screenshot kann dann aber auch gänzlich entfallen.

Ein Screenshot ist jedoch hilfreich, um etwa die Platzierung eines Icons unter anderen Bedienungselementen visuell darzustellen. Der Alternativtext könnte dann etwa knapp folgenderweise lauten:

Anordnung des Speichern-Schalters

In diesem Fall ist meines Erachtens eine Detailbeschreibung des Screenshots nicht unbedingt erforderlich. Sehr wohl sollte aber das Verfahren angegeben werden, mit dem die Funktionalität ohne Maus ausgelöst werden kann:

Drücken Sie alternativ STRG + S, um zu speichern.

CAPTCHA

Captcha Beispiel

Ein CAPTCHA ist ein Prüfungsbild mit einem schwer lesbareren Text, der in ein Eingabefeld getippt werden muss, um eine Funktionalität auszulösen (Absenden einer Anmeldung, …). Dessen Zweck besteht darin, programmgesteuerte Eingaben abzuwehren, um etwa Spams zu verhindern.

Der Alternativtext kann natürlich nicht aus dem abgebildeten Text bestehen, der ansonsten leicht von einer Schadsoftware ausgelesen werden könnte. Stattdessen besteht der Alternativtext aus einer Angabe zur Funktion des Bildes, also etwa Prüfungstext oder schlicht Captcha. (Ich empfehle hier die Kleinschreibung, weil gelegentlich Sprachausgaben den Ausdruck in Großbuchstaben buchstabieren.)

Ergänzend müssen statt einer Detailbeschreibung alternative Mechanismen angegeben werden, um die Barriere zur Unterscheidung eines Menschen von einer Maschine zu überwinden.

CAPTCHA Barrierefreiheit

Bilder aus Zeichen

Rind aus Satz- und Sonderzeichen

Bedeutungen von Bildern aus Zeichen

Gelegentlich werden Zeichen spielerisch, künstlerisch oder auch zur Verschleierung von Inhalten eingesetzt, um eine visuelle Erfahrung zu erzielen. Gemeinsam ist diesen, dass die Zeichen überhaupt nicht zum Vorlesen und damit auch nicht für die Ausgabe durch eine Sprachausgabe gedacht sind.

Als Zeichen werden Groß- und Kleinbuchstaben, Satzzeichen und Sonderzeichen verwendet, kurz alles was sich auf einer gewöhnlichen Tastatur einfach tippen lässt. Es wird also der einfache Zeichensatz eingesetzt, um einen visuellen Effekt zu erzielen.

Typische Beispiele sind:

ASCII Art (ASCI Art)
Die Abkürzung ASCII steht für den amerikanischen Standard für die einfache Zeichencodierung (0 - 255). Aus diesen Zeichen werden unter Verwendung von Leerzeichen und Absätzen einfache Grafiken erstellt. Ein I kann dabei als vertikale Linie und ein _ für eine horizontale Linie eingesetzt werden. Auf diese Weise werden kleine digitale Kunstwerke erstellt (Art).
Leetspeak
Als Leetspeak wird ein kryptografischer Gebrauch von ähnlich aussehenden Zeichen bezeichnet. Ein I sieht ähnlich aus wie eine 1 und ein A wie eine 4. Deshalb kann die Zeichenfolge V1AGR4 visuell leicht als VIAGRA gelesen werden, ohne dass ein Spamfilter die Zeichenfolge VIAGRA finden könnte.

Anforderungen an ASCII-Grafiken

Der Code, aus dem eine ASCI-Grafik besteht, ergibt weder auf der Braillezeile noch durch eine Sprachausgabe einen Sinn. Daraus ergeben sich folgende Anforderungen an die barrierefreie Einbettung einer solchen Grafik:

  1. Die Bedeutung der Grafik muss in einer textuellen Alternative verfügbar sein.
    1. Die textuelle Alternative enthält eine knappe Beschreibung dessen, was zu sehen ist: (Rind).
    2. Die spezielle Technik wird angegeben, durch welche die Grafik realisiert wurde. (aus Satz- und Sonderzeichen)
  2. Der Code mit den Zeichen, aus denen die Grafik besteht, kann für Screen Reader verborgen werden, sofern nicht ein spezieller Lernzweck mit der Darstellung des Codes verbunden ist.

Technische Realisierung von ASCII-Grafiken

Grundsätzlich kann ein Screenshot von einer ASCI-Grafik mit einem passenden Alternativtext zur Darstellung eingebunden werden. Dieses Verfahren habe ich etwa auch am Beginn dieses Abschnitts eingesetzt. Das alt-Attribut lautet dabei: Rind aus Satz- und Sonderzeichen. Die beschriebenen Anforderungen sind damit erfüllt.

Allerdings weist ein Screenshot einer ASCI-Grafik folgende Nachteile auf:

Diese Nachteile treten nicht auf, wenn der Text – respektive die Zeichen – selbst in den Quellcode geschrieben werden. Ich schlage dafür folgende Vorgangsweise vor:


<div>
  role="img"
  aria-label="Rind aus Satz- und Sonderzeichen"
>
  <pre
    aria-hidden="true" 
  >
            (__)
            (oo)   
      /------\/     
     / |    ||  
    *  /\---/\ 
       ~~   ~~  
  </pre>
</div>
Erläuterungen zum Code
  1. Mit role="img" wird dem Element ein Typ zugewiesen, der von assistierenden Technologien als Bild (Grafik) erkannt wird.
  2. Im aria-label-Attribut wird das Element beschriftet. Die Beschriftung enthält den Anforderungen entsprechend knappe Hinweise zum dargestellten Objekt und der Darstellungstechnik.
  3. Das pre-Element ist wie geschaffen, um einen Bereich für ASCI-Grafiken festzulegen: Formatierende Leerzeichen werden anders als üblich vom Browser dargestellt. Jedes Zeichen nimmt standardmäßig dieselbe Breite ein (monospace).
  4. Mit aria-hidden="true" kann für Screen Reader der gesamte visuell intendierte Code verborgen werden. Es bleibt jedoch in meinem Vorschlag die Information, dass ein Bild vorhanden ist und die knappe Information über dessen Inhalt (Erläuterungen 1. und 2.). Fehlt dieses Attribut, empfiehlt es sich, Maßnahmen zum Überspringen des Codes für die ASCII-Grafik vorzusehen.
Alternativer Vorschlag der W3C

In einem Diskussionspapier der W3C zur Verwendung von ARIA in HTML findet sich ein anderer Vorschlag zur technischen Einbindung:

[W3C] ARIA in HTML - EXAMPLE 2 (abgerufen am 11.03.2020)

Anders als bei meinem Vorschlag wird die Präsentation der Zeichen in ein figure-Element eingebettet mit einer wortreichen Angabe vor allem zur Bildquelle in der figcaption. Der Text der figcaption wird vom Screen Reader gleich dreimal hintereinander wiederholt: Beim Betreten der figure, der figcaption und beim Verlassen des figure-Bereichs.

Leetspeak

Dass die Zeichenfolge W!K!P3D!4 für WIKIPEDIA steht, ist visuell keine große Herausforderung, auf einer Braillezeile jedoch kaum und durch eine Sprachausgabe überhaupt nicht wahrnehmbar. Hier ein Hörbeispiel:

Anmerkung: In diesem Beispiel wurden die Satzzeichen nicht vorgelesen. Dies entspricht der Standardkonfiguration der meisten Screen Reader.

Die korrekte textuelle Lesart sollte auf jeden Fall verfügbar sein, sei es (A) mit der oder (B) ohne die kryptografische Schreibweise:

  1. W!K!P3D!4 (WIKIPEDIA)
  2. <span aria-label="WIKIPEDIA">W!K!P3D!4</span>

Daten zu Benutzergewohnheiten User Experience

Bedeutung der User Experience

Welche Erfahrungen und Gewohnheiten bringen NutzerInnen mit, wenn sie mit besonderen Bedürfnissen oder assistierenden Technologien Webseiten besuchen? Diese Frage wird unter dem Stichwort User Experience (UE, UX) behandelt.

Überlegungen zu dieser Fragestellung liegen den bisherigen Hinweisen in diesem Artikel bereits neben den technischen Anforderungen aus den WCAG zugrunde. Im Folgenden sammle ich darüber hinaus Berichte, die explizit die Nutzerperspektive zu Bildern und Grafiken reflektieren.

[WebAIM] Screen Reader User Survey 2015 - Complex Images

Bei der WebAIM Onlineumfrage 2015 unter Menschen, die mit Screen Readern arbeiten, gab es auch die Frage nach der bevorzugten Präsentation textueller Erläuterungen für komplexe Grafiken. Meine Übersetzung der genauen Fragestellung und der Antworten lautet folgendermaßen:

Einige Bilder, wie beispielsweise Karten oder Schaubilder, Diagramme oder Comic Strips, sind zu komplex, als dass sie in ein paar Wörtern beschrieben werden könnten. Wenn eine lange, detaillierte Beschreibung dieser Bilder verfügbar ist, welche Art der Präsentation würden Sie bevorzugen?

Hier das durchaus überraschende Ergebnis:

Bevorzugte Art der Einbindung von Beschreibungen
Art der Einbindung Anteil
Als optionaler Text, verfügbar auf derselben Seite, aber nur, wenn ich ihn über einen Schalter anfordere. 43,5 %
Als Text auf der Webseite, unmittelbar auf die Grafik folgend. 25,8 %
Als umfangreiche Beschreibung (Alternativtext) im Bildelement selbst. 15,1 %
Auf einer eigenen Webseite, die durch einen Link verfügbar ist. 6,9 %
Auf einer eigenen Webseite, die von meinem Screen Reader angekündigt und verfügbar gemacht wird. 5,8 %
Mein Screen Reader soll das überhaupt ignorieren. 2,9 %

Interpretation der Antworten

Nur ein Viertel der Befragten entschied sich für die vielfach zweckmäßigste unmittelbare Einbindung unter der Grafik. Ich interpretierte dieses Ergebnis so, dass bei der Nutzung eines Screen Readers komplexe Grafiken kaum als hilfreich oder erforderlich zum Verständnis betrachtet werden. Meiner Vermutung nach führten zu dieser Wahrnehmung paradoxerweise Erfahrungen mit sehr guten und sehr schlechten textuellen Detailbeschreibungen.

Entscheidungsbaum für die Realisierung von Alternativtexten

Bedeutung des Entscheidungsbaums

Der Entscheidungsbaum ist ein kleiner Anatomieatlas für Bilder. Wie sollten textuelle Alternativen technisch und redaktionell in unterschiedlichen Kontexten realisiert werden?

Technisch ist der Entscheidungsbaum als verschachtelte Liste dargestellt. Sie beginnt mit den drei Hauptszenarien:

  1. Einfaches Bild
  2. Interaktives Bild
  3. Zusatzgrafik in einem interaktiven Element

Die Verzweigungen im Entscheidungsbaum münden jeweils in einem Link, das zu einem Bereich aus diesem Webartikel führt. In diesem Bereich finden Sie nähere Hinweise zur technischen und redaktionellen Realisierung im jeweiligen Kontext.

Vorschlag für einen Entscheidungsbaum für Bilder

  1. Das Bild ist klassisch ohne Funktionalität.
    1. Das Bild kann in wenigen Worten beschrieben werden.
      1. Das Bild verfügt über eine ergänzende Beschriftung.
      2. Das Bild benötigt einen Alternativtext.
    2. Das Bild ist komplex und bedarf zum Verständnis einer Detailbeschreibung.
      1. Das Bild dient einer ästhetischen Erfahrung.
      2. Die Grafik illustriert einen komplexen Sachverhalt.
        1. Die Grafik ist eine geografische Abbildung.
        2. Die Grafik ist ein Diagramm.
        3. Das ist ein Screenshot.
      3. Das Bild besteht aus Text oder Zeichen.
        1. Text ist auf einer Pixelgrafik.
        2. Das Bild wird durch Zeichencode realisiert.
      4. Das Bild dient zu Prüfungszwecken.
      5. Das Bild ist rein dekorativ oder nur für das Layout relevant.
  2. Das Bild dient als Link oder Schalter.
    1. Ein Klick auf das Bild führt zu einer anderen Seite oder einem Seitenbereich.
    2. Ein Klick auf das Bild löst einen Schalter aus.
    3. Ein Klick auf das Bild aktiviert in einem Formular eine Option oder eine Checkbox.
    4. Ein Klick vergrößert lediglich das Bild.
  3. Das Bild ist in einem Link oder Schalter eine Ergänzung zur vorhandenen Beschreibung.
    1. Das Bild liefert eine typisierende Zusatzinformation zur Beschreibung (Sprache, Dateiformat, …).
    2. Die Zusatzgrafik ist rein dekorativ (Layout, …).

Hinweise zu diesem Entscheidungsbaum

[WAI Tutorial] An alt Decision Tree
Die WAI ist beim Card Sorting auf einen etwas anderen Weg gekommen. Inhaltlich habe ich keine Unterschiede entdeckt. Mein Entscheidungsbaum ist jedenfalls bereits detailreicher.