Barrierefreiheit/Grafiken und Multimedia zugänglich gestalten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Bilder und multimediale Objekte wie Animationen in Canvas, Audio und Video, bzw. SVG-Grafiken bereichern eine Webseite. Trotzdem und vielmehr gerade deswegen sollten Sie diese Inhalte nach den Grundsätzen der usability (Benutzerfreundlichkeit) und accessibility Barrierefreiheit allen so weit wie möglich zugänglich machen.

alternative Beschreibungen für Bilder und Grafiken[Bearbeiten]

Beachten Sie: Die Nutzer von Screen Readern haben prinzipiell keine Möglichkeit, ein Bild oder eine Grafik zu betrachten. Ein Weg, etwas über den Inhalt der Grafik zu erfahren, ist der Alternativtext, der mithilfe des alt-Attributs jeder Grafik im HTML-Quellcode beigefügt werden sollte. Screen Reader können dann die Grafik zusammen mit dem Alternativtext ansagen. Fehlt das alt-Attribut, dann sagen einige Screen Reader Teile des Dateinamens an. Aus diesem Grund haben das alt-Attribut und Alternativtexte eine sehr wichtige Bedeutung.

Der Alternativtext muss nicht unbedingt eine ausführliche Beschreibung sein. Oft ist die Bedeutung in wenigen Worten hinreichend erklärt.[1] Gelegentlich kann es jedoch notwendig sein, eine längere Erläuterung beizufügen, etwa bei Fotos oder Karikaturen. Hier eignet sich die Einbindung der Grafik in ein figure-Element mit einer figcaption-Bildunterschrift besser als der Alternativtext. Dennoch darf auch hier nicht auf ein alt-Attribut verzichtet werden.

Das alt-Attribut ist eine Pflichtangabe.

Häufig sieht man, dass für den Alternativtext der Dateiname oder der Titel des Bildes/der Grafik verwendet wird. Der Dateiname ist allerdings in den meisten Fällen ohne jede Aussagekraft, was in geringerem Umfang auch für den Titel der Grafik gilt.

Wenn Sie Bilder als Links verwenden, sollte der Alternativtext nicht das Bild beschreiben, sondern eine Information über das Linkziel vermitteln.

Empfehlung: Verwenden Sie im Sinne der Barrierefreiheit für informative Grafiken eine kurze aussagekräftige Beschreibung des Bildes.

Damit erleichtern Sie nicht nur Menschen, die auf Screen Reader angewiesen sind, den Zugang zu Ihren Inhalten, sondern auch den Suchmaschinen. Aus demselben Grund setzen Sie für Grafiken, die keinen Inhalt vermitteln (Dekorations- oder Schmuckgrafiken) neben role="presentation" ein leeres alt-Attribut (alt=""). So ignorieren Screen Reader und Suchmaschinen die Grafik, da sie offenbar für das Verständnis der Seite nicht wichtig ist. Idealerweise werden Schmuckgrafiken nicht in das HTML eingebettet, sondern mittels CSS als Hintergrundbilder definiert (Trennung von Inhalt und Präsentation).

Empfehlung: Mit einem Validierungs-Stylesheet können Sie während der Entwicklung Ihrer Webseite überprüfen, ob alle Grafiken ein alt-Attribut besitzen.

Grafische Browser sollten den Alternativtext auch dann anzeigen, wenn die Grafik aus irgendeinem Grund nicht zur Verfügung steht.

Beachten Sie:
  • Chrome
  • Safari
Chrome und Safari zeigen den Alternativtext allerdings nicht an.


Image-Replacement[Bearbeiten]

Image-Replacement-Techniken dienen in der Regel dazu, Texte als Bild darzustellen. Grundsätzlich sollten Sie Texte immer als Text ausgeben - zahlreiche frei verfügbare Schriften erlauben inzwischen höchst individuelle typographische Gestaltungsmöglichkeiten. Bedenken Sie, dass vor allem Fantasie-Schriften oft schlecht lesbar sind.

Empfehlung: Die Verwendung von Image-Replacement-Techniken ist komplex, eine Lösung, die für alle funktioniert nicht vorhanden. Wenn irgend möglich verzichten Sie darauf!

Beschreibungen für multimediale Inhalte[Bearbeiten]

Gerade bei den „neuen“, aber mittlerweile etablierten HTML5-Elementen wie audio, canvas, object und video wird der mögliche Fallback zwischen Start- und End-Tag häufig für eine kryptische Fehlermeldung à la „Ihr Browser kann kein …!“ missbraucht.

Beispiel ansehen …
  <video src="Demofilm.mp4" autoplay controls>
    Ihr Browser kann dieses Video nicht wiedergeben.<br>
    Dieser Film zeigt eine Demonstration des video-Elements. 
    Sie können ihn unter <a href="#">Link-Addresse</a> abrufen.
  </video>
Der Text innerhalb des Elements wird nur angezeigt, falls der Browser das Video nicht darstellen kann.
Es ist empfehlenswert, diesen Text durch eine alternative Erklärung und einen Download-Link des nicht angezeigten Videos zu ergänzen.


Empfehlung: Verwenden Sie kurze, sinnvolle Beschreibungen des gezeigten Inhalts und, wenn möglich, einen Download-Link des nicht angezeigten Videos, Mediums.

alternative Inhalte für Canvas[Bearbeiten]

In HTML5 canvas wird Text gezeichnet, d.h. als Grafik und nicht als Text dargestellt. Dies ist natürlich eine Katastrophe für die Zugänglichkeit und sollte deshalb nur in Ausnahmefällen erfolgen. Alternativ sollten Sie über Kindelemente des canvas-Elements zugängliche Alternativtexte zur Verfügung stellen.

Ähnlich wie beim noscript-Element kann zwischen den beiden Tags HTML-Code notiert werden, der vom Browser angezeigt wird, falls dieser canvas-Elemente nicht unterstützt. Dies sollte aber nicht nur eine Fehleranzeige sein, dass canvas nicht unterstützt wird, sondern eine Beschreibung der nicht zu sehenden Grafik, Beschriftung oder Animation.

Diese Lösung hat(te) allerdings den Nachteil, dass die Alternativinhalte nicht mit dem canvas direkt verbunden sind. So können Events, die mit Bereichen des Canvas verbunden sind, nicht an den Fallback-Inhalt gehängt werden. Mit der addHitRegion()-Methode können solche Bereiche jetzt für beide Darstellungsformen verwendet werden. Mit der drawFocusIfNeeded(element)-Methode können diese Bereiche auch für eine Tastaturansteuerung fokussiert werden.

Metadaten in SVG[Bearbeiten]

SVG hat gegenüber Canvas den Vorteil, dass Text als Klartext gerendert und damit von Screenreadern lesbar, bzw. von Suchmaschinen auffindbar ist.

Des weiteren können Sie Grafiken mit Metadaten zusätzliche Beschreibungen hinzufügen. Neben dem schon aus HTML bekannten title-Element kann man Definitionsabschnitte, Gruppierungen und Objekte mit einem desc-Element als erstem Kindelement mit einer Beschreibung (description) erläutern.

Beispiel: zugängliche Daten in SVG
<svg> <title>Beispiele für lineare Farbverläufe</title> <defs> <desc>Hier werden die Farbverläufe definiert und über die id dann aufgerufen</desc> <linearGradient id="verlauf1" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> </defs> <text id="eins" x="10" y="10" fill="url(#verlauf1)" > von Screenreadern lesbarer Text </text> </svg>

Quellen[Bearbeiten]

  1. Jan Hellbusch: Alternative Texte - Die nicht triviale Kunst der Bildbeschreibungen auf den Grund gehen