Textalternativen sollen sicherstellen, dass alle relevanten nicht-textlichen Inhalte auch in Textform bereitgestellt werden. Ein elektronischer Text ist die barrierefreiste Form eines Inhalts, da er durch assistierende Technik einfach verarbeitet (z. B. Screenreader) und in andere Formen umgewandelt werden kann (z.B. Blindenschrift mit einem Brailledisplay).
Nicht-Text-Inhalte sind zum Beispiel visuelle Elemente wie Bilder oder Grafiken. Sie brauchen eine Textalternative, wenn sie nicht rein dekorativ eingesetzt werden. Diese Textalternative (oder alternativer Text; Alt-Text) kann zum Beispiel durch ein Alt-Attribut bereitgestellt werden. Visuelle Elemente mit einer Funktion (z.B. einer Verlinkung) sind nie dekorativ und brauchen daher eine Textalternative. Bei komplexen Bildern oder Grafiken kann auch ein Link zu einer separaten Seite angeboten werden, auf der eine Textalternative angeboten wird. Auch Inputfelder in Formularen brauchen eine Beschriftung (Label; z.B. E-Mail), die mit dem Inputfeld verbunden ist. Generell brauchen alle interaktiven Elemente eine Beschriftung oder einen Namen, damit das Element identifiziert werden kann. Eingebundene Medien wie ein YouTube-Video müssen ebenfalls über den Titel oder einen Text identifizierbar sein. Auch für rein auditive Inhalte (z.B. ein Podcast) sollte eine Textalternative bereitgestellt werden (siehe WCAG-Kriterium 1.2.1).
Tipps und Infos zur Umsetzung des WCAG-Kriterium 1.1.1
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriterium 1.1.1:
- Wenn ein visuelles Element rein dekorativ eingesetzt wird und damit keine relevanten Informationen vermittelt, sollte das Alt-Attribut gesetzt, aber leer gelassen werden. Alternativ kann ein visuelles Element auch als CSS-Hintergrund eingebunden werden. In beiden Fällen würde der Screenreader das Element ignorieren.
- Visuelle Elemente (z.B. Bilder, Grafiken, Icons), die relevante Informationen vermitteln oder eine Funktion wie eine Verlinkung haben, brauchen immer einen Alt-Text.
- Auch CAPTCHA-Funktionen zur Abwehr von Bots auf einer Website müssen eine alternative Bestätigung anbieten.
- Formuliere einen Alt-Text kurz und präzise. Er sollte nur die relevanten Informationen enthalten, die auch sehende Benutzer über ein visuelles Element wie ein Bild erhalten. Entscheidend ist dabei der Kontext, in dem das Bild eingebunden ist und nicht zwangsläufig, was auf dem Bild zu sehen ist. Da der Screenreader automatisch erkennt, dass es sich um ein Bild oder ein verlinktes Bild handelt, solltest du dies nicht im Alt-Text erwähnen, da es sich sonst doppelt. Guter Alt-Text brauchen etwas Übung. Also einfach mal Ausprobieren und sich Feedback einholen.
- Bei Textbildern ist entscheidend, ob der Text auf dem Bild relevante Informationen enthält oder nur dekorativ ist. Im ersten Fall sollte der Text möglichst nicht als Textbild angeboten werden, da er so von Screenreader oder bei Vergrößerung des Bildelements nicht oder nur schwer verarbeitet werden kann. Textbilder wie Logos gelten als Ausnahme (brauchen aber einen entsprechenden Alt-Text).
- Bei reinen auditiven Inhalten wie ein Podcast solltest du ein Transkript anbieten, damit gehörlose Personen, den Inhalt aufnehmen können. Der Vorteil ist, dass so auch Suchmaschinen den Inhalt auswerten können.
Für Menschen mit kognitiver Beeinträchtigung und Lesebeeinträchtigung ist es oft hilfreich, Inhalte in visueller Form oder durch visuelle Elemente (z.B. eindeutige Icons) darzustellen. Meist ist es am besten relevante Informationen sowohl in visueller als auch in textlicher Form bereitzustellen (z.B. ein Icon mit Text).
Bei Fragen beraten wir dich gerne. Mehr Infos zu diesem Kriterium findest du auch auf der folgenden englischen WAI-Seite zum WCAG-Kriterium 1.1.1 Nicht-Text-Inhalt.
