Bilder sind einer der wichtigsten Bestandteile des Webdesigns. Sie dienen dazu, Informationen zu vermitteln, große Textblöcke aufzubrechen und eindrucksvolle Darstellungen zu schaffen, die Besucher ansprechen können. Begleitend zu diesen Bildern sollte jedoch auch Alt‑Text vorhanden sein, der einen zusätzlichen Nutzen für Nutzer bietet, die sie nicht sehen können.
Bilder sind einer der wichtigsten Bestandteile des Webdesigns. Sie dienen dazu, Informationen zu vermitteln, große Textblöcke aufzubrechen und eindrucksvolle Darstellungen zu schaffen, die Besucher ansprechen können. Begleitend zu diesen Bildern sollte jedoch auch Alt‑Text vorhanden sein, der einen zusätzlichen Nutzen für Nutzer bietet, die sie nicht sehen können.
Alt‑Text beschreibt ein Bild für den Leser und vermittelt dem Betrachter ein klareres Bild davon, welche Information dargestellt wird oder welche Aktion erwartet wird. In diesem Artikel erläutern wir die Bedeutung von Alt‑Text und geben praktische Methoden zum Formulieren guter Alt‑Tag‑Beschreibungen.
Was bedeutet Alt‑Text?
Alt‑Text, oder alternative Textbeschreibung, ist ein Begriff, den Screenreader verwenden und bezeichnet die textuelle Darstellung eines Bildes. Screenreader lesen den Alt‑Text vor, um den Inhalt von Bildern für sehbehinderte Personen zu beschreiben. Alt‑Text kann für Menschen mit eingeschränktem Sehvermögen sehr hilfreich sein, da er zusätzliche Informationen darüber liefert, was auf dem Bildschirm zu sehen ist.
Oft sind Webseiten nicht barrierefrei, weil viele Designer die alternative Textbeschreibung für ihre Bilder vernachlässigen. Wenn dies geschieht, bieten Screenreader keine Beschreibung oder Information zu einem Bild, sodass es für sehbehinderte Nutzer sehr schwierig wird, den Inhalt der Seite zu erfassen.
Wie verwendet man Alt‑Text?
Es gibt keinen einheitlichen Standard für das Verfassen guten Alt‑Texts. Die Beschreibung sollte kurz und klar sein und dennoch aussagekräftige Informationen über das Bild liefern. Prägnante Alt‑Text‑Beschreibungen zu schreiben ist nicht schwierig, aber es ist unnötig, jedes Detail in Ihrer alternativen Beschreibung aufzuführen.
Das Wichtigste bei der Beschreibung eines Bildes mit Alt‑Text ist die Rolle, die das Bild auf Ihrer Website spielt. Wenn ein Bild nicht notwendig ist, um Ihre Aussage zu vermitteln, sollte es gar nicht erst verwendet werden. Redundante Bilder, die keine zusätzlichen Informationen liefern und leicht durch Text ersetzt werden könnten, lassen sich in der Regel entfernen, ohne Design oder Inhalt zu beeinträchtigen.
Falls Sie ein redundantes Bild nicht von Ihrer Seite löschen können, sollten Sie eine andere Möglichkeit finden, es zu beschreiben. Nutzen Sie ein Bild beispielsweise als Header, könnten Sie stattdessen den Text der Überschrift als Alt‑Tag verwenden. Das beeinflusst Ihr Suchmaschinenranking nicht negativ, da diese Schlüsselwörter ohnehin in der Überschrift erscheinen.
Warum ist Alt‑Text wichtig?
Die Bedeutung von Alt‑Text liegt in seiner Fähigkeit, Ihre Seite für Screenreader zugänglich zu machen. Diese werden von Personen genutzt, die Bilder auf der Seite nicht sehen können, sei es aufgrund schlechter Sehkraft oder veralteter Monitore, die keine Bilder unterstützen. Indem wir für alle Bilder Alt‑Text‑Beschreibungen bereitstellen, stellen wir sicher, dass auch diese Nutzer Ihre Website nutzen können. Die folgenden Punkte helfen dabei, seine zentrale Bedeutung schneller zu erfassen.
Barrierefreiheit
Da Alt‑Text eine alternative Möglichkeit ist, Inhalte für Nutzer mit deaktivierten Bildern zugänglich zu machen, müssen Sie ihn verwenden, um genaue Informationen bereitzustellen. Die verschiedenen Browser und Screenreader sollten dabei logisch und verständlich formulierte Beschreibungen wiedergeben.
Suchmaschinenoptimierung
Vor einigen Jahren glaubten viele Webdesigner, dass Suchmaschinen Alt‑Text nicht lesen könnten, und verwendeten deshalb lediglich die Formulierung „image (number)“. Das hilft Ihrem Seitenranking nicht, denn Suchmaschinen erkennen heute Schlüsselwörter in Bildbeschreibungen.
Design‑Konsistenz
Bildbeschreibungen sollten keine Begriffe für rein dekorative Bilder enthalten, sondern sich auf Inhalte konzentrieren, die für das Verständnis Ihrer Website relevant sind. Das hilft, ein einheitliches Design auf allen Seiten Ihrer Seite beizubehalten.
Klarheit sicherstellen
Stellen Sie sicher, dass Alt‑Tags klar formuliert sind und keine Abkürzungen oder branchenspezifischen Fachbegriffe enthalten. Sie sollten das Bild konkret beschreiben und nicht die umgebenden Informationen. So stellen Sie sicher, dass alle Nutzer Ihre Seite problemlos nutzen können, was wiederum den Traffic erhöht.
Wie sollte mein Alt‑Text aussehen?
Ohne Kenntnis des Zwecks eines Bildes ist es schwierig, den genauen Alt‑Text zu bestimmen. Fragen Sie sich: Vermittelt das Bild wichtige Informationen oder veranschaulicht es einen Punkt? Wenn ja, ist Alt‑Text notwendig und kann Ihrer Seite zusätzliche Tiefe verleihen.
Verwenden Sie Bilder rein zur Gestaltung, können Sie „image (number)“ als Alt‑Text verwenden. Das liefert jedoch keine Information über das Bild und kann seine Wirkung auf Ihrer Seite mindern.
Berücksichtigen Sie, wie wichtig das Bild für das Thema Ihrer Website ist und welche Botschaft es vermitteln soll.
Zum Beispiel:
Dient ein Bild als Logo für Ihr Unternehmen, sollte es leicht zu erkennen und schnell erfassbar sein. Es sollte außerdem einen Text enthalten, der das Bild und die Ästhetik Ihres Unternehmens vollständig beschreibt, etwa „Company X – 15 Jahre im Geschäft!“
Was bewirkt Alt bei einem Bild?
Alt‑Text ist für die Bilder auf Ihrer Seite notwendig, weil er Suchmaschinen hilft zu verstehen, was ein Bild zeigt. So können sie die Relevanz der Seiteninhalte für die Suchanfragen der Nutzer besser bewerten. Sucht ein Nutzer beispielsweise nach Informationen über Schildkröten, hilft ein Bild von Schildkröten dabei, diese Seite zu finden. Alt‑Text kann zudem wichtige Informationen über das Bild liefern, wie beispielsweise den Urheber: „Andy Warhols berühmtes Campbell’s‑Suppendosen‑Gemälde.“ Alt‑Text verbessert außerdem die Lesbarkeit Ihrer Seite.
Wie erhalte ich Alt‑Text für ein Bild?
Es gibt verschiedene Online‑Programme, die Ihnen dabei helfen können, Alt‑Text für Ihre Bilder zu generieren.
Nachdem Sie die Bilder hochgeladen haben, nehmen Sie den Originaldateinamen jedes Bildes und fügen ihn in das entsprechende Feld ein. Klicken Sie dann auf „Ok“. Dadurch werden für jedes Bild ein Titel und ein Alt‑Tag erzeugt.
Eine weitere Möglichkeit ist die Nutzung eines Online‑Tools, das beim Hochladen automatisch Alt‑Tags generiert. Diese Programme verknüpfen das Bild automatisch mit seiner Beschreibung, was praktisch ist, falls Nutzer auf Ihrer Seite das Bild nicht sehen können.
Was ist das Alt‑Attribut?
Das Alt‑Attribut wird verwendet, wenn das data‑attribute=“alt“ auf Elemente angewendet wird. Es zeigt ein kleines Informations‑Popup an, wenn Nutzer den Mauszeiger über ein Element bewegen. Das kann nützlich sein, wenn Ihre Website nicht viele Bilder enthält und Sie zusätzliche Informationen bereitstellen möchten, ohne dass Nutzer ein neues Browserfenster öffnen müssen.
Standardmäßig ist diese Funktion in den meisten Browsern deaktiviert. Wenn Sie unsicher sind, wie Sie sie aktivieren, drücken Sie gleichzeitig Strg + die Taste I. Wenn Ihr Browser diese Funktion unterstützt, erscheint ein Informationsfenster in der Nähe des oberen Bildschirmrands.
Was sollte Alt‑Text enthalten?
1. Einzigartiger, beschreibender Text
Der Text sollte für jedes Bild einzigartig sein und es spezifisch sowie transparent beschreiben. So können Screenreader den Inhalt für Nutzer, die Ihre Bilder nicht sehen können, vorlesen.
2. Korrekte Interpunktion
Achten Sie auf korrekte Interpunktion im Alt‑Text, da diese das Erscheinungsbild Ihrer Seite in verschiedenen Browsern beeinflussen kann.
3. Keine Sonderzeichen
Verwenden Sie in Ihrem Alt‑Text keine HTML‑Tags, wie Links oder Kursivierungen, da dies Screenreadern Probleme bereiten kann.
4. Dateinamen, wenn möglich
Ist das Motiv des Bildes eindeutig genug, um auch außerhalb des Kontexts Sinn zu ergeben, versuchen Sie, den Originaldateinamen in die Beschreibung aufzunehmen, damit Screenreader leichter darauf verweisen können.
Was bedeutet Alt‑Text in HTML?
Das HTML‑Tag <img> unterstützt ein Attribut zur Definition alternativen Texts für die Anzeige des Bildes.
Sie müssen die Alt‑Eigenschaft in VB oder „alt“ in HTML verwenden, um Alt‑Text zu erstellen. Sie geben sie als String ein, ohne Leerzeichen darin.
Was ist das Alt‑Attribut auf einer Website?
Das Alt‑Attribut auf einer Website listet die Schlüsselwörter auf, die in einem Alt‑Tag optimiert werden sollten.
Alt‑Attribute auf einer Website werden verwendet, wenn ein Bild nicht geladen wird oder von Nutzern nicht gesehen werden kann. Sie können auch in Verbindung mit CSS‑Designs eingesetzt werden, um Bilder anzuzeigen, wenn sie nicht verfügbar sind.
Wenn Sie möchten, dass das Alt‑Attribut Ihrer Website für Suchmaschinen optimiert ist, sollte Ihr Text relevante Schlüsselwörter enthalten, die sich auf das betreffende Bild beziehen. Diese Schlüsselwörter sollten jedoch nicht mit dem Dateinamen oder der Bildunterschrift identisch sein.
Abschluss:
Das Alt‑Attribut ist ein wesentlicher Bestandteil der SEO‑Strategie einer Website. Richtig umgesetzt hilft es sowohl Nutzern als auch Suchmaschinen‑Crawlern, sich auf Ihrer bildlastigen Seite besser zu orientieren. Wir hoffen, dass dieser Beitrag Ihnen hilfreiche Hinweise geliefert hat.
Quellen & Externe Links
Seiten, auf die Suchergebnisse verlinken (ohne interne Links):
Microsoft Edge kann jetzt Alt‑Text für Bilder im Web erzeugen – XDA Developers
March 18, 2022 –
XDA Developers
Microsoft Edge kann jetzt Alt‑Text für Bilder im Web erzeugen XDA DevelopersMicrosoft Edge kann jetzt ‘Alt Text’ zu unlabeled Bildern hinzufügen ummid.comMicrosoft Edge Screen Reader erhält Azure‑API zur Beschreibung von Bildern innerhalb des Alt‑Texts WinBuzzerMicrosoft Edge generiert jetzt automatisch Bildbeschriftungen für Screenreader The VergeMicrosoft Edge Auto Alt Text Image Feature To Help Browser Users With Low Vision—Even Blind Individuals Tech TimesView Full Coverage on Google News…
Die verborgenen Bildbeschreibungen, die das Internet zugänglich machen – The New York Times
February 18, 2022 –
The New York Times
Die verborgenen Bildbeschreibungen, die das Internet zugänglich machen The New York Times…
