Die WCAG-Kriterien

1.1.1 Nicht-Text-Inhalt: 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 gehts?

Jedes Bild, das Informationen vermittelt oder dazu beiträgt, die Inhalte deiner Seite besser zu verstehen, benötigt einen Alternativtext bzw. eine Textalternative (zum Beispiel neben dem Bild) für Screenreader.

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

Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.

Aussagekräftige Bilder haben Textalternativen
Bilder, die einen Sinn haben, benötigen eine Textalternative. Dazu zählen fast alle Bilder, auch die, die nur „Gefühle“ oder eine „Stimmung“ transportieren.

Achtung: Als Textalternative zählen auch ein Text, der neben dem Bild steht. Es muss also kein Text im Alt-Attribut (Alt-Texte) sein.
WCAG-Technik(en) in Englisch:
- Technik 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 haben eine Textalternative
Videos benötigen auch eine Textalternative, die kurz beschreibt, worum es in dem Video geht.

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

Textalternativen für Gruppen von Bildern
Bei Gruppen von Bildern, die fast identisch aussehen oder deren Inhalt man logisch sehr gut zusammenfassen kann, reicht es, wenn nur ein Bild ein alt-Attribute hat, das die Gruppe sinnvoll beschreibt. Die alt-Attribute der anderen Bilder können dann leer gelassen werden.
WCAG-Technik(en) in Englisch:
- Technique G196: Using a text alternative on one item within a group of images that describes all items in the group

Anmerkungen

Hinweis: Auch aussagekräftige Hintergrundbilder haben Textalternativen
Haben aussagekräftige Hintergrundbilder eine Textalternative?

Wenn Bilder per CSS als Hintergrundbild eingebunden sind, haben diese normalerweise kein Alt-Attribut. Darum brauchen sie eine Alternative in Form von einem aria-label, einem Titel oder Text in der Nähe des Bildes.