Kompatibilität:

WebSite X5 Evo und Pro ab v.2025.1

Das allererste Kriterium der WCAG-Richtlinien erfordert die Verwendung von Alternativtexten für nicht-textuelle Inhalte wie Bilder. Auf den ersten Blick mag dies wie eine einfache Aufgabe erscheinen, doch das ist nicht immer der Fall: Wie wir sehen werden, muss jeder Fall sorgfältig geprüft werden, um die beste Lösung zu finden.


In dieser Anleitung behandeln wir:


Alternativtext: Was er ist und warum er wichtig ist 

Der Alternativtext ist ein textlicher Ersatz für jegliche Art von nicht-textlichem Inhalt auf einer Webseite. Ein klassisches Beispiel für "nicht-textlichen Inhalt" sind Bilder, aber auch Videos, Animationen oder Audiodateien gehören zu dieser Kategorie – also alle Arten von multimedialen Inhalten.


Die hier erklärten Konzepte gelten für alle Arten nicht-textlicher Inhalte, aber zur Vereinfachung konzentrieren wir uns in diesem Leitfaden auf Bilder.


Im Code einer Webseite wird der Alternativtext normalerweise mit dem alt-Attribut des <img>-Elements eingefügt und ist nicht für alle Benutzer sichtbar. Tatsächlich wird der Alternativtext nur verwendet, wenn Bilder nicht richtig angezeigt werden können. Dies kann in zwei Hauptfällen auftreten:

  • Zugriff über unterstützende Technologien – Einige Nutzer greifen mit Technologien auf das Web zu, die nicht-textliche Inhalte in für sie zugänglichere Formate umwandeln. Beispielsweise verwenden blinde Nutzer Screenreader, die den Seiteninhalt vorlesen, oder Braillezeilen, die eine taktile Version des Textes bereitstellen. In solchen Fällen liest das Gerät die über den Alt-Text hinterlegte Beschreibung vor, um sehbehinderten Nutzern mitzuteilen, was auf der Seite dargestellt wird.
  • Blockierte oder fehlgeschlagene Bildanzeige – Nutzer, die sich in Regionen mit schlechter Internetverbindung befinden oder ältere Geräte verwenden, können Probleme beim Laden von Grafiken haben, insbesondere wenn diese sehr groß sind. Einige Nutzer haben möglicherweise auch absichtlich die Bildanzeige in ihrem Webbrowser deaktiviert. In solchen Fällen wird anstelle des nicht geladenen Bildes der Alternativtext angezeigt.


Neben diesen Anwendungen hat der Alternativtext noch eine weitere wichtige Funktion: Er liefert Suchmaschinen-Crawlern Beschreibungen und kontextuelle Informationen, um ihnen zu helfen, Bilder korrekt zu indexieren und zu klassifizieren.


Zusammenfassend ist der Alt-Text wichtig, weil er:

  • Die Barrierefreiheit verbessert.
  • Technische Ladeprobleme behebt.
  • Zur SEO-Optimierung von Seiten beiträgt.


WCAG-Richtlinie 1.1

Im Rahmen der WCAG-Richtlinien, die die Kriterien für die Erstellung barrierefreier Webseiten festlegen, ist die Richtlinie zur Alternativtext-Bereitstellung die 1.1 und sie ist sehr präzise: 


Richtlinie 1.1 - Stellen Sie Textalternativen für alle nicht-textuellen Inhalte bereit, damit sie in andere Formen umgewandelt werden können, die Menschen benötigen, wie z. B. Großdruck, Braille, Sprache, Symbole oder eine vereinfachte Sprache.


Für jedes Bild auf einer Seite muss also eine Textalternative bereitgestellt werden. Mit anderen Worten, jedes Bild sollte ein alt-Attribut haben, auch wenn dieses Attribut, wie wir noch sehen werden, in bestimmten Fällen leer bleiben kann (alt="" oder null).


Wie man einen effektiven Alternativtext schreibt

Nachdem wir festgestellt haben, dass jedes Bild seinen eigenen Alternativtext haben sollte, müssen wir verstehen, wie dieser geschrieben werden sollte, um seine Aufgabe korrekt zu erfüllen.


