Die WCAG-Kriterien

WCAG 1.1.1: Nicht-Text-Inhalt bei Grafiken

Zurück zu allen WCAG-Kriterien

ÜBERBLICK

Umsetzbarkeit:

Komplexität:Einfach
Dauer:Kann dauern

Wichtig für Rolle:

Redaktion

Zum WCAG-Kriterium:

Nicht-Text-Inhalt (englisch)

Worum geht's?

Alle Bilder, die wichtige Informationen vermitteln oder dazu beitragen, die Inhalte einer Website besser zu verstehen, benötigen eine Textalternative. Dazu zählen fast alle Bilder, meist auch solche, die Gefühle oder eine Stimmung transportieren.

Illustration von einem Bild, dass an den Stil von Picasso erinnert. Daneben eine Illustration von einem Roboter-Kopf, der einen Screenreader darstellt. Der Screenreader beschreibt das Bild und sagt: Ein echter Picasso!

Umsetzung

Nutze die für deine Situation passende Technik, um das Erfolgskriterium zu erfüllen.

Wichtigen Bildern Textalternativen geben
Eine Textalternative wird bei Pixelgrafiken oft über das alt-Attribut gegeben, bei SVGs meistens per aria-label oder aria-labelledby.

Eine weitere Möglichkeit, dem SVG einen Namen zu geben, ist über einen versteckten Text, der aber im DOM sichtbar ist. Mehr dazu im Artikel von Sara Soueidan: Accessible Icon Buttons.

Die Textalternative kann aber auch neben dem Bild stehen. Wenn das der Fall ist, muss die Grafik von Screenreadern versteckt werden. Mehr dazu unter WCAG 1.1.1: Nicht-Text-Inhalt bei dekorativen Grafiken.

Die Textalternative sollte so gut wie möglich die Inhalte des Bildes wiedergeben. Lerne, gute Alt-Texte zu schreiben.
WCAG-Technik(en) in Englisch:
- G94: Bereitstellung einer kurzen Textalternative für Nicht-Text-Inhalte, die dem gleichen Zweck dient und die gleichen Informationen wie der Nicht-Text-Inhalt enthält

Videos Textalternativen geben
Videos benötigen auch eine Textalternative, die kurz beschreibt, worum es in dem Video geht.

Diese kann über aria-label oder aria-labelledby gesetzt werden oder bei iFrames über das title-Attribut. Das ist zum Beispiel bei YouTube- oder Vimeo-Playern automatisch so.
WCAG-Technik(en) in Englisch:

Gruppen von Bildern Textalternativen geben
Bei Gruppen von Bildern, die fast identisch aussehen oder deren Inhalt man logisch sehr gut zusammenfassen kann, reicht es, wenn nur ein Bild einen Text im alt‑Attribut hat, der die Gruppe sinnvoll beschreibt.

Die alt-Attribute der anderen Bilder bleiben dann leer.
WCAG-Technik(en) in Englisch:
- G196: Verwendung einer Textalternative für ein Element innerhalb einer Gruppe von Bildern, die alle Elemente der Gruppe beschreibt

Anmerkungen

Hinweis: Aussagekräftige Hintergrundbilder brauchen auch Textalternativen
Auch aussagekräftige Bilder, die per CSS als Hintergrundbild eingebunden sind, benötigen eine Textalternative. Das kann über ein aria-label, einen title oder Text in der Nähe des Bildes passieren.

Wenn das Bild aussagekräftig ist, sollte es am besten nicht per CSS eingebunden werden, da es sonst auch nicht im DOM erscheint.