1.1.1 - Nicht-Text-Inhalte

A 2.0 Umsetzung, Redaktion

Ziel

Für alle nicht-textuellen Inhalte sollen angemessene Textalternativen bereitgestellt werden, die den gleichen Zweck erfüllen und für assistierende Technologien (Screenreader) zugänglich sind.

Beschreibung

Aussagekräftige Bilder und Nicht-Text-Inhalte sollen mit Alt-Texten versehen werden, die Inhalt und Funktionalität präzise beschreiben.
Ein Icon zählt auch als Bild, benötigt aber kein Alt-Tag.
Komplexe Inhalte (z. B. Diagramme) erfordern zusätzliche Langbeschreibungen.
Dekorative Inhalte (Hintergrundbilder, Schmuckelemente) müssen so implementiert werden, dass sie von assistierenden Technologien ignoriert werden können (leerer Alt-Tag).
Buttons oder interaktive Elemente sollen über klare Beschriftungen oder ARIA-Attribute verfügen.

Anforderungen

Muss sicherstellen, dass der Alt-Tag für den Redakteur zur Verfügung gestellt wird. Alt-und Title-Tags sind im Core bereits enthalten. Bei Eigenentwicklungen muss die technische Vorraussetzungen für die Pflege der Tags berücksichtigt werden. Als Empfehlung sollte der Alt-Tag immer ausgegeben werden, auch wenn dieser leer ist um Screenreader nicht zu stören.
Langbeschreibungen für komplexe Inhalte hinzufügen und im aria-describedby-Attribut darauf verweisen.

Code-Beispiele

Bild mit Alt-Text:

<img src="meeting.jpg" alt="Präsident X schüttelt Premierminister Y die Hand.">

Dekoratives Bild, Bild ohne Alt-Text (ohne Leerzeichen):

<img src="decorative.jpg" alt="">

Button mit ARIA-Label:

<button aria-label="Absenden">Senden</button>

ARIA-Attributes: Komplexes Diagramm mit Langbeschreibung:

<img src="chart.jpg" alt="Umsatztrends 2023" aria-describedby="chartDesc">
<div id="chartDesc">Das Diagramm zeigt einen Anstieg der Umsätze...</div>

CSS für dekorative Inhalte:

.decorative {
  background-image: url('decorative-pattern.jpg');
}