Zunächst eine Klarstellung: Ein Alternativtext ist NICHT einfach nur eine Beschreibung des zugehörigen Bildes, sondern eine textliche Alternative dazu. Das bedeutet, dass der Alternativtext gleichwertige Inhalte vermitteln und die gleiche Funktion wie das Bild erfüllen muss. Deshalb sollte er unter Berücksichtigung des Kontexts geschrieben werden, in dem das Bild erscheint. Je nach Kontext kann der Alt-Text für dasselbe Bild sehr unterschiedlich ausfallen.


Betrachten wir zum Beispiel ein Foto einer dampfenden Tasse auf einem Schreibtisch: Es könnte sich um ein rein dekoratives Bild in einem Blog-Artikel handeln, das nichts zum Text beiträgt; es könnte aber auch ein Produktfoto einer zum Verkauf stehenden Tasse in einem Online-Shop sein; oder das Produkt, das verkauft wird, könnte der Schreibtisch und nicht die Tasse sein. Nur der Kontext kann klären, welche Informationen übermittelt werden müssen und welche Funktion das Bild auf der Seite erfüllt. Sobald diese Elemente identifiziert sind, können wir bestimmen, wie sie für einen effektiven und nützlichen Alternativtext genutzt werden können.


Allgemein sollte ein guter Alternativtext:

  • Präzise und gleichwertig in der Darstellung von Inhalt und Funktion sein.
  • Kompakt sein. Inhalt und Funktion sollten so kurz wie möglich ausgedrückt werden, ohne die Genauigkeit zu beeinträchtigen. Zu lange Alternativtexte können für Screenreader-Nutzer umständlich sein: Idealerweise sollten sie 125 Zeichen nicht überschreiten, um sicherzustellen, dass sie vollständig gelesen werden.
  • Nicht redundant sein und keine Informationen wiederholen, die bereits im umgebenden Text enthalten sind. Außerdem erkennen Screenreader automatisch, dass es sich um ein Bild handelt, und geben dies mit dem Alternativtext aus: Daher ist es nicht notwendig, „Bild von“ oder „Foto von“ in den Alternativtext aufzunehmen.


Lassen Sie uns das Erklärte mit einem Beispiel in die Praxis umsetzen:


Fall 1Fall 2Fall 3Fall 4

Amelia Earhart war die erste Frau, die alleine den Atlantik überflog, und eine Pionierin der Luftfahrt. Sie gilt als Symbol für Mut und Entschlossenheit.
Amelia Earhart, Fliegerin

Amelia Earhart war die erste Frau, die alleine den Atlantik überflog, und eine Pionierin der Luftfahrt. Sie gilt als Symbol für Mut und Entschlossenheit.
Amelia Earhart, Fliegerin

Amelia Earhart war die erste Frau, die alleine den Atlantik überflog, und eine Pionierin der Luftfahrt. Sie gilt als Symbol für Mut und Entschlossenheit.
Amelia Earhart war die erste Frau, die alleine den Atlantik überflog, und eine Pionierin der Luftfahrt. Sie gilt als Symbol für Mut und Entschlossenheit.

 

In allen vier Fällen haben wir dasselbe Bild und denselben Text, aber in den Fällen 2, 3 und 4 wird eine Bildunterschrift hinzugefügt. In den Fällen 3 und 4 gibt es außerdem einen Link: in Fall 3 nur auf dem Bild, während in Fall 4 sowohl das Bild als auch die Bildunterschrift zusammen verlinkt sind. Wie variiert der Alternativtext?


Lassen Sie uns zunächst den Inhalt und die Funktion des Bildes betrachten. Der Inhalt informiert den Benutzer darüber, dass es sich um Amelia Earhart handelt, während ihre Kleidung und das Flugzeug im Hintergrund zeigen, dass sie eine Fliegerin war.


Basierend darauf könnte eine gute Lösung für das Bild in Fall 1 sein: alt="Amelia Earhart, Fliegerin".


Eine Formulierung wie „Bild der Fliegerin Amelia Earhart“ wäre redundant. Ein Screenreader würde lesen: „Bild, Bild der Fliegerin Amelia Earhart“.


Ebenso wäre ein Alternativtext wie „Amelia Earhart, Luftfahrtpionierin und erste Frau, die allein den Atlantik überquerte“ nicht korrekt, da er Informationen enthält, die nicht Teil des Bildes sind, und redundant im Vergleich zum nachfolgenden Text ist.


