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 geht's?

Bilder, die rein visuellen Mehrwert liefern und keine wichtigen Informationen vermitteln, brauchen keine Textalternative.

Zu diesen Bildern gehören:

Redundante Icons
Trennstriche
Musterartige Formen im Hintergrund

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 Techniken muss umgesetzt werden, um das Kriterium zu erfüllen.

Leere Alt-Attribute für Imgs
Um Pixelbilder (<img>) vor Screenreadern zu verstecken, lässt man einfach das alt-Attribut leer. Ein Bild ohne alt‑Text wird von Screenreadern einfach ignoriert.

Das alt-Attribut darf allerdings im img-Tag nie ganz fehlen. Sonst wird der Dateiname des Bildes vorgelesen.
WCAG-Technik(en) in Englisch:
- H67: Null-Alt-Text und Titel-Attribut bei Bilder, die ignoriert werden sollten

Dekorative Vektorgrafiken verstecken
(Vektor-) Grafiken, die als SVGs (<svg>), Icon-Fonts (<i>) oder Ähnliches eingebettet sind, haben kein alt-Attribut.

Wenn der Screenreader auf ein SVG ohne Namen stößt, wird einfach »Bild« vorgelesen. Damit diese Grafiken vom Screenreader ignoriert werden, muss man sie mit aria-hidden=”true” verstecken.
WCAG-Technik(en) in Englisch:
- Kein direkte Technik in der WCAG vorhanden.

Dekorativer Bilde per CSS einfügen
Elemente, die nur für die Präsentation da sind, sollten am besten gar nicht im HTML vorkommen. Das kann man erreichen, indem man dekorative Bilder einfach per CSS einbindet, zum Beispiel mit der CSS-Eigenschaft background-image.
WCAG-Technik(en) in Englisch:
- C9: Using CSS to include decorative images

So testest dU:

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Inhalt entsperren Erforderlichen Service akzeptieren und Inhalte entsperren