Die WCAG-Kriterien

WCAG 1.1.1: Nicht-Text-Inhalt bei dekorativen Grafiken

Zurück zu allen WCAG-Kriterien

ÜBERBLICK

Umsetzbarkeit:

Komplexität:Einfach
Dauer:Schnell

Wichtig für Rolle:

Redaktion

Zum WCAG-Kriterium:

Nicht-Text-Inhalt (englisch)

Worum gehts?

Ein Bild oder eine Grafik sollten ein leeres alt-Attribut haben oder auf andere Art und Weise versteckt sein, wenn es einen rein visuellen Mehrwert hat oder keine nützlichen Informationen vermittelt.

Drei Illustrationen von dekorative Grafiken. Daneben eine Illustration von einem Roboter-Kopf, der einen Screenreader darstellt. Er liest nichts vor, weil die Bilder keinen Alt-Text haben.

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.

Dekorative Bilder haben leere Alt-Attribute
Bilder, die nur einen visuellen Mehrwert liefern oder keine wichtigen Informationen vermitteln, brauchen keine Textalternativen oder müssen auf andere Art und Weise vor Screenreadern versteckt sein. Zu diesen Bildern gehören:
- Redundante Icons
- Trennstriche
- Musterartige Formen im Hintergrund
Bei einem <img> hilft hier ein leeres Alt-Attribut. Ein Bild ohne Alt-Attribut wird von Screenreadern einfach ignoriert.
WCAG-Technik(en) in Englisch:
- H67: Null-Alt-Text und Titel-Attribut bei Bilder, die ignoriert werden sollten

Anmerkungen

Hinweis: Dekorative SVGS verstecken
SVGs allerdings haben kein Alt-Attribut. Wenn der Screenreader auf ein SVG ohne Namen stößt, wird es einfach als »Bild« vorgelesen. Damit ein dekoratives SVG auch wirklich vom Screenreader ignoriert wird, muss man es mit aria-hidden=”true” auszeichnen.