Kommen wir zu Fall 2: Wenn wir denselben Alt-Text wie in Fall 1 behalten würden, „Amelia Earhart, Fliegerin“, würden wir den Bildunterschriftstext exakt duplizieren und so eine Redundanz erzeugen. In diesem Fall, da der Inhalt bereits im angrenzenden Text dargestellt wird, könnte es die beste Wahl sein, den Alternativtext leer zu lassen alt="".


In Fall 3 ist das Bild ein Link, was bedeutet, dass es neben seinem Inhalt auch eine Funktion hat. Da kein angrenzender Text die Funktion des Links beschreibt, muss diese im Alt-Text vermittelt werden. Hier könnte die beste Wahl sein: alt="Amelia Earhart, Fliegerin", da die Redundanz erforderlich ist, um die Funktion des Bildes korrekt zu erklären.


In diesem Fall wäre „Der Wikipedia-Eintrag über Amelia Earhart, Fliegerin“ kein korrekter Alternativtext, da er eine andere Botschaft vermittelt als das Bild.


Ebenso wäre „Mehr lesen“ nicht geeignet, da es nicht genügend Informationen liefert und aus dem Kontext gerissen ist.


Im Vergleich zu Fall 3 ist Fall 4 zugänglicher, da Bild und Bildunterschrift im selben Link enthalten sind. In diesem Fall kann jede Redundanz vermieden werden, indem der alt="" leer gelassen wird, sodass Screenreader „Link, Bild, Amelia Earhart, Fliegerin“ lesen.


Sonderfälle: Dekorative Bilder, Schaltflächen, Logos und komplexe Bilder

Beim Verfassen von Alternativtexten für Bilder gibt es einige besondere Fälle, die erwähnt werden sollten. Beginnen wir mit dekorativen Bildern.


Ein dekoratives Bild ist ein Bild, das keine wichtigen Inhalte vermittelt, keine Funktion hat (z. B. kein Link ist) und ausschließlich für das Layout der Seite verwendet wird. Da ein solches Bild keine relevanten Informationen übermittelt, ist die beste Wahl die Verwendung eines leeren Alternativtexts alt="".


#Tipp - Unsicher, ob ein Bild als "dekorativ" betrachtet werden sollte? Stellen Sie sich die Frage, was passieren würde, wenn das Bild von der Seite entfernt würde. Wenn die Antwort lautet, dass sich nichts Wesentliches ändert, da keine Inhalte verloren gehen, können Sie davon ausgehen, dass es sich tatsächlich um ein dekoratives Bild handelt.


Ein weiterer Bildtyp, den Sie möglicherweise verwalten müssen, sind Bilder, die für Schaltflächen verwendet werden. Falls eine Schaltfläche einen Text enthält, wäre es ideal, diesen als echten Text und nicht als Bild darzustellen. Wenn die Verwendung eines Bildes jedoch unvermeidlich ist, muss ein Alternativtext bereitgestellt werden, der beschreibt, was die Schaltfläche beim Klicken bewirkt, z. B. „Suchen“, „Senden“, „Registrieren“ oder „Bestellung aufgeben“.


Viele Websites enthalten ihr Logo im Header der Seite, um nicht nur die Marke zu präsentieren, sondern auch als Link zur Startseite zu dienen. Wie sollte der Alt-Text für dieses Logo gestaltet werden? In der Regel reicht es aus, einfach den Namen des Unternehmens anzugeben: alt="Acme Company". Es ist normalerweise nicht erforderlich, das Wort „Logo“ oder den Hinweis auf die Verlinkung zur Startseite hinzuzufügen, da dies eine gängige Praxis ist. Wenn ein Screenreader „Link, Bild, Acme Company“ am Anfang einer Webseite liest, ist dies ausreichend, um zu verstehen, dass es sich um ein Logo mit einer Verlinkung zur Startseite handelt.


Schließlich kann eine Webseite ein komplexes Bild enthalten, wie z. B. ein Diagramm, eine Karte oder eine Grafik. In solchen Fällen ist es unmöglich, einen Alternativtext zu erstellen, der sowohl kurz als auch ausreichend detailliert ist. Die beste Lösung besteht darin, die Alternative nicht über das Alt-Attribut bereitzustellen, sondern durch einen begleitenden Text neben dem Bild oder über eine verlinkte Webseite.


Alt-Text und SEO

