Zweiter Blick: Bilder barrierefrei

BarrierefreiheitDarstellungsoptionen



Bilder barrierefrei Im Web

Zusammenfassung des Artikels zu Bildern

Dieser Artikel fasst Anforderungen, Empfehlungen und Tipps für den Einsatz von Bildern, Fotos und Grafiken auf Webseiten zusammen. Wir decken Fehler auf, zeigen Mindestanforderungen und erörtern Best Practise-Beispiele. Eine Zusammenfassung der Empfehlungen finden Sie gleich anschließend. Zum Verständnis der Empfehlungen sollten Sie den Artikel bis zum Ende lesen.

Empfehlungen

Empfehlungen für den Einsatz von Bildern im Webdesign

  1. Bilder können Inhalte verständlicher machen und sollten in dieser Weise eingesetzt werden.
  2. Ein Alternativtext muss kurz und präzise Inhalt oder Funktion des Bildes wiedergeben.
  3. Komplexe Grafiken und Darstellungen benötigen textuelle Erläuterungen außerhalb des Grafikelements.
  4. Text, der visuell mit CSS entsprechend formatiert werden kann, darf nicht als Textgrafik eingebunden werden.
  5. Rein dekorative Bilder benötigen ein leeres ALT-Attribut oder sollten überhaupt mit CSS eingebunden werden.
  6. Grafiken sollten kontrastreich gestaltet sein.
  7. Eine rein farbliche Codierung von Informationen sollte nach Möglichkeit vermieden werden.
  8. Icons sollten gebräuchlich und intuitiv verständlich sein.
  9. Es ist für viele Menschen fein, wenn sich der Alternativtext sichtbar unter dem Bild befindet.
  10. Text auf Hintergrundgrafiken erschwert die Lesbarkeit und sollte daher vermieden werden.

Webseiten brauchen Bilder

Bilder unterstützen das Verständnis

Es ist oft sehr schwer, einen Sachverhalt mit Worten darzustellen und gleichzeitig einfach, den Sachverhalt mit einem Foto, einer schematischen Darstellung oder einem Diagramm zu illustrieren. Landkarten etwa bieten eine Unzahl an Informationen über die Lage von Orten, deren geografischen Relationen und topografischen Gegebenheiten. Ein Diagramm erlaubt auf einen Blick, die Entwicklung von Bevölkerungszahlen zu erfassen, während die Bevölkerungszahlen aus einer Tabelle mühsam zu erarbeiten sind und Entwicklungen nicht so plastisch wahrgenommen werden können. Mit Fotos und schematischen Darstellungen lassen sich Anforderungen an Bodenleitsysteme verständlicher machen, als mit einer langen Beschreibung. Es könnten unzählige weitere Beispiele angeführt werden.

Zu bedenken ist auch, dass grafische Darstellungen gerade auch Menschen mit Lernbehinderungen entgegenkommen können oder Menschen mit mangelnder Lese- oder Sprachkompetenz. Sie können selbst versuchen, auf Wikipedia in einer Sprache zu surfen, die Sie kaum verstehen. Sie werden glücklich sein über aussagekräftige Fotos und Grafiken.

Vorbereitung auf persönlichen Kontakt

Wenn ich auf einer Webseite ein Foto von einem Gebäude sehe, finde ich das Gebäude in der realen Welt einfacher. Personen, von denen ich schon Bilder gesehen habe, werde ich bei einer Veranstaltung vielleicht wieder erkennen. Dies gilt natürlich nicht, wenn ich blind bin. Doch selbst als Sehbehinderter kann ich von Fotos profitieren, wobei sich Fotos optimieren lassen, wie auf folgendem Link zu erfahren ist:

Alternativtexte

Bedeutung von Alternativtexten

Damit Bilder auch für blinde Menschen etwas wahrnehmbar werden, muss in der Regel im IMG-TAG das ALT-Attribut verwendet werden. Hier wird die textuelle Alternative formuliert. Der Alternativtext sollte prägnant und knapp Inhalt oder Funktion des Bildes wiedergeben.

Alternativtexte können auch von Suchmaschinen verwendet werden und dienen daher auch zur Suchmaschinenoptimierung (SEO) eines Webauftritts.

Theoretisch könnten sich blinde Webdesigner auf diese Weise sogar selbst passende Bilder für ihre Webseiten suchen. In der Praxis wird aber jeder blinde Designer aber bei der Auswahl der Bilder eine sehende Assistenz suchen.

Code von Alternativtexten

Der Code kann etwa folgendermaßen aussehen:

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

