ALT Attribute

Was sind ALT Attribute?

ALT Attribute, auch als “Alternativer Text” bezeichnet, werden innerhalb des HTML-Codes einer Webseite genutzt, um den Inhalt eines in die Webseite eingebunden Bildes zu beschreiben. Das Hinzufügen von Alternativtext zu Bildern dient in erster Linie der barrierefreien Gestaltung einer Webseite. Sehbehinderte Benutzer, die Bildschirmleseprogramme verwenden, erhalten durch die ALT Attribute Informationen zu den Bildinhalten, sodass sie verstehen können, was das Bild zeigt. Zudem helfen die alternativen Texte den Suchmaschinen, den Bildinhalt zu verstehen und ein Bild richtig zu indizieren.

Warum sind ALT Attribute wichtig?

Alternativer Bildtext ist ein Grundsatz des barrierefreien Webdesigns. Sein ursprünglicher und immer noch primärer Zweck ist die Beschreibung von Bildern für Besucher, die sie nicht sehen können. Durch die Einbindung der ALT Attribute für Bilder wird sichergestellt, dass alle Nutzer unabhängig von ihrer visuellen Fähigkeit den Inhalt einer Website weitestgehend erfassen können. Alternative Texte werden bei der normalen Nutzung einer Webse nicht angezeigt. Wird die Darstellung von Bilder im Browser blockiert, sehen Webseitenbesucher statt des Bildes den Alt-Text und können so zumindest erkennen, was das Bild zeigt.

Best-Practice für Alt Attribute

Bei Verwendung der ALT Attribute sollte auf “Bild…” als Einleitung des Textes verzichtet werden. Bildschirmleser kündigen ein Bild automatisch als Bild an. So würde ein alternativer Text “Bild eines Apfels” von einem Bildschirmleser als “Bild, Bild eines Apfels” vorgelesen werden.

Alternativer Text für informative Bilder

Wenn das Bild ein informatives Foto, eine Zeichnung oder ein Gemälde ist, muss der Alt-Text das Bild so prägnant wie möglich beschreiben. Lange Alt-Texte führen zu einer schlechten Benutzererfahrung für Benutzer von Bildschirmleseprogrammen. Wenn das Bild eine längere Beschreibung benötigt, ist es besser, das Bild im umgebenden Text zu beschreiben und einen kurzen Alternativtext bereitzustellen. Lange Beschreibungen werden zudem meist nach 125 Zeichen abgeschnitten. Wenn zum Beispiel das Bild von Bundeskanzlerin Angela Merkel in einem Artikel über die deutsche Nachkriegsgeschichte verwendet wird, sollte der ALT-Text nur kurz das Bild beschreiben. Zum Beispiel:

<img src="/images/angela_merkel.jpg" alt="Angela Merkel, deutsche Bundeskanzlerin" />
<img src="/images/reichstag.png" alt="Luftaufnahme des Reichstages in Berlin" />

ALT Attribute für dekorative Bilder

Dekorative Bilder sind Bilder, die keinem bestimmten Zweck dienen, also keine Bedeutung oder wichtige Information vermitteln sollen. In diesem Fall empfiehlt es sich, die sogenannten NULL- ALT Attribute oder einen leeren ALT-Text zu verwenden. Das ALT Attribut ist zwar immer noch vorhanden, es ist aber leer. Wenn ein Bildschirmleseprogramm auf einen leeren Alt-Text stößt, wird das Bild vollständig übersprungen, ohne dass es angekündigt wird.

Sofern kein Alt Attribut vorhanden ist, liest der Bildschirmleser stattdessen den Dateinamen für das Bild, was zu Verwirrungen führen kann. Falls ein Bild wirklich keine Bedeutung oder Informationen vermittelt und nur für Designzwecke da ist, sollte es innerhalb des CSS und nicht HTML eingebunden werden.

ALT Attribute für Bilder mit Text

Laut Web Content Accessibility Guidelines (WCAG) sollten Bilder mit Text vermieden werden. Wenn Textbilder nicht vermieden werden können, sollte der gleiche Text wie im Bild im ALT Attribut verwendet werden.

ALT Attribute bei funktionalen Bildern

Funktionale Bilder werden verwendet, um Aktionen zu initiieren, anstatt Informationen zu übermitteln. Sie werden in Schaltflächen, Links und anderen interaktiven Elementen verwendet. Der ALT-Text für das Bild sollte daher eher die Aktion, die initiiert wird, also den Zweck des Bildes als eine Beschreibung des Bildes vermitteln.

Fehlende oder leere ALT Attribute bei funktionalen Bildern verursachen erhebliche Probleme für Bildschirmleser-Benutzer, da diese Bilder für die Nutzung des Inhalts wesentlich sind. Screenreader geben normalerweise den Bilddateinamen, die Bild-URL oder die URL für das Linkziel an, was den Benutzern wahrscheinlich nicht hilft, die Aktion zu verstehen, die durch das Bild ausgelöst wird.

Unterschiede Bildtitel und ALT Attribut

Der Bildtitel wird oft mit dem ALT-Text verwechselt. Dem Benutzer wird der Text innerhalb des Bildtitels bei der Betrachtung einer Webseite normalerweise nicht angezeigt. Stattdessen wird der Titel in einem Popup angezeigt, wenn die Maus eines Benutzers über das Bild geführt wird. Die exakt gleiche Beschreibung sollte daher nicht im Bildtitel wie auch im ALT-Text verwendet werden. Dies kann als Überoptimierung angesehen werden. Der Bildtitel kann jedoch für die Einbindung einer Call-to-Action genutzt werden.

Bedeutung der ALT Attribute für die Suchmaschinenoptimierung

Die Verwendung von Alternativtext bei Bildern kann zu einer besseren Nutzererfahrung führen, kann jedoch auch dazu beitragen, ein besseres Ranking in den SERPs zu erzielen.

Obwohl die Bilderkennungstechnologie der Suchmaschinencrawler wie dem Googlebot im Laufe der Jahre erheblich verbessert wurde, können Crawler die Bilder auf einer Website-Seite immer noch nicht wie Menschen sehen. Daher ist es nicht ratsam, die Interpretation eines Bildes den Crawlern zu überlassen. Suchmaschinen verwenden die Informationen, die ihnen die ALT Attribute bieten, um die Webseite korrekt zu interpretieren und das beste Bild für eine Bildersuche zu einem bestimmten Thema auszuwählen.

Fazit

Die in den Ergebnissen der Bildersuche angezeigten Bilder werden von den Suchmaschinen anhand ihrer ALT Attribute ausgewählt und angezeigt. Zudem bieten die ALT Attribute eine weitere Möglichkeit, das Ziel-Keyword der Webseite einzubinden. Da die Keyword-Nutzung auf Webseiten immer noch als Ranking-Faktor für Suchmaschinen eine hohe Bedeutung hat, ist es im Interesse der Webseitenbetreiber, ALT Attribute zu erstellen, die sowohl das Bild beschreiben als auch ein Keyword oder eine Keyword-Wortgruppe enthalten, auf die die Webseite ausgerichtet ist. Dabei sollte jedoch auf Keyword Stuffing verzichtet werden.


Sie haben noch Fragen?

Kontaktieren Sie uns

Free Account erstellen


Weitere Inhalte