„Welchen Dateinamen soll Ihnen ein Bildschirmlesegerät 40 Mal am Tag laut vorlesen?“ Es ist eine etwas absurde Frage, aber genau das passiert, wenn ein aussagekräftiges Bild mit alt="image1.jpg" oder, schlimmer noch, überhaupt keinem Alt-Text übrig bleibt. Dieser Artikel ist eine praktische Anleitung zum Schreiben von Alternativtext, der tatsächlich hilft – nicht nur vorhanden, sondern gut.
Kurz gesagt – was dieser Leitfaden behandelt
Warum fehlerhafter Alt-Text fast genauso schlimm ist wie fehlender Alt-Text
Unter WCAG 1.1.1 müssen alle Nicht-Text-Inhalte eine Textalternative haben – aber die formale Anforderung ist nur die halbe Wahrheit. „image1.jpg“, „image“ oder „logo“ erfüllen technisch gesehen die Anforderung (es gibt ein Alt-Attribut), sie übermitteln jedoch keine wirklichen Informationen. Ein Benutzer eines Bildschirmlesegeräts, der die Zeichenfolge „Bild... Bild... Bild23.png“ hört, ist nicht weniger frustriert als ein sehender Benutzer, der eine Reihe leerer Rahmen betrachtet.
So schreiben Sie guten Alt-Text
Die Leitregel: Beschreiben Sie die Botschaft des Bildes in dem Kontext, in dem es erscheint, und nicht in einer wörtlichen Beschreibung dessen, was Sie sehen. Ein Foto von Personen an einem Tisch in einer Teambesprechung, das einem Artikel über Zusammenarbeit beiliegt, könnte mit „Team arbeitet gemeinsam an einem Tisch“ versehen werden – und nicht mit „Foto von Personen“. Beschreiben Sie für ein Diagramm oder eine Grafik die Erkenntnisse, die das Diagramm vermittelt: „Balkendiagramm, das einen Umsatzanstieg von 40 % im dritten Quartal zeigt“ ist deutlich besser als „Balkendiagramm“.
- Kurz und zielgerichtet – normalerweise reichen 1–2 Sätze; Es ist nicht nötig, jedes visuelle Detail zu beschreiben.
- Überspringen Sie „Bild von“ oder „Bild von“ – der Bildschirmleser kündigt bereits an, dass es sich um ein Bild handelt, sodass keine Wiederholung erforderlich ist.
- Berücksichtigen Sie den umgebenden Text – dasselbe Bild kann in verschiedenen Kontexten unterschiedlichen Alternativtext erhalten.
Wann Alttext absichtlich leer bleiben sollte
Nicht jedes Bild benötigt eine Beschreibung. Rein dekorative Bilder – grafische Trennlinien, Hintergrundillustrationen, Symbole, die nur Text in der Nähe wiederholen – werden am besten mit getaggtalt=""(leerer Alternativtext, fehlt nicht), sodass der Bildschirmleser sie vollständig überspringt. Der Unterschied zwischen „fehlend“ und „absichtlich leer“ ist entscheidend: Fehlen klingt wie ein Fehler oder liest den Dateinamen vor; absichtlich leere überspringt es einfach stillschweigend.
💡 Praxistipp
Ein kurzer Test: Wenn Sie das Bild vollständig von der Seite löschen würden, würde einem Benutzer, der es nicht sehen kann, etwas fehlen? Wenn nicht, ist es wahrscheinlich dekorativ und passt zu einem leeren Alt.
Was mit komplexen Diagrammen und Schaubildern zu tun ist
Für ein komplexes Datendiagramm, eine illustrierte Vergleichstabelle oder eine Infografik mit mehreren Informationsebenen reicht ein kurzer Alternativtext nicht aus – es müssen zu viele Informationen übermittelt werden. Die Lösung: kurzer Alt-Text, der das allgemeine Thema beschreibt, daneben (im regulären Text rund um das Bild, nicht nur im Alt-Attribut) eine detailliertere Beschreibung der wichtigen Daten oder eine gleichwertige Datentabelle, in der ein Screenreader navigieren kann.
Sie sind sich nicht sicher, welcher Alt-Text auf Ihrer Website fehlt oder problematisch ist?
Unser Tool findet Bilder ohne Alternativtext in jedem Dokument auf Ihrer Website und kennzeichnet sie nach Priorität.
Machen Sie Ihre Dokumente kostenlos zugänglich ←