Nach Möglichkeit sollte der Alternativtext auch sichtbar sein. So steht er allen zur Verfügung. In diesem Fall ist der Alternativtext leer. Der Code dafür kann etwa so aussehen:

<p class="undertitled" >
  <img
    src="images/bertha_von_suttner.jpg"
    alt=" "
  />
  Bertha von Suttner
</p>

Texting

Im Alternativtext knapp und präzise Inhalt oder Funktion des Bildes wiederzugeben, ist eine Herausforderung. Häufig werden zu lange Formulierungen überlegt und unnötige Präzisierungen vorgenommen. Folgende Fragen sollten bei der Formulierung überdacht werden:

  • Was ist der Kontext des Bildes?
  • Was ist auf dem Bild bzw. was passiert auf dem Bild?
  • Welche Informationen sind ohnedies schon in der textuellen Umgebung des Bildes vorhanden?
  • Welche Informationen braucht die Seite, falls die Bilddatei aus irgendeinem Grund nicht angezeigt wird?
  • Wenn es sich um ein Grafiklink handelt: Wohin führt das Bild?

Leerer Alternativtext

Leerer Alternativtext

Das IMG-Tag muss in jedem Fall ein ALT-Attribut enthalten. Screenreader versuchen ansonsten irgendwie die Bedeutung des Bildes herauszufinden, etwa aus dem Dateinamen des Bildes. Das ist selten hilfreich.

Code für leeren Alternativtext

Der Code kann folgendermaßen aussehen:

alt=" "

Screenreader ignorieren solche Bilder gänzlich. Es braucht daher auch kein aria-hidden="true", um das Bild für den Screenreader zu verbergen. Dieses ARIA-Attribut kann jedoch sicherheitshalber redundant eingesetzt werden.

Wann ist ein Bild rein dekorativ?

Manche blinde 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 Bilder mit überwiegend dekorativer Funktion. Andere wiederum möchten in jedem Fall einen knappen Alternativtext selbst für dekorative Bilder erhalten, etwa um Assistenzpersonen darauf hinweisen zu können oder sogar, um selbständig Bilder für ihre Webauftritte zu verwenden.

Ich persönlich empfehle blinden bei der Webprogrammierung bei der Auswahl von Bildern, sich auf Assistenzpersonen zu verlassen. Sofern daher ein Bild nichts zum Inhalt beiträgt oder die Funktionalität einer Linkgrafik textuell im Kontext vorhanden ist, sollte das ALT-Attribut leer bleiben.

Komplexe Grafiken auf Webseiten

Bei komplexen Grafiken, Diagrammen und Ähnlichem sollte die textuelle Beschreibung nicht in ein ALT-Attribut gepfercht werden.

  • Semantische Differenzierungen, wie Tabellen, können nicht in einem ALT-Attribut abgebildet werden.
  • Erläuternde Beschreibungen sollten nicht alleine in einem ALT-Attribut versteckt werden, weil sie vermutlich nicht nur bei der Verwendung eines Screenreaders von Interesse sind, sondern auch anderen Personengruppen das Verständnis der Grafik erleichtern.

Google Maps

Beim Googeln mit den Suchausdrücken google maps accessibility kommt man auf viel versprechende Seiten von Google selbst zur Barrierefreiheit der Google Maps, etwa Accessibility in Google Maps. Ich selbst habe jedoch noch nicht geschafft, eine Google Map mit dem Screen Reader und alleine mit der Tastatur zu bedienen.

Ich schlage vor, die Google Map nicht grundsätzlich mit aria-hidden="true" für den Screen Reader zu verbergen, sondern etwa folgenden Code zu verwenden:

<div  id="google_map" aria-label="Google Map">
  <a href="#skip_map" class="sr-only">Google Map überspringen</a>
  ...
</div>

Anmerkungen zum Codebeispiel

  • Die CSS-Klasse sr-only muss natürlich definiert sein, typischerweise mit Screen Reader Only Anweisungen.
  • Das erste HTML-Element hinter der Google Map benötigt id="google_map" oder der Link der Seite muss für eine andere ID unmittelbar hinter der Map bezeichnet werden.

Säulendiagramme

Bei Säulendiagrammen ist es wohl am zweckmäßigsten, die einzelnen Werte alternativ in einer Datentabelle anzubieten.

Verlaufsdiagramme

Bei Verlaufsdiagrammen sollten die einzelnen Werte alternativ in einer Datentabelle angeboten werden.

Es ist alternativ oder ergänzend dazu aber zweckmäßig, signifikante Entwicklungen im Verlaufsdiagramm auch zu verbalisieren, also in ganzen Sätzen auszuformulieren.

