HTML/Multimedia und Grafiken/Grafiken/Alternativtext

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
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.

[Bearbeiten] Quellen

  1. Jan Hellbusch: Alternative Texte - Die nicht triviale Kunst der Bildbeschreibungen auf den Grund gehen
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML