Bild-Alt-Attribute werden oft mit Bildunterschriften verwechselt. Auch fragen sich viele Webseitenbetreiber immer wieder, ob diese Bild-Alt-Attribute für ihre Seiten notwendig sind.
In diesem Artikel findest du detaillierte Antworten auf diese Frage und mehr. Außerdem haben wir Informationen über die verschiedenen Arten von Bild-Alt-Attributen, ihre Verwendungszwecke und einen Bonusabschnitt über die richtige und falsche Verwendung aufgenommen.
Auf geht’s!
Was ist das Image Alt Attribut?
Ein Bild-Alt-Attribut (oder alternativer Text) bezieht sich auf Wörter, die verwendet werden, um den Inhalt eines Bildes zu beschreiben.
Wie du bereits weißt, sind Menschen mit Sehbehinderung auf Screenreader angewiesen, um Webinhalte in einem für sie verständlichen Format zu lesen und zu interpretieren. Diese Screenreader verwenden Bild-Alt-Texte, um den Inhalt von Bildern zu interpretieren. Daher muss jeder Bild-Alt-Text sinnvoll und einfach zu verstehen sein.
Bild-Alt-Attribute ersetzen auch Bilder, die entweder aufgrund einer schlechten Internetverbindung oder anderer Seitenfehler nicht angezeigt werden können.
Sind Bild-Alt-Attribute erforderlich?
Die Wichtigkeit von Bildern ist schwer zu bestreiten. Sie sorgen dafür, dass dein Inhalt visuell ansprechend ist. So werden die Leser wahrscheinlich mehr Zeit auf deiner Seite verbringen. Je mehr Zeit ein Leser auf deiner Seite verbringt, desto höher ist die Wahrscheinlichkeit, dass er deine Produkte oder Dienstleistungen kauft.
Aber hast du jemals darüber nachgedacht, was passiert, wenn die Bilder auf deiner Seite aufgrund einer schlechten Internetverbindung nicht dargestellt werden können? Oder hast du dich jemals gefragt, wie du deine Inhalte einem breiteren Publikum zugänglich machen kannst, um Menschen mit Sehbehinderungen einzubeziehen?
Das ist der Punkt, an dem Image Alt Attribute ins Spiel kommen. Bild-Alt-Attribute haben eine ganze Menge anderer Vorteile. Lass uns einen Blick auf die wichtigsten davon werfen.
- Bild-Alt-Attribute helfen, das Ranking deiner Seite durch Suchmaschinen-Crawler zu verbessern. Suchmaschinen-Crawler können Bilder nicht lesen und interpretieren. Sie verlassen sich auf die Alt-Texte, um Bilder zu interpretieren und entsprechend zu ranken. Eine hoch gerankte Seite wird wahrscheinlich mehr Leser anziehen.
- Alternativtexte geben Webnutzern auch eine kurze Beschreibung des Inhalts von Bildern, die aufgrund eines Netzwerkausfalls nicht angezeigt werden können.
- Alt-Texte erhöhen die Zugänglichkeit einer Seite, indem sie eine bessere Nutzererfahrung bieten. Du kannst nun sicher sein, dass der Inhalt deiner Seite für alle deine Leser zugänglich ist.
Bild Typen
Als allgemeine Faustregel gilt, dass jedes Bild auf deiner Seite einen Alt-Text haben sollte. Allerdings variieren die Bildposition und die Art der Alt-Attribute von Bild zu Bild. Im Folgenden findest du Beispiele für die gängigsten Bildtypen.
Informative Bilder
Informative Bilder beziehen sich auf Bilder, die Informationen über ein Produkt oder eine Dienstleistung liefern. Der Alt-Text, der für diese Art von Bildern verwendet wird, sollte die genauen Informationen, die sich auf dem Bild befinden, in wenigen Worten wiedergeben.
Dekorative Bilder
Dekorative Bilder sind solche, die keine spezifischen Informationen vermitteln. Sie werden nur wegen ihrer ästhetischen Schönheit eingefügt.
Das alt-Attribut für dekorative Bilder sollte leer sein. Dies ermöglicht es dem Screenreader, solche Bilder auszulassen, da sie für Nutzer mit visuellen Herausforderungen bedeutungslos sind.
Funktionale Bilder
Funktionale Bilder sind dazu gedacht, dich zum Handeln zu bewegen. Sie werden auch als verlinkte Bilder bezeichnet.
Der alternative Text für diese Art von Bildern sollte Informationen über die Aktion weitergeben, die ausgelöst wird, wenn der Nutzer auf das Bild klickt. Wenn das Alt-Attribut des Bildes diese Informationen nicht liefert, werden Screenreader den Zweck dieser Bilder nicht erkennen.
Text Bilder
Textbilder bestehen hauptsächlich aus Text und sollten auf deiner Seite so weit wie möglich vermieden werden. Aber in besonderen Fällen, in denen sie nicht vermieden werden können, verwende ein Bild-Alt-Attribut, das genau die gleiche Botschaft vermittelt wie das Textbild. Achte darauf, dass der Alt-Text genau die Wörter deines Textbildes enthält.
Komplexe Bilder
Komplexe Bilder beziehen sich auf Diagramme, Graphen, Karten oder andere Bilder, die nicht durch bloßes Betrachten interpretiert werden können.
Für solche Bilder sollte der Alternativtext so umfassend wie möglich sein. Wenn die Beschreibung eines Bildes nicht mit wenigen Sätzen abgeschlossen werden kann, dann sollte sie durch eine Verlinkung des Bildes zu einer ausführlicheren Definition erfolgen.
Bild-Alt-Text im Vergleich zu Bild-ARIA Role=”presentation”
ARIA ist ein Akronym für Accessible Rich Internet Applications Suite. Es definiert eine Reihe von Richtlinien, die darauf abzielen, eine bessere Benutzererfahrung zu bieten, insbesondere für Menschen mit Sehbehinderungen.
Der Hauptfokus von ARIA Roles ist es, einen besseren Zugang zu Inhalten zu ermöglichen, die mit Technologien wie HTML, Ajax, JavaScript, etc. entwickelt wurden.
Es greift nicht in die Darstellung von Elementen in Browsern ein. Ihre primäre Funktion ist es, das Benutzererlebnis für Bildschirmleser zu verbessern.
Die ARIA-Rolle = “Präsentation” kann anstelle eines leeren Alt-Textes verwendet werden, um dekorative Bilder vor Screenreadern zu verbergen. Sie wird jedoch nicht von allen Screenreadern unterstützt. Stellen Sie daher sicher, dass alle ARIA-Rollen mit dem leeren Alt-Text gepaart sind.
Weitere Bildattribute
Es gibt noch andere Arten von Bildattributen, die nicht mit Alt-Texten verwechselt werden sollten. Hier sind die zwei wichtigsten:
Das Image Attribute “Longdesc”
Longdesc ist ein Bildattribut, das es Erstellern von Inhalten ermöglicht, Bildern, die längere Beschreibungen benötigen, eine detaillierte Erklärung hinzuzufügen.
Das Text Attribute “Title”
Das title-Attribut wird verwendet, um mehr Informationen über ein Element zu geben. Diese zusätzlichen Informationen werden als Pop-up angezeigt, wenn jemand die Maus über das besagte Bild bewegt. Beachte, dass das title-Attribut nicht angezeigt wird, wenn das Bild nicht angezeigt werden kann.
Richtige und falsche Verwendungen von Alt-Attributen für Bilder
Damit du den vollen Nutzen aus der Verwendung von Alt-Beschreibungen ziehen kannst, gibt es ein paar Regeln, die du im Hinterkopf behalten solltest.
Bild-Alt-Beschreibungen sollten detailliert, aber dennoch prägnant und direkt auf den Punkt gebracht sein. Vermeide es, zu wortreich zu sein.
Alt-Text, der für komplexe Bilder verwendet wird, sollte mit einer detaillierten Beschreibung des komplexen Bildes verlinkt sein
Denke daran, dass ein leeres Bild-Alt-Attribut normalerweise von Screenreadern übersprungen wird. Stelle daher sicher, dass alle aussagekräftigen Bilder auf deiner Seite einen Alternativtext haben. Andernfalls werden sie fälschlicherweise für dekorative Bilder gehalten.
Wenn dein Bild einen Link zu einer anderen Seite enthält, solltest du sicherstellen, dass du Details darüber angibst, was die Leser erwarten können, wenn sie diesen Link auswählen.
Die Schlussfolgerung
Alt-Tags sind alternative Texte, die verwendet werden, um den Inhalt eines Bildes zu beschreiben. Sie werden verwendet, um blinden Menschen ein besseres Leseerlebnis zu bieten. Zusätzlich wird der Alt-Text angezeigt, wenn das Bild aus irgendeinem Grund unzugänglich ist.
Wie oben gesehen, sind Bild-Alt-Texte ein Must-Have für jede Seite. Sie bieten nicht nur einen besseren Zugang zu den Inhalten, sondern verbessern auch die Platzierung deiner Seite in den Suchmaschinenergebnissen.