Organisationsstrukturen und Organigramme

Höchst komplex und gleichzeitig effizient lassen sich Organisationsstrukturen, wie beispielsweise Organigramme, grafisch übersichtlich darstellen.

Solche zweidimensionalen Veranschaulichungen müssen für die eindimensionale Wahrnehmung mittels Screenreader jedoch herunter gebrochen werden. Das heißt, die einzelnen Relationen werden jeweils in einzelnen Sätzen formuliert. Solche Formulierungsübungen sind zwar mühsam, sie helfen bei der Entwicklung des Organisationsdiagramms aber auch dazu, Strukturen zu präzisieren.

Art der Einbindung der textuellen Erkläruungen von komplexen Grafiken

Es gibt mehrere Möglichkeiten, ausführliche Bildbeschreibungen für komplexe Grafiken auf einer Webseite einzubinden. In der Regel ist es jedoch wohl am zweckmäßigsten, die textuelle Alternative gleich unterhalb der komplexen Grafik für alle sichtbar und eventuell mit erläuternden Bemerkungen in den Code einzubinden. Dies kann anhand folgender Testdatei geprüft oder gerne auch korrigiert werden:

LONGDESC-Attribut in HTML

In HTML kann in ein IMG-Element mittels des LONGDESC-Attributs quasi ein verborgenes Link für Assistierende Technologien eingebaut werden, das auf eine ausführliche Beschreibung einer Grafik verweist. Dieses Link wird von Browsern de facto ignoriert und selbst von Assistierenden Technologien leider nicht zuverlässig dargestellt.

Die beabsichtigte Funktionalität wird von der WAI mit folgender Technik beschrieben, auf der sich auch Beispiele finden:

Ich kann diese Technik nicht empfehlen, weil sie die Verwendung von Assistierenden Technologien voraussetzt und selbst für Assistierende Technologien nicht mit den Standardfunktionalitäten für Links bedienbar ist. Wenn man sich schon die Mühe macht, eine komplexe Grafik textuell zu beschreiben, dann ist es wohl zweckmäßig, diese Beschreibung wahrnehmbar für alle darzustellen, sei es unmittelbar oder verlinkt.

ARIA-DESCRIBEDAT Attribut

In dem am 19. November 2015 veröffentlichten Arbeitspapier für ARIA 1.1 wird darauf hingewisen, dass das ARIA-DESCRIBEDAT Attribut vermutlich eliminiert wird. Es bleibt abzuwarten, ob es trotzdem in die normative Version von ARIA 1.1 kommt.

Wer sich trotzdem mit ARIA-DESCRIBEDAT beschäftigen will, kann auf folgendem Seitenbereich der WAI nachschauen, wo sich auch Beispiele finden lassen:

WebAIM Untersuchung zur Verwendung von Screenreadern

Bei der WebAIM Onlineumfrage 2015 unter Menschen, die mit Screenreadern arbeiten, gab es auch die Frage nach der bevorzugten Präsentation textueller Erläuterungen für komplexe Grafiken. Die Übersetzung der genauen Fragestellung 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
Antwort 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 ein Link verfügbar ist. 6,9 %
Auf einer eigenen Webseite, die von meinem Screenreader angekündigt und verfügbar gemacht wird. 5,8 %
Mein Screenreader soll das überhaupt ignorieren. 2,9 %

Interpretation

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

  • Viele Erfahrungen mit zu ungenauen oder zu umfangreichen Beschreibungen von komplexen Grafiken führen zum Wunsch, die Beschreibung nicht zu unmittelbar präsentiert zu bekommen.
  • Erfahrungen mit guten textuellen Äquivalenten für komplexe Grafiken werden gar nicht als solche wahrgenommen, sondern schlichtweg als für sich stehende, gute Informationen.

Ich plädiere daher in der Regel gute textuelle Beschreibungen unmittelbar wahrnehmbar anzubieten. Dies dient auch der leichteren Verständlichkeit der Grafiken für Menschen, die schlecht sehen, aber über keinen Screenreader verfügen oder für Menschen mit Lernbeeinträchtigungen.

Bildtypen

Bilder von Text

Leider finden sich auf Webseiten oder in Newslettern immer wieder auch Texte, die auf einer Grafik abgebildet sind. Ich habe als solche Grafiken schon Folder, Flyer und sogar Stellenausschreibungen erhalten.

Screen Reader sind auf textuelle Informationen im Code angewiesen. Eine Grafikdatei, auf der ein Folder abgebildet ist, liefert dem Screen Reader keine textuelle Information und ist daher nicht zugänglich.

