Bilder und Grafiken spielen eine wichtige Rolle bei der Art und Weise, wie wir Informationen online aufnehmen und austauschen. Sie ergänzen Texte, drücken Emotionen aus und helfen, komplexe Sachverhalte zu verstehen. Doch was passiert, wenn Bilder auf Websites nicht angezeigt werden können? Sei es aus technischen Gründen oder weil Menschen mit Sehbehinderungen sie nicht sehen können?
Hier kommt das Alt-Attribut ins Spiel. Dieser HTML-Code ermöglicht den Zugang zu Bildinhalten über aussagekräftige Textbeschreibungen. Sie werden entweder von Screenreadern vorgelesen oder auch bei Ladefehlern angezeigt. In diesem Lexikonartikel werfen wir einen Blick auf das Alt-Attribut und seine Rolle für Barrierefreiheit, Suchmaschinenoptimierung und Usererfahrung. Außerdem geben wir Dir Tipps für die Erstellung von Alt-Texten.
Was ist ein Alt-Tag/Alt-Attribut?
Als Alt-Tag oder auch Alt-Attribut wird die alternative Beschreibung eines Bildinhaltes bezeichnet. Es stellt die Eigenschaft des HTML img tag („HTML Bildelementes“) dar, in der die sichtbaren Inhalte des Bildes zusammengefasst werden.
Warum wird ein Alt-Attribut benötigt?
Das Alt-Attribut/Alt-Tag erfüllt drei wesentliche Rollen in der Accessibility, Usability und Optimierung einer Website:
1. Fehlerbehandlung
Wenn ein Bild nicht dargestellt oder geladen werden kann, wird anstelle des Bildes das Alt-Attribut angezeigt. Somit weiß der User, was auf dem Bild zu sehen wäre, wenn es richtig geladen werden würde.
2. Barrierefreiheit
Um Menschen mit Einschränkungen, wie einer Sehschwäche, die Benutzung einer Webseite zu ermöglichen, werden Screenreader benutzt. Diese lesen die alternative Beschreibung des Bildes – den Alt-Tag – vor, um dessen Inhalte zugänglich zu machen. Mehr zum Thema barrierefreies Webdesign erfährst Du im entsprechenden Lexikonbeitrag.
3. Suchmaschinenoptimierung
Um Suchmaschinen wie Google die Analyse der Inhalte einer Website zu vereinfachen, werden oft Keywords in den Alt-Tags/Alt-Attributen von Bildern platziert, da diese als Seiten-Signale zählen. Manchmal wird hier schädliches Keyword Stuffing betrieben und jeder Alt-Tag mit irrelevanten Keywords befüllt.
Unser Tipp: Bei der Befüllung des Alt-Tags sollten die für die Inhalte wichtigen Keywords sinnvoll in die Beschreibung einfließen, statt sie einfach aneinanderzureihen. Hier solltest Du mit vollständigen Sätzen, statt mit einer Aneinanderreihung von Wörtern arbeiten.
Wenn Du mehr über das Thema Bildoptimierung in der SEO erfahren möchtest, findest Du hilfreiche Infos im Lexikonbeitrag.
Wie wird das Alt-Attribut festgelegt?
In einem Html img tag wird das Alt-Attribut mithilfe der Abkürzung alt= eingeleitet und der Text wird dann in Anführungszeichen („Text“) definiert.
<img src=”/bilder/bildbeispiel.jpg” alt=”Eine Infografikrafik mit wichtigen Informationen zum Alt-Tag”>
Hinweis: Viele Content Management Systeme ermöglichen es Dir, Alt-Attribute direkt in der Bilddatenbank zu definieren. Diese Beschreibung solltest Du direkt nach dem Hochladen des jeweiligen Bildes setzen.
Häufige Fehler bei der Erstellung von Alt-Attributen
Bei der Erstellung von Alt-Texten werden oft folgende Fehler gemacht:
- Zu generische Texte: Beschreibungen wie Bild oder Foto geben dem Lesenden keinen Mehrwert. Versuche stattdessen, das Bild so detailliert wie möglich zu beschreiben.
- Keywordstuffing: Alt-Beschreibungen, die hauptsächlich aus einer Aneinanderreihung von Keywords bestehen, wirken unnatürlich und sind Menschen mit eingeschränkter Sehkraft nicht hilfreich.
Beispiele für gute Alt-Texte
Du kannst Dir merken: Gute Alt-Texte sind präzise, beschreibend und kontextbezogen. Sie sollten es Nutzer:innen, die ein Bild nicht sehen können, ermöglichen, den Inhalt zu verstehen. Hier sind einige Beispiele:
Einfaches Bild: Ein Foto eines Hundes, der im Park mit einem Ball spielt.
- Schlechtes Beispiel: Hund, Ball, Park
- Stattdessen: Ein fröhlicher Golden Retriever spielt mit einem kleinen roten Ball auf einer großen Wiese im Park.
Infografik: Eine Infografik über die Vorteile von Recycling.
- Schlechtes Beispiel: Infografik Recycling
- Stattdessen: Eine umfangreiche Infografik, die zeigt, wie Recycling die Umweltverschmutzung reduziert, Ressourcen schont und den Energieverbrauch senkt. Aus der Infografik wird ersichtlich, dass durch richtiges Recycling xy % Ressourcen eingespart werden können.
Tools und Tests
Es gibt verschiedene Tools und Methoden, mit denen Du Deine Alt-Attribute überprüfen kannst:
- Tools wie WAVE, Axe oder ahrefs können Webseiten scannen und Feedback zu fehlenden oder unzureichenden Alt-Texten geben. Als kostenloses Browser-Plug-in können wir Dir außerdem SEO META in 1 CLICK empfehlen.
- Egal, mit wie vielen Tools Du arbeitest, es gibt keinen Ersatz für die Überprüfung der Zugänglichkeit Deiner Website durch echte Menschen. Das Scannen der Webseite mit ausgeschalteten Bildern oder die Verwendung von Screenreadern kann Dir helfen, die Qualität von Alt-Texten zu überprüfen.
- Das Einholen von Feedback von Nutzer:innen mit Sehbehinderungen oder die Durchführung von Zugänglichkeitstests mit realen Nutzer:innen kann wertvolle Einblicke bieten.
Fazit: Vergiss das Alt-Attribut nicht!
Alt-Tags spielen eine wichtige Rolle in der Gestaltung zugänglicher, nutzerfreundlicher und suchmaschinenoptimierter Webinhalte. Wenn Du präzise und beschreibende Alternativtexte für Bilder bereitstellst, stellst Du sicher, dass alle Nutzer:innen, unabhängig von ihren individuellen Fähigkeiten oder technischen Einschränkungen, vollumfänglich am digitalen Leben teilhaben können.
Du benötigst Unterstützung bei der Umsetzung der Barrierefreiheit? Wir unterstützten Dich als kompetente SEO Agentur. Weitere Tipps für Deine Website bekommst Du in unserem Ratgeber und Lexikon:
- Was ist OnPage SEO?
- Wann benutzt man das hreflang-Tag?
- Warum benötigt man eine Content Strategie?
- Was ist eine Headline-Struktur?
- Warum Du Wert auf eine gute interne Verlinkung legen solltest
- Was sind mobile Endgeräte?
- Wie setzt man strukturierte Daten richtig ein?