Bildschirmlesegeräte helfen Website-Besuchern mit Sehbehinderungen bei der Interaktion mit Websites, indem sie den schriftlichen Inhalt und den Alternativtext von Bildern auf einer Seite vorlesen. Der Schlüssel zu einem reibungslosen Benutzererlebnis mit unterstützenden Technologien liegt darin, sicherzustellen, dass Inhalt, Struktur und Alt-Text-Best Practices der Website durchgängig konsistent umgesetzt werden.
Das Hinzufügen von Alt-Text zu Bildern und visuellen Elementen Ihrer Websites mit entsprechenden Beschreibungen liefert den entscheidenden Kontext, den ein Bildschirmlesegerät benötigt, um die Relevanz und den Beitrag zum Online-Inhalt zu erkennen und zu erklären. Ohne Alternativtext können Bildschirmlesegeräte Bilder überspringen und lediglich Dateinamen vorlesen. Die Nutzer wissen dann möglicherweise gar nicht, dass das Bild existiert, oder sie verpassen wertvolle Informationen und Einblicke, die für das Verständnis von Konzepten oder Kernaussagen entscheidend sein könnten.
Was ist Alt-Text in HTML?
Alt-Text kann auch als "img alt attributes" oder "img alt tags" bezeichnet werden. Sie fragen sich vielleicht: "Was genau ist ein img alt-Attribut oder ein img alt-Tag?" Dabei handelt es sich um einen Text, der Menschen, die Bildschirmlesegeräte oder andere Hilfsmittel verwenden, den Kontext liefert, indem er genau, prägnant und klar definiert, was in einem Bild enthalten ist und welchen Zweck es innerhalb des Textes erfüllt. Er spielt auch bei der Suchmaschinenoptimierung (SEO) eine Rolle, um über die Bildersuche Besucher, Interesse, Leads und Engagement zu generieren und die Schlüsselwortdichte auf Ihrer Webseite zu erhöhen.
Was ist Alt-Text für Bilder, und warum ist er wichtig?
Alt-Tags für Bilder ermöglichen es jedem, der ein Bildschirmlesegerät verwendet, zu wissen und zu verstehen, was auf einer Webseite über den geschriebenen Inhalt hinaus passiert. Das Hinzufügen von Alt-Text zu Bildern dient dazu, wichtige oder interessante Informationen, die in einem Bild oder einem visuellen Format dargestellt werden, klar zu formulieren. Bei einigen Websites oder anderen digitalen Inhalten können Bilder die Hauptquelle für die gegebenen Anweisungen sein - in Form von Screenshots, Infografiken und Schritt-für-Schritt-Anleitungen. Die Zugänglichkeit von Alt-Texten gewährleistet die Einbeziehung der Nutzer bei der Navigation und Nutzung einer Website, App oder Plattform, insbesondere wenn diese reich an visuellen Schaltflächen oder bildbasierten Bildschirmen ist.
Visuelle Darstellungen und Bilder können auch mehr Einblicke oder Daten über das jeweilige Thema liefern. Zum Beispiel kann eine Datenanzeige wie ein Balkendiagramm, eine topografische Karte eines Landes oder ein Foto des Verkehrsflusses in einer Stadt für das Verständnis des Inhalts entscheidend sein. Die Zugänglichkeit von Alt-Text ermöglicht Menschen mit Sehbehinderungen den Zugang zu den Erkenntnissen mit Bildschirmlesegeräten oder Braillezeilen.
Alt-Text bei SEO
Gehen Sie online und suchen Sie in Google nach "Beispiele für Kreisdiagramme".
Diese Ergebnisse werden Sie sehen:
Die erste Antwort von Google auf die Stichwortsuche erzeugt eine Sammlung von Miniaturbildern, die Sie anklicken können, noch bevor organische Inhalte im Zusammenhang mit der Suche angezeigt werden. Die Thumbnail-Bilder werden als erste Option auf der Google SERP (Search Engine Results Page) vor dem organischen Text in den Suchergebnissen angezeigt, indem den Bildern strategisch Alt-Text hinzugefügt wird. Quellen deuten darauf hin, dass Bildminiaturen in etwa 40 % der Desktop-SERPs und 65 % der mobilen SERPs auftauchen. Das ist eine große Menge an Datenverkehr, der auf Ihre Website kommen könnte, und es könnte zu messbaren Entwicklungen wie Konversionen, Leads und erhöhtem Engagement führen.
Worum geht es dabei? Nun, Ihre Suchmaschinenoptimierung wird direkt von alternativem Text für Bilder profitieren. Die Crawler von Google durchsuchen das Web nach Schlüsselwörtern in Suchanfragen. Überlegen Sie immer, wonach Ihre Online-Nutzer online suchen könnten. Wenn Ihr Nutzer zum Beispiel nach "Beispielen für Tortendiagramme" sucht, sind das tatsächliche Bild und die Miniaturansicht vielleicht ein besserer Indikator dafür, was ideal wäre und erwartet wird. Und wenn jemand nachfragt, "wie man ein Tortendiagramm erstellt", möchte er wahrscheinlich einen Screenshot oder eine visuelle Anleitung sehen, die ihn durch den Prozess führt. Das Hinzufügen von Alt-Text zu Bildern ist daher ein direkter Beitrag zu einer besseren Suchmaschinenoptimierung und zur Einbindung der Nutzer.
Alternativtext für Bilder wirkt sich direkt auf die Suchmaschinenoptimierung aus. Die Crawler von Google scannen die Alt-Tags von Bildern, um deren Kontext auf einer Webseite besser zu verstehen und um herauszufinden, was das Bild den Website-Besuchern bietet und dazu beiträgt. Das bedeutet, dass eine Website, die diese Tags verwendet, in den Google-SERPs weiter oben rangieren kann, was das Wachstumspotenzial durch mehr Besucher mit zugänglichem Alt-Text erhöht.
Do's & Don'ts: Wann Alt-Text für Bilder verwendet werden sollte und wann nicht
Alt-Text für Bilder sollte für visuelle Elemente auf Websites verwendet werden, wie z. B.:
1. Informative Bilder
In der Regel vermitteln Bilder und Illustrationen Informationen, die für den Kontext und das Verständnis des Gesamtinhalts entscheidend sind. Die Textalternative für diese Bilder sollte die wesentlichen Informationen des Bildes enthalten und kann emotionale Implikationen vermitteln.
2. Beispiele für Alt-Text:
Wenn Sie einen Artikel über Hörbehinderungen oder Taubheit schreiben und in einem Abschnitt erklären, wie Menschen mit Hörbehinderungen lernen, sich mit Hilfe der Gebärdensprache zu verständigen, könnte ein Bild der Handhaltung oder der Gesten, mit denen das Wort "Hallo" buchstabiert wird, einen zusätzlichen Nutzen für das Verständnis der Gebärdensprache bringen. Ein informativer Alt-Text für dieses Bild stellt sicher, dass Personen mit visuellen oder kognitiven Beeinträchtigungen den gleichen kontextuellen Wert des Bildes und das Aussehen der Gebärdensprache erkennen können.
Wichtiger Hinweis: Achten Sie genau auf die Informationen und Einblicke, die das Bild in einer kurzen Menge von Worten bietet. Eine der wichtigsten Best Practices für Alt-Text ist, dass die Länge des alternativen Textes möglichst unter 125 Zeichen liegt, Leerzeichen eingeschlossen.
3. Dekorative Bilder
Sie übermitteln keine Informationen, sondern dienen nur der visuellen Gestaltung einer Webseite. Diese Art von Bildern wird von Bildschirmlesegeräten am besten übersprungen, da sie nicht zum Verständnis des begleitenden Textes oder der Informationen beitragen. Ein gutes Beispiel für ein dekoratives Bild wäre eine Blume oder eine Verzierung in der Ecke einer Seite oder ein Hintergrundbild.
Beispiele für Alt-Text von Dekorativen Bildern:
Nicht gut: Einfügen jeglicher Form von Beschreibung in den Alt-Text und Alt-Text-HTML mit Ausnahme von Null.
Gut: Dekorativer Alt-Text für Bilder sollte im Alt-Text als "null" geschrieben werden.
Denn: Bildschirmlesegeräte verschwenden die Zeit der Benutzer nicht mit der Ansage.
4. Funktionale Bilder
Wird als Schaltfläche oder Link, Symbol oder Bild verwendet, um eine Form der Funktionalität anzuzeigen, wie "Speichern", "Seite runter" und andere Funktionen bei der Interaktion mit einer Webseite.
Die Zugänglichkeit von Alternativtexten stellt in diesem Fall sicher, dass ein Benutzer mit den gleichen Funktionen wie jeder andere in Online-Räumen interagieren und navigieren kann. Der Alternativtext sollte in diesem Fall eine Beschreibung der Funktion sein, die beim Anklicken des Bildes ausgeführt wird, und nicht das, was das Bild darstellt. Zum Beispiel sollte ein Bild einer Diskette, das die Funktion "Speichern" darstellt, mit einem Alt-Text versehen werden, der das Wort "Speichern" und nicht "Disketten-Symbol" enthält.
Alt-Text-Beispiele für funktionale Bilder:
Nicht gut: Eine Diskette.
Gut: Schaltfläche "Speichern".
5. Bilder von Text
Sollten nach Möglichkeit vermieden werden, es sei denn, sie sind Bestandteil eines Logos. Wenn ein Bild verwendet wird, sollte der Alt-Text die gleichen Wörter wie das Bild enthalten.
Beispiele für Alt-Texte von Bildern
Nicht gut: Diese Art von Bild überhaupt nicht einbeziehen. Wenn es jedoch im Inhalt enthalten sein muss, wäre ein alternativer Text, der lautet: "Dieses Bild hat einen Text, der {Text hier] lautet", eine schlechte Praxis.
Gut: Genaue Wiedergabe des schriftlichen Inhalts der Wörter im Bild - "Schlamm ist braun, Äpfel sind rot, Gras ist grün".
6. Komplexe Bilder
Infografiken oder Diagramme, die einen Alt-Text haben sollten, der die in den Bildern enthaltenen Informationen beschreibt.
Beispiele für komplexe Bilder und deren Alt-Text:
In diesem Fall könnte eine Bildungsressource oder -präsentation eine Infografik oder ein Diagramm verwenden, um eine Idee zu veranschaulichen und sie visuell ansprechend zu gestalten. Es ist wichtig, die wichtigsten Punkte, die Einblicke in die Infografik oder das Diagramm bieten, zu nennen, um das Verständnis für ihre Bedeutung im Kontext der gesamten Ressource und des Inhalts zu fördern. Wenn die Infografik Text enthält, muss dieser in den Alt-Text aufgenommen werden. Nach Möglichkeit sollte der Alt-Text nicht länger als 125 Zeichen sein, was jedoch nicht bedeutet, dass der Text in der Infografik selbst nicht exakt wiedergegeben werden muss.
Nicht gut: Infografik mit Tipps für den Inhalt
Gut: Um die Ziele für den Inhalt einer Website zu erreichen und den Erfolg zu messen, sind Recherche und Zeitmanagement erforderlich.
Recherche: Es ist wichtig, dass Sie Ihr Thema vor der Erstellung des Inhalts recherchieren, um genaue Informationen und Erkenntnisse zu gewinnen. Dann können Sie mit der Planung Ihres Zeitplans in einem Kalender beginnen.
Zeit: Erstellen Sie Aufgaben und Termine in einem Kalender, in dem jeder Schritt des Prozesses festgehalten wird, der für die Erstellung der richtigen Inhalte erforderlich ist.
Ziel: Sobald Sie einen Plan haben, folgen Sie Ihrem Zeitplan und fügen Inhalte in den richtigen Bereichen Ihrer Website ein. Sie können Ihre Ziele recherchieren und beginnen, die Erfolgsquote zu messen.
7. Gruppen von Bildern
Um eine gemeinsame Botschaft zu vermitteln, sollte ein Alt-Text vorhanden sein, der die Gesamtinformation für die Gruppe von Bildern beschreibt, nicht nur für ein einzelnes Bild.
Beispiele für Alt-Texte von Bildergruppen:
Bei einer Reihe von Bildern über Bären in freier Wildbahn, ihre Überlebensfähigkeiten, die Beziehung zwischen Mutter und Jungtier und wie sie jagen, ist eine kurze, präzise Beschreibung dessen, was die Bilder insgesamt vermitteln, beim Hinzufügen von Alt-Text zu Bildern erforderlich.
Nicht gut: Bären in freier Wildbahn
Gut: Eine Bärenmutter beschützt ihre Jungen, die im Wald spazieren gehen, nach Nahrung jagen und auf Bäumen in ihrem natürlichen Lebensraum herumkrabbeln.
8. Bildkarten
Bildkarten mit mehreren anklickbaren Bereichen sollten mit einem Gruppen-Alt-Text beschrieben werden, der den Gesamtkontext der Karte angibt. Jeder anklickbare Bereich sollte auch einen eigenen alternativen Text haben, der das Ziel des Links und seinen Zweck beschreibt.
Nicht gut: Karte von (Stadt/Ort)
Gut: eine Karte von Paris mit verschiedenen Sehenswürdigkeiten und Anbietern, darunter der Arc de Triomphe und der Eiffelturm.
Alttext für Arc De Triomphe: Der Arc De Triomphe in Paris, Frankreich, ehrt französische Veteranen und gefallene Soldaten der Französischen Revolution und der Napoleonischen Kriege.
Alt test for Eiffel Tower: Der Eiffelturm ehrt das hundertjährige Jubiläum der Französischen Revolution und verkörpert die industrielle Beherrschung Frankreichs auf der Weltausstellung von 1889.
6 bewährte Praktiken zum Schreiben von Bild-Alt-Text
Das Hinzufügen von Bild-Alt-Attributen zu Bildern muss nicht einschüchternd sein. Es gibt sogar einige Apps und Dienste, die Ihnen dabei helfen, Ihre Website zu durchsuchen, und Sie darauf hinweisen, wenn ein Bild mit einem Tag versehen werden sollte, um den Prozess etwas zu vereinfachen. Dies ist besonders nützlich für Websites mit vielen Seiten. Microsoft und das W3C haben einige Best Practices für Alt-Text zusammengestellt:
1. Hinzufügen von Alt-Text zu Bildern, der die Information in den Vordergrund stellt
Ermitteln Sie, welche Funktion oder Information ein Bild vermitteln soll, um sicherzustellen, dass Sie die geeigneten Textalternativen mit den wichtigsten Informationen auswählen. Weisen Sie einem Bild keine willkürliche, vage oder mehrdeutige alternative Textbeschreibung zu, nur um Scannerwarnungen zu vermeiden oder Ihre Zugänglichkeitsbewertung zu erhöhen. Dies könnte zu Verwirrung und Frustration bei den Benutzern von Bildschirmlesegeräten führen. Die Zugänglichkeit von Alt-Texten beruht auf der Bereitstellung sinnvoller und funktionaler alternativer Möglichkeiten der Nutzbarkeit. Schlechte oder zufällige Alt-Text-Beschreibungen können schlimmer sein als gar kein Alt-Text.
2. Schreiben Sie prägnante Bildalternativtexte innerhalb der Zeichenzahl
Achten Sie darauf, dass Ihr Alt-Text kurz und prägnant ist und nach Möglichkeit nicht länger als 125 Zeichen ist, Leerzeichen eingeschlossen. Eine einfache kurze Phrase oder ein Satz reicht hier aus, es sei denn, es handelt sich um ein komplexes Bild, das mehr Erklärung erfordert.
3. Implementieren Sie ein ansprechendes Design für alternative Textbilder
Icons mit Text verlieren oft ihren Text, wenn sie auf kleineren Bildschirmen angezeigt werden. Verhindern Sie dies, indem Sie dafür sorgen, dass Icons ohne Text verständlich sind, aber auch über Textbeschreibungen verfügen.
4. Verwenden Sie beim Hinzufügen von Alt-Text zu Bildern Schlüsselwörter in angemessener Weise
Achten Sie darauf, dass die Aufnahme von Schlüsselwörtern in alternative Textbeschreibungen natürlich wirkt und zum Verständnis der Botschaft und der Schlüsselideen, die das Bild den Online-Nutzern vermitteln soll, geeignet ist. Die Algorithmen von Google sind intelligent genug, um die Relevanz von Schlüsselwörtern von einfachem Keyword-Stuffing zu unterscheiden, mit dem versucht wird, die SEO zu verbessern. Betrachten Sie den alternativen Text wie jeden anderen Inhalt, den Sie schreiben, und stellen Sie sicher, dass die Schlüsselwörter einem bestimmten Zweck dienen.
5. Verwenden Sie korrekte Zeichensetzung, Rechtschreibung und Grammatik für alternativen Text
Eine korrekte Zeichensetzung macht Informationen leichter verständlich. Achten Sie besonders auf die Wortabstände, um zu vermeiden, dass Wörter zusammenlaufen, wenn sie von einem Bildschirmlesegerät gelesen oder von Braillezeilen wiedergegeben werden. Wenn Sie dekorative Bilder ausblenden, sollten Sie auch auf die Abstände achten, wenn Sie einen leeren Alt-Text (alt="") verwenden. Wenn zwischen den Anführungszeichen ein Leerzeichen verwendet wird, kann es sein, dass Hilfstechnologien den Text trotzdem als Alt-Text erkennen, was zu Verwirrung führen kann.
6. Verwenden Sie keine unnötigen Wörter oder Informationen
Bei der Beschreibung eines Objekts oder Bildes sollten Sie darauf achten, dass Sie den Gegenstand in der Umgebung detailliert umreißen, auf Aktionen oder Interaktionen hinweisen und andere relevante Informationen angeben. Wörter wie "Bild" oder "Symbol" müssen nicht verwendet werden, da sie von Bildschirmlesegeräten angezeigt werden.
Verwenden Sie im Alt-Text keine Dateinamen oder URLs. Dies kann für Personen, die ein Bildschirmlesegerät oder Blindenschrift verwenden, verwirrend sein und liefert keine nützlichen Informationen, die einen Kontext liefern. Hilfe bei der Umsetzung und generellen Strukturierung von barrierefreien Webseiten finden Sie natürlich auch direkt bei UserWay.
Verbessern Sie die allgemeine Zugänglichkeit Ihrer Website
Wenn Sie sich noch nicht mit der Bedeutung des Alt-Textes von Bildern auf Ihrer Website befasst haben, ist es nie zu spät. Die Verbesserung der Barrierefreiheit von Webseiten durch Hinzufügen von Alt-Text zu Bildern ist einfach und jederzeit möglich.
Die KI-gestützte Zugänglichkeitslösung von UserWay kann Ihnen dabei helfen, indem sie Ihre Website auf fehlende Alt-Texte oder Verstöße, die behoben werden müssen, scannt und Ihnen gleichzeitig einen Gesamtüberblick über die Konformität Ihrer Website mit den WCAG- und ADA-Richtlinien gibt.
UserWay's Widget 4.0 kann auch nahtlos auf Ihrer Website implementiert und installiert werden, um Ihren Nutzern die Freiheit zu geben, ihre Ansicht Ihrer Website an ihre individuellen Bedürfnisse anzupassen. Um loszulegen, fordern Sie eine UserWay-Demo an oder starten Sie noch heute Ihre kostenlose Testversion unseres Widgets!
Häufig gestellte Fragen - FAQ
Was ist ein Bild-Alt-Attribut und warum ist es wichtig?
Ein Bild-Alt-Attribut stellt den Kontext für ein Bild innerhalb eines digitalen Assets oder einer Webseite dar und gibt an, wie es mit dem Text zusammenhängt oder die Informationen verbessert. Dieser Text wird Nutzern, die Bildschirmlesegeräte verwenden, vorgelesen und erscheint auf Braillezeilen, und der Alt-Text eines Bildes wird auch von Suchmaschinen wie Google indiziert. Der Alt-Text ist nicht nur wichtig, damit Ihre Benutzer auf den Inhalt Ihrer Website zugreifen können, sondern er verbessert auch die Suchmaschinenoptimierung (SEO) Ihrer Website.
Wann sollten Sie keinen Alt-Text zu Bildern hinzufügen?
Alt-Text sollte nicht für dekorative Bilder verwendet werden, die nur zu Designzwecken dienen, wie z. B. Stock-Bilder, die für den visuellen Effekt eingefügt wurden. Diese Bilder bieten keinen Kontext oder Inhalt und können verwirrend sein, wenn sie mit einem Bildschirmlesegerät vorgelesen werden. Dekorative Bilder sollten mit dem Text alt="" versehen werden, damit Bildschirmleser wissen, dass sie ein Bild überspringen sollen.
Was ist der Unterschied zwischen Alt-Text und Bildbeschreibung?
Auch wenn sie ähnlich klingen, sind alt-Text und Bildbeschreibung nicht dasselbe. Bildbeschreibungen sind detaillierter als der Alt-Text und in der Regel auch länger. Während der Alt-Text nicht länger als 125 Zeichen sein sollte, können Bildbeschreibungen bis zu 280 Zeichen lang sein.
Der Alt-Text liefert einen kurzen Kontext für ein durchschnittliches Bild, aber eine Bildbeschreibung liefert mehr Informationen, wenn dies notwendig ist, z. B. wenn es sich um ein detailliertes Diagramm, eine Grafik, eine Karte oder ein anderes Bild handelt, das mehr als den üblichen kurzen Text erfordert. So würde beispielsweise eine Karte der Vereinigten Staaten, auf der die einzelnen Bundesstaaten und einige zugehörige Daten aufgeführt sind, nicht in ein Alt-Text-Tag passen. Bildbeschreibungen werden manchmal verlinkt und nicht in das Bild-Tag selbst eingefügt. Es ist eine ausgezeichnete Idee, einfach eine echte Textbeschreibung hinzuzufügen, die für jeden im Haupttext oder als Bildunterschrift neben dem Bild sichtbar ist, wann immer dies möglich ist.
Wo finde ich weitere gute Tipps zur SEO-Optimierung für barrierefreie Webseiten?
In unserem UserWay Blog zur SEO-Optimierung zeigen wir viele weitere Möglichkeiten zur Suchmaschinenoptimierung rund um barrierefreie Webseiten.