ALT-Texte für Bilder, ein Leitfaden.
Warum ALT-Texte für Bilder wichtig sind: ein Leitfaden für barrierefreie Webseiten.
Ohne Bilder wirken Webseiten öde oder wie eine Bleiwüste. Bilder gestalten Webseiten attraktiver oder helfen beim Erklären. Was aber mit Menschen, die schlecht sehen? Hier helfen Alternativtexte oder sogenannte ALT-Texte.
Was sind Alternativtexte eigentlich?
Alternativtexte beschreiben ein Bild in kurzer und präziser Form. Sie stecken im HTML-Code und erklären Bildinhalt oder Funktion – entweder wenn ein Bild fehlt oder ein Screenreader es vorliest.
Barrierefreiheit:
Alternativtexte sind essenziell für Menschen mit Sehproblemen. Screenreader lesen den Alternativtext vor. So verstehen sie den Bildinhalt. Ein Screenreader ist eine Software, die stark sehbehinderten Menschen hilft, Dinge auf dem Computer zu sehen. Ein Screenreader zeigt sie nicht mit Bildern, sondern liest Inhalte vor. So können blinde Leute den Computer nutzen oder eine Website verstehen
Alternativtexte machen Webseiten für jeden nutzbar. So werden Kriterien für barrierefreies Webdesign eingehalten.
ALT-Texte für die Suchmaschinenoptimierung: ALT-Texte sind in der SEO ein alter Hut. Suchmaschinen können Bilder nicht erkennen. Alternativtexte helfen, den Inhalt zu verstehen. Gute Alternativtexte helfen Bildern in der Google-Bildersuche. Sie tauchen dort eher auf.
Bessere Nutzung:
Wird ein Bild wegen schlechter Verbindung oder anderer Probleme nicht angezeigt, sieht man den Alternativtext. Dadurch verstehen Nutzer den Zusammenhang des Bildes – selbst wenn es nicht vorhanden ist.
Beispiele für gute und schlechte Alternativtexte
Guter Alternativtext:
Mann am Schreibtisch
Schlechter Alternativtext:
- Bild123.jpg – sagt nichts aus.
- Mann – zu kurz oder ungenau.
- Bild von einem Mann, Bild, Schreibtisch, Büro, Office, Homeoffice– zu viele Schlüsselwörter.
Der Alternativtext sollte kurz und klar beschreiben, damit jeder den Inhalt versteht. Keine unnötigen Schlüsselwörter verwenden! Suchmaschinen sehen das als Spam.
Wann kann man Alternativtexte weglassen?
Dekorative Bilder bzw. Schmuckbilder:
Bilder, die nur Deko sind und nichts aussagen, benötigen einen leeren Alternativtext – alt=““.
Das gilt etwa für Hintergrundbilder oder Zierelemente. So erkennt der Screenreader, dass hier nichts vorgelesen werden soll.
Bilder in CSS:
Wer Bilder über CSS einfügt, benötigt kein »alt«-Attribut im HTML-Code.
Wie kann man ALT-Texte überprüfen?
Es gibt diverse SEO- und Browsertools, die schnell und übersichtlich helfen. Zwei ausgezeichnete und kostenlose Tools zur Prüfung sind silktide und Wave.
Wir sind als Agentur auf WordPress spezialisiert. Wenn Sie Fragen haben oder Beratung zur Erstellung von barrierefreien Webseiten mögen, sind wir für Sie da. Hier finden Sie Einzelheiten zum BFSG-Barrierefreiheitsstärkungsgesetz.
Autor ist Gilbert Röhrborn.
Inhaber und Gründer der Berliner Webagentur wtm-online. Ausgebildeter SEO Professional & SEM Manager und Webanalyst.