Wie bereits erwähnt, ist das Verfassen eines guten Alternativtextes nicht nur für die Barrierefreiheit einer Website wichtig, sondern auch für die SEO-Optimierung von Bildern. Google kann problemlos erkennen, dass es sich bei einer Ressource um ein Bild handelt, aber ein gut formulierter Alt-Text liefert seinen Crawlern Beschreibungen und kontextbezogene Informationen, die dabei helfen, Bilder besser zu indexieren und zu klassifizieren.


Aus diesem Grund wird das Fehlen eines Alt-Texts in jeder guten SEO-Anleitung als Fehler betrachtet.


Viele neigen jedoch dazu, den Alt-Text mit Schlüsselwörtern zu überladen, für die sie die Seite optimieren möchten. Auch diese Vorgehensweise ist nicht korrekt. Alt-Text ist NICHT der richtige Ort für Keyword-Stuffing, also das übermäßige Wiederholen bestimmter Keywords. Diese Technik wird mittlerweile von Suchmaschinen negativ bewertet. Stattdessen dient der Alt-Text dazu, das Bild für diejenigen zu beschreiben, die es nicht sehen können. Es ist wichtig, die zuvor besprochenen Richtlinien zu befolgen und, wenn möglich, Schlüsselwörter auf natürliche Weise und nur dann einzufügen, wenn sie tatsächlich relevant sind.


Der Title-Text

Sowohl für die Barrierefreiheit als auch für die SEO-Optimierung ist der Alt-Text nicht das einzige Attribut, dem Aufmerksamkeit geschenkt werden sollte: Auch der Title-Text ist zu berücksichtigen.


Der Title-Text spielt eine deutlich geringere Rolle sowohl für die Barrierefreiheit einer Seite als auch für die Optimierung eines Bildes: Die meisten Screenreader ignorieren ihn, und für das Suchmaschinenranking ist er irrelevant. Dennoch kann der Title-Text die Benutzererfahrung verbessern, indem er zusätzliche Informationen zu einem Element bereitstellt. In der Regel werden diese Informationen als Tooltip angezeigt, wenn der Benutzer mit der Maus über das Element fährt.


Generell sollte der Title-Text den Alternativtext ergänzen, aber niemals ersetzen und folglich niemals das einzige Mittel sein, um wichtige Inhalte zu übermitteln. Best Practices für die Erstellung eines effektiven Title-Texts empfehlen die Wahl eines kurzen, prägnanten und ansprechenden Satzes, der das ergänzt, was bereits im Alternativtext enthalten ist.


Verwaltung von Alternativtext in WebSite X5

Wie wir gesehen haben, behandelt die Richtlinie 1.1 die Verwaltung von Textalternativen und umfasst ein einziges Erfolgskriterium: Kriterium 1.1.1 Nicht-Text-Inhalte.


Dieses Kriterium ist in WebSite X5 integriert und wird im assistierten Modus erfüllt (siehe: In WebSite X5 implementierte Barrierefreiheitskriterien).


In der Praxis fügt WebSite X5 automatisch alternative Texte in den Code für alle grafischen Inhalte ein, die es eigenständig generiert. Dies betrifft beispielsweise die Navigationsschaltflächen in Galerien sowie Symbole und Schaltflächen in Blog-Artikel-Karten und E-Commerce-Produktlisten.


Für alle anderen nicht-textuellen Elemente (Bilder, Animationen, Videos, Audiodateien), die Sie über verschiedene Objekte oder grafische Anpassungen hinzufügen, verlangt WebSite X5 die Eingabe eines Alternativtexts. In diesen Fällen liegt es in Ihrer Verantwortung zu entscheiden, ob die Elemente als einfache dekorative Elemente betrachtet werden oder ob stattdessen ein gleichwertiger Text verfasst werden muss, der die gleiche Funktion wie der ursprüngliche Inhalt erfüllt (siehe: Barrierefreiheit von Bildern: Die Bedeutung des Alternativtextes).



Es ist wichtig zu erwähnen, dass WebSite X5, wie von den Richtlinien gefordert, vorsieht, dass rein dekorative Bilder mit einem leeren Alt-Text versehen werden.


#Tipp - Das Erfolgskriterium 1.1.1 bezieht sich auch auf Captcha. Derzeit ist das Captcha von WebSite X5 noch nicht barrierefrei; daher wird empfohlen, stattdessen Google reCaptcha zu verwenden. Siehe: Wie wählt man das zu verwendende CAPTCHA für die Website aus?