Es macht auch wenig Sinn, den Text mittels longdesc parallel in einer barrierefreien Version anzubieten. Das bedeutet doppelte Arbeit und wird dann möglicherweise vom Browser und der Assistierenden Technologie gar nicht unterstützt.

Schon gar nicht darf der Text auf dem Folder in das alt-Attribut gepfercht werden, weil darin keine semantischen Kennzeichnungen für Textbereiche möglich sind. Und Folder verfügen gewöhnlich über Überschriften, Listen oder Tabellen.

Vielfach lassen sich an Stelle der Textgrafik visuelle Darstellungen eines Textes mittels CSS realisieren. Der im HTML realisierte Text ist zugänglich.

Folder und Ähnliches sollten als barrierefreie PDF-Dateien angeboten werden.

Logos

Logos erhalten in der Regel als Alternativtext die Bezeichnung der Einrichtung bzw. Marke. Wenn sich der Schriftzug der Einrichtung bzw. Marke nicht auf dem Logo befindet oder unleserlich und unbekannt ist, sollte die Bezeichnung wohl auch in einem TITLE-Attribut vorgesehen werden.

<img src="images/logo.gif" alt="Land Tirol" title="Land Tirol" />

Es ist gebräuchlich, das Logo im Bannerbereich als Grafiklink zur Startseite des Webauftritts zu verwenden. In diesem Fall scheint als Alternativtext etwa „Startseite“ angemessen.

<a href="startseite.html" > <img src="images/logo.gif" alt="Startseite" title="Startseite" /> </a>

Icons und Symbolgrafiken

Die Bedeutung von Icons kann schneller erfasst werden, als ein Text gelesen werden kann. Voraussetzung ist natürlich, dass das Icon bekannt ist. Ein Grafiklink mit einem Häuschen führt zur Startseite. Das Icon für Word vor einem Link weist darauf hin, dass es sich beim Linkziel um ein Microsoft Word Dokument handelt. Ein × - Symbol schließt ein Fenster. Ein Drucker steht für eine Druckfunktion. Diese Icons dürften allgemein bekannt sein. Doch wer weiß schon, dass ein Männchen mit ausgestreckten Armen für „Barrierefreiheit“ steht?

Beim Einsatz von Icons ist also auf deren gebräuchliche Verwendung zu achten und in der Regel ein passender Alternativtext vorzusehen. Der Alternativtext sollte redundant auch in ein TITLE-Attribut eingefügt werden, da diese teilweise in Browsern angezeigt werden, wenn sich die Maus über dem Icon befindet.

Unsere Beispielgrafik erhält daher derzeit folgenden HTML-Code:

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

Auf unseren Webseiten finden Sie eine Reihe von Symbolgrafiken, etwa für Empfehlungen, rechtliche Bestimmungen oder Seitenbereiche, die noch nicht abschließend bearbeitet sind (Baustellenschild). Diese Symbolgrafiken haben keinen rein dekorativen Charakter, sondern unterstützen das visuelle Erfassen von Seitenbereichen. Sie können ein leeres ALT-Attribut erhalten, weil sie für die nicht-visuelle Erfassung der Seitenbereiche eigentlich nicht erforderlich sind.

Pixelgrafiken und Vektorgrafiken

Pixelgrafiken sind Grafiken, die aus unzähligen kleinen Bildpunkten bestehen. Das Problem dieses Grafikformats liegt darin, dass beim Einsatz von Vergrößerungssoftware die kleinen Bildpunkte pixelweise vergrößert werden. Damit geht aber bei entsprechender Vergrößerung die Erkennbarkeit der Grafikelemente verloren.

Dieses Problem ist besonders bei Textgrafiken mehr als unangenehm. Aus diesem Grund sollten Grafiken mit Text möglichst vermieden werden. Stattdessen sollen bei speziellen Anforderungen an das visuelle Erscheinungsbild eines Textes die vielfältigen Formatierungsmöglichkeiten mittels CSS genutzt werden. Ausgenommen davon sind jedoch Logos.

In der Erstellung aufwendiger sind Vektorgrafiken. Diese werden nicht mittels einzelner Bildpunkte dargestellt, sondern jeweils für einen Bildschirm und jeweilige Größenvorgaben errechnet. Dadurch bleibt bei der Vergrößerung im Browser die Darstellungsqualität erhalten. Leider erscheint die Vergrößerung einer SVG-Grafik mittels Vergrößerungssoftware derzeit aber auch noch als Pixelvergrößerung.

Font Icons / Icon Fonts

