Alt-Attribute sind wichtige Bestandteile einer barrierefreien Website. Sie ermöglichen es blinde Personen und Menschen mit Seheinschränkung, den Inhalt von Bildern und anderen visuellen Elementen besser zu verstehen.
Wenn du Bilder auf deiner Website verwendest, solltest du für jedes Bild einen Alt-Text angeben. Der Alt-Text sollte eine genaue und aussagekräftige Beschreibung des Bildinhalts enthalten. Hier sind einige Aspekte, die du bei der Erstellung eines gut geschriebenen Alt-Texts beachten solltest:
- Der Alt-Text sollte den Inhalt des Bildes genau beschreiben. Dazu solltest du alle wichtigen Details des Bildes nennen, z. B. die abgebildeten Personen, Objekte oder Ereignisse.
- Der Alt-Text sollte grammatikalisch korrekt und verständlich sein. Verwende einfache und klare Sprache, damit der Alt-Text auch von Menschen mit Sprachbarrieren verstanden werden kann.
- Der Alt-Text sollte kurz und bündig sein. Der Alt-Text sollte nicht länger als 150 Zeichen sein, damit er von Screenreadern schnell und einfach gelesen werden kann.
Entscheidend ist der Kontext
Es fehlt allerdings noch das wichtigste Kriterium bei der Formulierung eines guten Alt-Textes. Es geht nämlich nicht nur darum, ein Bild zu beschreiben. Es geht darum, den Kontext oder die Intention des Autors richtig wiederzugeben. Für den Inhalt des Alt-Attributs ist also entscheidend, warum ein Bild oder eine Grafik auf einer Website eingesetzt ist.
Hier kommt dazu ein Beispiel: Bild von einer Katze, die auf einer Decke liegt
- Reine Bildbeschreibung im Alt-Text: “Eine Katze mit hellem Fell, blauen Augen und ausgestreckten Pfoten liegt auf einer Decke.”
- Bildbeschreibung mit Kontext: “Eine Katze liegt mit entspannt ausgestrecktem Pfoten auf einem Teppich. Das soll verdeutlichen, wie wichtig Phasen der Entspannung im Home Office sind.”
Ich hoffe, das Beispiel macht klar, wie wichtig der Kontext bei der Formulierung eines Alt-Attributs ist. Mache dir also immer Gedanken, was das Bild an relevanten Informationen vermitteln soll. Falls die relevanten Informationen aber bereits im Text vorkommen und das Bild nur einen dekorativen Zweck hat, solltest du das Alt-Attribut leer lassen. Damit kann ein Screenreader das Bild überspringen. Hier kommen noch Tipps für solche speziellen Fälle:
- Dekorative Bilder: Verwenden Sie ein leeres Alt-Attribut (alt=””), damit Screenreader es überspringen.
- Komplexe Bilder: Biete eine ausführliche Beschreibung im Kontext oder über einen Link an.
- Bilder als Links: Der Alt-Text sollte das Ziel des Links beschreiben, nicht das Bild selbst.
Kurze Checkliste für Alt-Attribute
Dann kommt hier noch eine kurze Checkliste für gute Alt-Attribute:
- Präzise Beschreibung: Erfassen Sie den Kerninhalt und die Funktion des Bildes.
- Kürze und Prägnanz: Idealerweise keine lange Beschreibung (max. 150 Zeichen; kann aber auch länger sein, wenn unbedingt notwendig)
- Natürliche Sprache: Verwende grammatikalisch korrekte, leicht verständliche Sätze.
- Kontext beachten: Der Alt-Text sollte zum umgebenden Inhalt passen.
- Keine Wiederholung: Vermeide “Bild von” oder “Foto von” – dies ist redundant.
- Keyword-Integration: Füge relevante Keywords natürlich ein, ohne sie zu überstrapazieren.
Alt-Attribute: bessere Barrierefreiheit und Sichtbarkeit
Der richtige Einsatz von Alt-Attributen ist ein wesentlicher Schritt zur Verbesserung der digitalen Barrierefreiheit. Dabei erhöht dies nicht nur die Zugänglichkeit deiner Website für Menschen mit Seheinschränkung, sondern verbessert auch die Suchmaschinenoptimierung (SEO). Denn die Crawler von Suchmaschinen wie Google können keine Bilder erkennen und versuchen daher visuelle Inhalte anhand der Textalternativen wie Alt-Attribute auszuwerten. Daher sind gut formulierte Alt-Attribute mit den relevanten Keywords auch wichtig für eine bessere Sichtbarkeit in den Suchmaschinen.