Barrierefreiheit dank SEO-Maßnahmen: Ein Rezept für gute Bildbeschreibungen
ADZINE Redaktion, 17. Februar 2020Schließen Sie Ihre Augen. Stellen Sie sich vor, jemand liest Ihnen den Text Ihrer Website laut vor. Einige Sätze oder Passagen werden mit großer Wahrscheinlichkeit keinen Sinn ergeben, weil sie Lücken aufweisen, Zusammenhänge und Übergänge holprig sind und vor allem Bilder zum besseren Verständnis und der Orientierung fehlen. Will man dieser inhaltlichen Barrieren senken, stehen Textgrafiken, Bilder und ihre Erläuterungen ganz oben auf der Checkliste. Um Inhalte richtig wiederzugeben und ein vollständiges Bild zu vermitteln, sind insbesondere die sogenannten Alt-Texte ein entscheidender Faktor auf dem Weg zur Barrierefreiheit auf der Website.
Dabei sind Alt-Texte nicht nur wichtig für Menschen mit Einschränkungen – sie vermitteln wie auch Bilder eine bessere User Experience, schaffen aussagekräftigere Informationen und sorgen ebenfalls für erfolgreichere Suchmaschinenoptimierung von Websites. Auch Google ist „blind“ und bezieht zusätzliche Informationen wie Alt-Texte mit in die Bewertung der Relevanz einer Website ein. Je besser die Alt-Texte sind, desto mehr relevante zusätzliche Informationen findet Google, was wiederum die Sichtbarkeit bei Suchenden erhöht.
Da Alt-Texte die Funktion von Bildern übernehmen, müssen sie exakt beschreibend und aussagekräftig sein. Gute Alt-Text sollten ein Bild genau und anschaulich wiedergeben. Folgende Punkte helfen bei der Umsetzung.
1. Überlegen Sie, welchen Zweck ein Bild erfüllt
Bilder sind dazu da, Geschichten zu erzählen, Inhalte zu veranschaulichen oder Informationen darzustellen. Überlegen Sie, welchen Zweck Ihr Bild erfüllen soll. Erweitert Ihr Bild den Inhalt eines Artikels? Wenn ja, überlegen Sie, wie Sie eine solche Ergänzung in Wort fassen könnten.
Wenn ein Bild Informationen vermittelt, die Sie ohne Anschauen des Bildes nicht erhalten würden, dann muss der Alt-Text diese Inhalte wiedergeben. Denken Sie daran, dass Alt-Texte als direkter, schriftlicher Ersatz für ein Bild dienen.
Betrachten wir als Beispiel die Website einer Universität. Die Seite "Studentenleben" enthält ein Foto von Studenten, die eine Gruppenarbeit bearbeiten. Ohne das Bild zu sehen, beschreibt der Alt-Text: "Studenten mit Notebooks". Diese Angabe gibt den Zweck des Bildes nicht vollständig wieder.
Genauer wäre die Beschreibung: Das aktuelle Bild zeigt drei Studenten, die an einem Picknicktisch sitzen und gemeinsam an einer Hausaufgabe arbeiten. In diesem Fall könnte eine bessere Beschreibung lauten: "drei Studenten bearbeiten gemeinsam eine Hausaufgabe im Freien". Der Zweck dieses Bildes ist es, ein Bild vom Campusleben und einer entspannten Studienatmosphäre darzustellen, weshalb eine extreme Vereinfachung des Bildes in der Beschreibung des Alt-Textes den eigentlichen Zweck verfehlt.
2. Beschreiben Sie, wer, wo und was das Bild veranschaulicht
Beantworten Sie die Frage: „Wer tut was wo?“. Wenn eine relevante Farbe im Bild vorkommt, erwähnen Sie diese. Der Alt-Text, der zum Beispiel beschreibt, dass "eine feine Dame trägt eine rote Designer Handtasche" trägt, ist genauer und präziser als eine Beschreibung wie: "Frau mit Tasche". Gestalten Sie Ihre Formulierungen präzise und informativ. Vermeiden Sie es, "Bild von" oder "Darstellung von" zu schreiben, denn Screenreader melden ein Bild automatisch als Bild. Ein alternativer Text, der als "Bild eines Apfels" formuliert ist, wird deshalb von einem Bildschirmleser als "Bild, Bild eines Apfels" vorgelesen. Wenn es sich bei dem Bild um eine Illustration oder eine technische Zeichnung mit wichtigen Informationen handelt, ist es in Ordnung, dies anzugeben. Generell sollten Alt-Texte nicht verwendet werden, um irrelevante Details zu beschreiben.
3. Stellen Sie das Bild in den jeweiligen Kontext
Verdeutlichen Sie sich den Kontext, in dem ein Bild steht. Eine Website mit Inhalten zu Social Media-Tipps kann zum Beispiel Abbildungen eines Veröffentlichungsplans enthalten. Schreiben Sie den Alt-Text so, dass die Beziehung des Bildes zum Kontext verdeutlicht wird. Die Erstellung von Alt-Texten zum Lesen von "Kalender" ist weniger wertvoll als die Beschreibung des Bildes als "Social Media Kalender".
4. Verwenden Sie Keywords — sofern diese sinnvoll sind
Beziehen Sie nur wichtige Keywords mit ein, wenn diese im Bezug auf den Kontext sinnvoll sind. Suchmaschinen durchsuchen Inhalte Ihrer Seiten nach Keywords – einschließlich Ihrer Alt-Texte. Das bedeutet, dass es Sinn ergibt, ein Ziel-Keyword hinzuzufügen, sofern dieses korrekt und relevant ist. Optimieren Sie also Alt-Tags, um Ihre Relevanz bei Google und anderen Suchmaschinen zu verbessern.
5. Gestalten Sie beschreibende Ziel-Links
Sollte das Bild als Link dienen, beschreiben Sie, wohin dieser Link führt. In diesem Fall sollte Ihr Alt-Text den Zweck und das Ziel des Bildes und nicht das Bild selbst beschreiben.
6. Lassen Sie Beschreibungen für dekorative Bilder weg
Wenn ein Bild einen rein dekorativen Zweck erfüllt, geben Sie am besten keine Beschreibung an. Lassen Sie jedoch ein leeres Alt-Textfeld (alt=""). Screenreader ignorieren diese Tags und springen zum nächsten relevanten Inhalt.
7. Bleiben Sie präzise
Lange Alt-Texte können zu einer schlechten User Experience für Nutzer von Screenreadern führen. Halten Sie deshalb Beschreibungen so präzise wie möglich – aber liefern Sie dennoch ein vollständiges Bild.
Vergessen Sie dabei nicht: Ihre Website muss sich vollständig mit all ihren textlichen und bildlichen Informationen vorlesen lassen und ein schlüssiges Bild ergeben. Dann sind sie auf einem guten Weg zur Barrierefreiheit und tun gleichzeitig etwas für die Sichtbarkeit in der Google-Suche.
Dieser Artikel ist in Zusammenarbeit mit Siteimprove entstanden.