Bedeutung von Font Icons

Font Icons sind Einzelzeichen wie Einzelbuchstaben, die jedoch nicht aus einem üblichen Zeichensatz für Schriftarten, sondern aus einschlägigen Datenbanken für Symbolgrafiken eingebunden werden können. Wie bei Schriftarten gibt es auch bei Icon Fonts kostenlose und kostenpflichtige Angebote.

Symbolgrafiken, die mittels Icon Fonts realisiert sind, übernehmen automatisch die Anweisungen für Schriftfarbe und Hintergrund aus den CSS Anweisungen. Darin unterscheiden sie sich von Pixelgrafiken oder SVG-Grafiken.

Font Awesome

Der gebräuchlichste kostenlose Icon Font ist nach meiner Wahrnehmung Font Awesome. Weil auch im Web nichts wirklich gratis ist, verwende ich diese Fontdatenbank und die erforderlichen Bootstraps aus Datenschutzbedenken noch nicht standardmäßig auf zweiterblick.at (Stand 2016). Ich freu mich jedoch auf seriöse beruhigende Hinweise.

Problembereiche von Font Icons für die Barrierefreiheit

Accessible Name für Font Icons

Font Icons , die nicht im HTML-Zeichensatz vorhanden sind, benötigen eine zugängliche Textalternative (Accessible Name). Soweit ich es sehe, lässt sich das für eine hinreichende Barrierefreiheit nur durch einen sichtbaren Text ergänzend zum Icon gewährleisten.

Rein dekorative Font Icons benötigen natürlich keinen wahrnehmbaren oder zugänglichen Text. Das ist etwa der Fall, wenn neben dem Häuschen der Text Startseite steht.

Für Screen Reader genügt es, ein aria-label einzufügen. Dies macht das Icon jedoch leider noch nicht wahrnehmbar und bedienbar für Menschen, die ohne Screen Reader alleine mit der Tastatur oder einer Spracheingabe arbeiten.

Font Icons benötigen daher nach dem aktuellen Diskussionsstand eine sichtbare textuelle Alternative, wenn sie für das Verständnis oder die Bedienung von Relevanz sind. Dann kann auch das aria-label für den Screen Reader entfallen.

HTML-Tags korrekt für Font Icons einsetzen

Es hat sich teilweise eingebürgert, Font Icons in ein <i>-Tag einzubetten. Dieses HTML-Element ist jedoch für die Kennzeichnung von kursiven Textbereichen vorgesehen. Ich habe bislang keine Probleme entdeckt, wenn ich stattdessen das semantisch neutrale <SPAN>-Element verwende.

Portraitfoto mit maximiertem Gesicht

Fotos optimieren für Menschen mit Sehbehinderungen

Menschen mit Sehbehinderungen benötigen in den meisten Fällen eine möglichst große Darstellung der relevanten Informationen. Fotos auf Webseiten haben normalerweise eine fixe Größe innerhalb der Webseite. Der Bildausschnitt sollte daher auf die wesentlichen Informationen reduziert werden. Dadurch erhalten Sehbehinderte eine optimierte visuelle Wahrnehmung.

Portraitfotos sollten daher auf wesentliche visuell wahrnehmbare Körpermerkmale reduziert werden. Das Personenfoto sollte in der Regel das Gesicht umfassen. Auf diese Weise können sich Menschen mit reduzierter Sehschärfe auf einen ersten Kontakt besser vorbereiten.

Persönliche Körpermerkmale sollten auf einem Webfoto erkennbar sein. Das klingt stigmatisierend, aber es hilft bei verringerter Sehschärfe ungemein: Körpergröße, Körperumfang oder das Sitzen in einem Rollstuhl sind einfach besser zu sehen, als Gesichtszüge.

Verantwortliche für Webauftritte sollen hier aber beruhigt werden: Dieser Tipp ist in keinen gesetzlichen Bestimmungen zu finden. In den Grafikredaktionen sollte unser Tipp jedoch im Hinterkopf bleiben.

Kontrast und Farben

Wenn Sie Grafiken farblich gestalten, sollten die Farben niemals alleinige Träger von Informationen sein. Bedenken Sie, dass es Menschen mit Beeinträchtigungen des Farbsehvermögens gibt, denen ansonsten Informationen verloren gehen. Zugegeben, das ist nicht immer restlos möglich, etwa bei Landkarten.

Die Elemente der Grafik sollten in einem ausreichenden Kontrast zueinander stehen. Der Kontrast sollte nicht nur durch die Farbwahl erzielt werden, sondern auch Helligkeitsunterschiede ausnützen.