Wie man Alt-Text schreibt und warum es wichtig ist
Alt-Text. Wir wissen, dass es etwas ist, das zu Bildern im Internet hinzugefügt werden kann, aber was ist es wirklich? Für wen ist das? Warum sollten wir uns darum kümmern? Und, vielleicht am wichtigsten, wie schreiben wir es?
Lassen Sie uns diese Fragen und mehr untersuchen!
Was ist Alt-Text?
Alt-Text oder „alternativer Text“, wie der Langformname schon sagt, ist eine schriftliche Textbeschreibung für ein Bild im Web. Es hilft, das Bild zu beschreiben, damit der Leser versteht, worum es in dem Bild geht.
Mit anderen Worten, Alt-Text ist Inhalt. Und wie jeder andere Inhalt auf Ihrer Website sollte er gut geschrieben und aufgebaut sein, bereit für den Konsum.
Warum ist Alt-Text wichtig?
Es gibt einige Situationen, in denen das Schreiben von Alt-Text und das Einfügen wohlgeformter Beschreibungen für Ihre Bilder für eine erfolgreiche Website von Vorteil sind. Sehen wir uns die verschiedenen Vorteile des Hinzufügens von Alt-Text an.
SEO
Wenn Suchmaschinen wie Google Ihre Website-Inhalte crawlen, indiziert sie den Alt-Text, der für alle auf der aktuellen Seite gefundenen Bilder eingebettet ist. Dies wird verwendet, um ein klares Bild (kein Wortspiel beabsichtigt) des bereitgestellten Inhalts zu erhalten, um genaue Suchergebnisse bereitzustellen.
Ein weit verbreitetes Missverständnis ist, dass Alt-Text nur für SEO-Zwecke gedacht ist, um den „versteckten Text“-Container zu nutzen und damit zu versuchen, das Ranking der Website in Suchmaschinen zu verbessern. Was hier beschrieben wird, ist „Keyword Stuffing“, bei dem mithilfe des Alt-Attributs so viele „Keywords“ wie möglich eingefügt werden, um in den Suchmaschinenergebnissen einen höheren Rang einzunehmen. Diese Aktion ist sehr verpönt und kann Ihr Ranking sogar senken. Es könnte auch als Missbrauch angesehen werden, da SEO nicht der einzige Grund ist, Alt-Text verfügbar zu haben, wie wir als nächstes entdecken werden.
Für sehende Benutzer
Wenn ein Bild nicht geladen werden kann, möglicherweise aufgrund einer schlechten Verbindung oder eines zu schwachen Geräts, wird stattdessen der Alt-Text des Bilds auf dem Bildschirm angezeigt. Dies hat den Vorteil, dass jemand weiß, dass ein Bild hier geladen werden sollte, aber alternativ kann er immer noch den Textinhalt konsumieren.
Für Benutzer von Hilfstechnologien
Alt-Text bietet Menschen mit Sehbehinderungen die Möglichkeit, sich an der Nutzung von Nicht-Text-Inhalten zu beteiligen. Wenn Hilfstechnologien wie ein Screenreader auf ein Bild im Web stoßen, wird der Alt-Text vorgelesen und laut angesagt. Auf diese Weise kann jemand, der sich auf diese Technologie verlässt, immer noch ein klares Verständnis dafür haben, was das Bild darstellt.
Menschen, die Hilfstechnologien verwenden und sich darauf verlassen, können am meisten gewinnen, wenn sie mit Nicht-Text-Inhalten im Web interagieren, daher ist es unerlässlich, das Schreiben von Nicht-Text-Inhalten als Priorität für Ihre Inhaltsautoren festzulegen.
So schreiben Sie Alt-Text
Das Schreiben von qualitativ hochwertigem, beschreibendem Alt-Text ist möglicherweise nicht so einfach, wie es scheint. Ein kurzer Einzeiler wie „Katze auf einer Couch“, „weiße Schuhe“ oder „Gruppe von Menschen“ reicht nicht ganz aus, um ein mentales Bild zu zeichnen.
Auf der anderen Seite ist es möglich, jemanden mit zu viel beschreibendem Text zu überfordern. Diese feine Linie der beschreibenden Präzision zu erreichen, ist so etwas wie ein Meister der Fähigkeiten.
Eine Übung zur Beschreibung von Bildern
Wenn Sie das nächste Mal alternativen Text schreiben müssen, um ein Bild zu beschreiben, versuchen Sie diese Übung:
- Wählen Sie ein Foto aus, für das Alt-Text erforderlich ist.
- Setzen Sie sich neben einen Kollegen, Freund oder ein Familienmitglied.
-
Beschreiben Sie die Bilddetails laut, ohne ihnen das Foto zu zeigen.
- Wenn es sich um eine Gruppe von Personen handelt, beschreiben Sie, wo sie sich befinden oder was sie tun.
- Wenn es ein malerischer Sonnenuntergang ist, beschreiben Sie, wie die Sonne von den umliegenden Bäumen oder Gebäuden strahlen könnte.
- Wenn es sich um ein Bild eines verkauften Produkts handelt, beschreiben Sie seine physischen Merkmale so detailliert, dass jemand den Kauf in Erwägung ziehen kann.'
-
Nachdem Sie das Bild beschrieben haben, zeigen Sie ihnen das Foto und bitten Sie sie, ihre Vorstellung mit der Realität zu vergleichen.
Damit haben Sie damit begonnen, eine Beschreibung für das Bild zu schreiben. Möglicherweise müssen Sie die Beschreibung für schriftliche Inhalte entsprechend anpassen und paaren, aber Sie sind auf dem besten Weg, hilfreichen und nützlichen Alternativtext für Ihr Bild hinzuzufügen.
Ein Beispiel
Lassen Sie uns testweise etwas Alt-Text für dieses Bild schreiben:
Für dieses Bild könnte eine genaue Beschreibung etwa so aussehen:
„Ein Paar niedrige Schuhe wird auf einem dunkelbraunen Tisch vor einer weißen Backsteinwand platziert. Die Schuhe sind größtenteils dunkelblau mit einer weißen Zwischensohle, braunen Schnürsenkeln, einer schwarzen Lasche hinten und einem weißen Futter.“
Diese Beschreibung ist ziemlich genau, aber ein wenig zu wortreich. Da wir ein Produkt beschreiben, können wir uns direkt auf die physischen Eigenschaften des Produkts konzentrieren.
Lassen Sie uns die Beschreibung auf das Wesentliche reduzieren, wie zum Beispiel:
"Dunkelblaue Low-Top-Schuhe mit weißer Zwischensohle, brauner Spitze, schwarzer Lasche hinten und weißem Futter."
Dieser Alt-Text macht den Trick; Es beschreibt das Bild auf klare und präzise Weise und überwältigt niemanden, wenn er den Inhalt aufnimmt. Die allgemeine Empfehlung lautet, Alt-Text auf etwa 100 Zeichen zu begrenzen, um die feine Linie von „gerade genug“ Inhalten zu erreichen.
Hinweis: Es sollte auch darauf hingewiesen werden, dass es nicht notwendig ist, Text wie „Bild von“ oder „Grafik von“ einzufügen, um ein Bild zu beschreiben, da Bildelemente ihre eigene semantische Bedeutung haben, die von Hilfstechnologien bekannt gegeben wird – dies wird automatisch bekannt gegeben, wenn die Screenreader interagiert mit dem Bild.
Spielt Satzzeichen eine Rolle?
Möglicherweise ist Ihnen die Verwendung von Satzzeichen in der Alternativtextbeschreibung des obigen Bildes aufgefallen. Macht dies einen Unterschied darin, wie die Bildbeschreibung jemandem vermittelt wird, der einen Bildschirmleser verwendet?
Die einfache Antwort ist, ja. Durch die Verwendung der richtigen Interpunktion wie Kommas oder Punkte hilft dies Screenreadern, das Bild in einem eher "menschlich" klingenden Ansatz zu beschreiben.
Kommas fügen eine kurze Pause zwischen der Ankündigung von Inhalten hinzu. Das Platzieren eines Punkts am Ende eines Satzes veranlasst den Bildschirmleser, „Luft zu holen“.
Wie bei jedem gut strukturierten Inhalt profitieren auch Personen, die Alt-Text mit einem Screenreader lesen, stark von der richtigen Satzstruktur.
Bilder, denen das Alt-Attribut fehlt
Beim Schreiben von HTML-Code ist es wichtig, das alt -Attribut immer in ein Bildelement einzufügen. Ohne dieses Attribut riskieren Sie, auf einige Probleme zu stoßen:
- Ohne ein
alt-Attribut gilt Ihr HTML-Markup als ungültig und kann zu einer inkonsistenten Benutzererfahrung führen - Wenn ein Screenreader auf ein
img-Element ohne dasalt-Attribut trifft, wird dersrc-Attributwert angesagt. Dies ist oft nicht hilfreich und kann als schlechte Benutzererfahrung angesehen werden.
In diesem Sinne, egal ob Sie mit Wordpress, React oder einfachem HTML arbeiten, denken Sie daran, immer das alt -Attribut einzufügen, wenn Sie ein Bild in Code einfügen.
Das Alt-Attribut im Code: HTML
Das Hinzufügen von Alt-Text zu einem Bild beim Schreiben von einfachem HTML ist eine Frage des Hinzufügens des Alt-Attributs zu einem img-Element.
Der HTML-Code für das obige Bild wäre beispielsweise:
<img src="cat.jpg" alt="A long-haired, grey and white cat with green eyes rests on a dark grey, fabric couch." />
Wenn ein Screenreader mit diesem Bild interagiert, wird der Alt-Text angesagt, um das mentale Modell bereitzustellen, das zum Verständnis des Bildinhalts erforderlich ist.
Das Alt-Attribut im Code: Markdown
Markdown ist eine Methode, um schnell und einfach strukturierte Inhalte für das Web zu schreiben und bereitzustellen.
Um Bildinhalte mit Markdown zu erstellen, müssen Sie eine neue Textzeile mit einem Ausrufezeichen beginnen, gefolgt von einem Paar eckiger Klammern, die den Alt-Text enthalten, und dann einem Paar Klammern, die den URL-Pfad zum bereitgestellten Bild enthalten .
Zum Beispiel:
Wenn der Markdown-Interpreter ausgeführt wird, um dies in HTML zu konvertieren, sieht er genauso aus und verhält sich genauso wie das vorherige HTML-Beispiel.
Wann Alt-Text enthalten sein sollte
Sie könnten versucht sein, immer eine Art Text in das alt -Attribut aufzunehmen, um den oben beschriebenen Fällen gerecht zu werden. Tatsache bleibt jedoch, dass nicht jedes Bild einen Wert für sein alt -Attribut haben sollte.
Woher wissen wir, wann wir Alt-Text für unsere Bilder einfügen müssen? Hier sind drei häufige Situationen, die zu berücksichtigen sind, wenn Alt-Text hinzugefügt oder das alt -Attribut auf leer gesetzt werden soll.
- Wenn das Bild selbst Text enthält, z. B. ein Logo oder ein inspirierendes Zitat, das in das Bild eingebettet ist, sollte der
alt-Attributwert genau mit dem sichtbaren Text übereinstimmen. - Wenn das Bild dem Artikel keinen wertvollen Inhalt hinzufügt oder an verwandten Textinhalt angrenzt, sollte der
alt-Attributwert leer gelassen werden. Dies führt dazu, dass Screenreader das Bild vollständig umgehen, da es als "dekoratives" Bild angesehen wird. - Wenn davon ausgegangen wird, dass das Bild dem Artikel Inhalt oder Wert hinzufügt, fügen Sie einen beschreibenden Alt-Text hinzu.
- Wenn sich das Bild innerhalb eines Steuerelements befindet, beschreiben Sie die Steuerelementaktion, nicht das Bild.
Es gibt noch mehr Beispiele und Situationen zu berücksichtigen. Eine umfassendere Liste finden Sie im Tutorial „ Ein alternativer Entscheidungsbaum “.
Alt-Text in Imagemaps
Imagemaps sind eine Methode, um Links oder anklickbare Bereiche auf ein Bild in HTML anzuwenden. Diese werden normalerweise mit Infografikinhalten verwendet, um mehr Informationen bereitzustellen.
Im Hintergrund werden Imagemap-Komponenten mit drei HTML-Elementen erstellt:
-
map– Das Wrapper-Element für jeden anklickbaren Abschnitt -
area– Der einzelne anklickbare Bereich -
img– Das visuelle Bild, das die Imagemap begleitet
Wir wissen bereits, dass ein Bild in HTML das alt -Attribut erfordert und bedingt eine Textalternative benötigt, um das Bild für Screenreader-Benutzer zu beschreiben. Dasselbe Konzept gilt auch für Imagemap- area , die das alt -Attribut erfordern, um den anklickbaren Bereich für Screenreader zu beschreiben.
Sozialen Medien
Wenn Sie ein Social-Media-Konto für Ihr Unternehmen betreiben, wird empfohlen, Alt-Text für enthaltene Bilder einzufügen. Schauen wir uns einige Plattformen an, um zu sehen, was sie uns zur Verfügung stellen, um uns dabei zu helfen, integrativer zu sein und auf diejenigen zu achten, die möglicherweise nicht in der Lage sind, die an Beiträge angehängten Bilder zu sehen.
Twitter verfügt über eine integrierte Methode zum Hinzufügen von Alt-Text beim Anhängen eines Bildes an einen Tweet. Dies ist eine praktische Funktion, die Sie beachten und verwenden sollten, wenn Sie ein Bild anhängen, denn ohne könnten viele Leute Ihre großartigen Inhalte verpassen!
Der Vorgang zum Hinzufügen von Alt-Text ist im Hilfeartikel von Twitter dokumentiert: „ How to make images barrierefrei für Personen “.
Facebook fügt einem Bild automatisch Alt-Text hinzu, nachdem es hochgeladen wurde. Obwohl der generierte Text meistens genau sein kann, ist er oft nicht beschreibend genug, um dieses mentale Bild zu zeichnen.
Der Vorgang zum Überschreiben des automatisch generierten Inhalts ist in Facebooks Hilfeartikel „ Wie bearbeite ich den Alternativtext für ein Foto? “ dokumentiert.
Mittel
Medium verfügt über eine eigene Methode zum Hinzufügen von Alt-Text zu Bildern. So erreichen Sie dies:
- Versetzen Sie Ihren Artikel in den Bearbeitungsmodus
- Bewegen Sie die Maus über das Bild, um es hervorzuheben, und klicken Sie dann auf das Bild
- Klicken Sie auf die Schaltfläche "Alternativtext".
- Fügen Sie Ihren alternativen Textinhalt hinzu
Hinweis: Wenn einem Bild kein alternativer Text hinzugefügt wird, enthält Medium das alt -Attribut nicht, was dazu führt, dass Screenreader den Inhalt des src -Attributs hören! Stellen Sie sicher, dass Sie aussagekräftige, nicht dekorative Bilder in Ihre Beiträge einfügen.
Instagram hat auch eine eingebaute Methode zum Hinzufügen von Alt-Text zu seinen Bildern. Die Schritte zum Hinzufügen von Alternativtext zu Ihren Beiträgen sind im Artikel „ Wie bearbeite ich den Alternativtext für ein Foto auf Instagram? “ beschrieben.
Ohne Alt-Text anzugeben, versucht Instagram, eine automatisch generierte Beschreibung einzufügen. Wie bei Facebook sind die automatischen Beschreibungen ziemlich genau, aber es fehlt ihnen an Tiefe, um das Bild wirklich zu beschreiben.
Wenn die Plattform Ihrer Wahl das Hinzufügen von Alt-Text zu Bildern offiziell unterstützt, denken Sie bitte daran, diese Funktionen immer dann zu verwenden, wenn Sie ein Foto hochladen, damit jeder teilnehmen und Spaß haben kann!
Denken Sie auch daran, beim Einbetten eines Bildes in Ihren Code oder in sozialen Medien immer das alt -Attribut einzufügen. Setzen Sie seinen Wert gegebenenfalls auf eine beschreibende und prägnante Textalternative. Auf diese Weise erstellen Sie integrative Inhalte und jeder kann teilnehmen und sich an den Bildern in Ihren Beiträgen erfreuen!
WCAG-Erfolgskriterien
Dies kommt auf 1.1.1 Nicht-Text-Inhalt zurück, der besagt:
"Alle Nicht-Text-Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die dem entsprechenden Zweck dient."