Gute Alternativtexte schreiben

Die neue Website ist barrierefrei und nach zahlreichen Tests und Optimierungen endlich online. Dies bedeutet jedoch nicht, dass die Website dauerhaft barrierefrei bleibt. Viele Accessibility-Mängel entstehen nachträglich – nämlich auf redaktioneller Ebene. Ein Beispiel sind Alternativtexte. Erst aussagekräftige Alternativtexte helfen dem User. In diesem Blogpost verrate ich, worauf es ankommt.

Gute Alternativtexte dienen nicht nur der Accessibility, sondern auch der Suchmaschinenoptimierung. Schliesslich sind Suchmaschinen wie Google & Co. ebenfalls blind.

Was ist auf dem Bild zu sehen?

Alternativtexte stellen eine Alternative zum visuell vermittelten Inhalt dar. Ein guter Alternativtext beschreibt daher, was auf dem Bild zu sehen ist. Dies betrifft Landschafts- und Porträtbilder, aber auch Grafiken wie Organigramme oder Lagepläne.
Ein kurzer, knackiger Alternativtext genügt bereits, damit Screenreader-Anwender eine Ahnung haben, was auf dem Bild zu sehen ist. Fehlt das Alt-Attribut, wird der Screenreader den Dateinamen vorlesen – und wer kann sich unter «IMG_837495.jpg» etwas Konkretes vorstellen?

Bei komplexeren Grafiken wie zum Beispiel einem Organigramm braucht es eine längere Beschreibung. Für diese hat es im Alt-Attribut keinen Platz. In der Praxis hat es sich bewährt, auf einer Website direkt beim Bild eine ausführliche Textversion anzubieten.

Wohin führt der Link?

Während bei informativen Bildern und Grafiken der sichtbare Inhalt relevant ist, gilt für verlinkte Grafiken eine andere Regelung. Bei verlinkten Grafiken will der Screenreader-Anwender erfahren, wohin der Link führt oder welche Funktion er mit einem Klick auslöst. Ein typisches Beispiel ist das Logo auf einer Website, das zurück zur Startseite führt. Den Screenreader-Anwender interessiert nicht, ob darauf das Logo zu sehen ist. Er will wissen, wo er landet, wenn er den Link auswählt. Dasselbe gilt, wenn Dateien verlinkt sind. Der User will nicht wissen, welche Datei er herunterlädt oder öffnet.

Wann ist es sinnvoller, den Alternativtext wegzulassen?

Eine dritte Kategorie stellen so genannte Symbolbilder dar. Bilder wie zum Beispiel im Headerbereich einer Website dienen – sofern sie nicht verlinkt sind – oft nur gestalterischen Zwecken. Sie vermitteln keine Information, die für blinde und sehbehinderte Anwender relevant sein könnte. Hier empfiehlt es sich, das Alt-Attribut leer zu lassen. Wichtig ist, dass das Alt-Attribut zwar vorhanden ist, aber leer bleibt (alt=»»). Fehlt das Alt-Attribut gänzlich, wird der Screenreader wie oben beschrieben den Dateinamen vorlesen. Ist das Alt-Attribut leer, ignoriert der Screenreader das Bild, so dass sich der Benutzer auf den wesentlichen Inhalt konzentrieren kann.

Relevant oder dekorativ?

Die Frage, ob das Bild einen wichtigen Inhalt vermittelt oder ob es nur dekorativen Charakter hat, lässt sich nicht abschliessend beantworten. Im Zweifelsfall empfehle, einen Alternativtext zu vergeben. Oder du fragst eine blinde oder sehbehinderte Person nach ihrer Meinung. Denn bei allen Accessibility-Fragen gilt: Menschen mit Behinderungen sind die Experten und können daher am besten beurteilen, welche Informationen für sie relevant sind.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verarbeitet werden .