Fehlende oder unbrauchbare Alternativtexte sind der häufigste Barrierefreiheits-Befund im Web, und zugleich der am leichtesten zu behebende: Es braucht kein Budget und keinen Entwickler, nur eine klare Regel und ein wenig Disziplin beim Einpflegen. Beides liefert diese Seite.
Die eine Entscheidungsregel
Vor jedem Bild steht dieselbe Frage: Welche Information ginge verloren, wenn das Bild fehlte?
Ginge nichts verloren, ist das Bild dekorativ und bekommt einen leeren Alternativtext. Leer heißt: das Attribut ist vorhanden und leer (alt=""). Damit überspringen Hilfsmittel das Bild wortlos. Das ist die richtige Behandlung für Stimmungsbilder, Hintergrundmotive, Trennlinien und Symbole, deren Bedeutung direkt daneben als Text steht.
Ginge etwas verloren, ist das Bild informativ, und der Alternativtext liefert genau diese Information. Nicht mehr, nicht weniger.
Der häufigste Systemfehler ist das fehlende Attribut: Dann erfinden Hilfsmittel eine Beschreibung aus dem Dateinamen, und der Nutzer hört “IMG unterstrich zwanzig dreiundzwanzig unterstrich final Punkt jpg”. Das ist schlechter als jede der beiden richtigen Varianten.
Formeln für gute Alt-Texte
Für die informativen Bilder haben sich drei einfache Muster bewährt:
Objekt plus relevantes Detail. Beschreiben, was zu sehen ist, mit dem Detail, auf das es im Kontext ankommt. “Weißes Ledersofa mit drei Sitzplätzen, Seitenansicht” auf einer Produktseite. “Das Team vor dem Firmengebäude, acht Personen” auf der Über-uns-Seite.
Funktion statt Aussehen bei verlinkten Bildern. Dient ein Bild als Link oder Schaltfläche, beschreibt der Alt-Text das Ziel, nicht das Motiv: “Zur Startseite” für das verlinkte Logo, “Produktdatenblatt herunterladen” für das PDF-Symbol. Der Nutzer entscheidet anhand des Textes, ob er klickt.
Bildtyp benennen, wo er die Erwartung prägt. Bei Screenshots, Illustrationen, Karten oder historischen Fotos gehört der Typ an den Anfang: “Screenshot: Einstellungsdialog mit aktivierter Zwei-Faktor-Anmeldung”. So weiß der Hörer, was für eine Art Abbild folgt.
Drei Formulierungsregeln dazu: Kein “Bild von” oder “Foto von” am Anfang, denn dass es ein Bild ist, kündigt das Hilfsmittel selbst an. Keine Wiederholung der Bildunterschrift, die wird ohnehin gelesen. Und keine Keyword-Ketten; der Text wird Menschen vorgelesen und muss als Satz funktionieren.
Die Sonderfälle
Logos. Das Firmenlogo trägt den Firmennamen als Information: alt gleich Firmenname. Ist es verlinkt, gilt die Funktionsregel: “Zur Startseite” oder beides, “Firmenname, zur Startseite”.
Diagramme und Infografiken. Ein Alternativtext kann ein Diagramm nicht ersetzen, er kann es nur zusammenfassen: “Balkendiagramm: Umsatz wächst von 2022 bis 2025 von 1,2 auf 2,8 Millionen Euro”. Die vollständigen Daten gehören als Tabelle oder Fließtext auf die Seite. Das hilft allen Lesern, nicht nur denen mit Screenreader.
Text im Bild. Wenn sich Text im Bild nicht vermeiden lässt, etwa bei einer zitierten Anzeige, muss der Alternativtext den vollständigen Text wiedergeben. Die bessere Lösung bleibt, Text gar nicht erst in Bilder zu setzen, siehe WCAG-Grundlagen.
Produktbilder im Shop. Jedes Bild mit eigener Information braucht einen eigenen Text: Die Frontansicht, die Detailaufnahme des Reißverschlusses und die Maßtabelle als Bild sind drei verschiedene Informationen. Identische Zusatzbilder ohne neue Information dürfen leer bleiben. Für Shops ist das Pflege-Thema Nummer eins, siehe Barrierefreier Onlineshop.
Icons neben Text. Ein Symbol neben einer gleichlautenden Beschriftung ist dekorativ: Das Telefonsymbol neben dem Wort “Telefon” bekommt einen leeren Alt-Text, sonst hört der Nutzer “Telefon Telefon”.
Karten und Anfahrtsskizzen. Alt-Text mit der Kernaussage (“Karte: Standort am Marktplatz 3, Ecke Hauptstraße”) plus die Adresse als Text daneben, denn die Karte selbst ist für viele Nutzergruppen ohnehin unzugänglich.
Umsetzung im CMS und im Prozess
Jedes verbreitete System hat ein Feld für den Alternativtext, und fast überall wird es beim Hochladen übersprungen. Drei Handgriffe machen daraus einen Prozess:
- Beim Hochladen ausfüllen, nicht später. Später heißt nie. In der Mediathek gepflegte Texte werden in den meisten Systemen beim Einfügen übernommen und müssen dann nur im Kontext geprüft werden.
- Kontext schlägt Mediathek. Dasselbe Foto kann auf der Team-Seite (“Porträt von Geschäftsführerin Anna Beispiel”) anders beschriftet sein als im Blogbeitrag, wo es dekorativ ist. Systeme, die den Text pro Einbindung überschreiben lassen, nutzen.
- Bestand mit Werkzeug prüfen. Automatische Prüfwerkzeuge finden fehlende Alt-Attribute zuverlässig, gefundene Texte prüft man von Hand auf Sinn. Der Ablauf steht in Barrierefreiheit testen.
Für angehängte Dokumente gilt das Thema übrigens weiter: Auch Abbildungen in PDF-Dateien brauchen Alternativtexte, siehe Barrierefreie PDF.
Der Schnelltest für vorhandene Texte
Eine Seite aufrufen, Bilder gedanklich ausblenden und nur die Alternativtexte lesen. Drei Fragen: Erfährt man alles, was die Bilder mitteilen? Hört man nichts doppelt? Und klingt es nach Sprache statt nach Stichwortliste? Wer alle drei mit Ja beantwortet, ist mit diesem Kriterium fertig, und zwar mit dem meistgeprüften von allen.