WCAG-Kriterium Wahrnehmbarkeit praxisnah erklärt

Wahrnehmbarkeit: Inhalte erfassbar machen

Das WCAG-Prinzip Wahrnehmbarkeit stellt sicher, dass alle Informationen und Funktionen einer digitalen Oberfläche von den Nutzenden wahrgenommen werden können, unabhängig von individuellen sensorischen Einschränkungen. Das bedeutet, Inhalte müssen sowohl visuell als auch auditiv zugänglich sein und dürfen nicht nur mit einem einzigen Sinn wahrgenommen werden. Dieses Prinzip betrifft insbesondere Menschen mit Sehbeeinträchtigung, blinde Menschen, Menschen mit Hörbeeinträchtigung, kognitiven Einschränkungen sowie ältere Menschen mit altersbedingtem Nachlassen der Sinneswahrnehmung.

Warum ist Wahrnehmbarkeit so wichtig?

Ohne wahrnehmbare Inhalte bleibt ein Zugang zur digitalen Information vollständig verwehrt. Nutzende von Screenreadern, brauchen z.B. Alternativtexte für Bilder, strukturierte Informationen und die Möglichkeit, Text an individuelle Bedürfnisse anzupassen. Videos mit Ton aber ohne Untertitel oder Webauftritte mit schlechtem Kontrast können zentrale Informationen unzugänglich machen.

Was ist bei der Umsetzung zu beachten?

Redaktionen, Designteams und Entwicklung sollten in enger Abstimmung sicherstellen, dass mediale Inhalte auf mehreren Sinneskanälen angeboten werden und technisch korrekt ausgezeichnet sind. Es geht nicht nur um gesetzliche Mindestanforderungen, sondern um echte Teilhabe. Wer Inhalte klar strukturiert, erklärt und in mehreren sensorischen Formen zugänglich macht, erreicht mehr Menschen und leistet einen Beitrag zu Inklusion und Nutzungsfreundlichkeit.
Im Folgenden werden die einzelnen Erfolgskriterien unter dem Prinzip Wahrnehmbarkeit praxisnah erläutert. Die Umsetzungsempfehlungen enthalten konkrete Hinweise für Redaktion, Entwicklung und Gestaltung. Dabei wird jedes Erfolgskriterium zunächst kurz erklärt. Im Anschluss folgen jeweils die Hinweise zur technischen Umsetzung. Die Erfolgskriterien sind in drei Konformitätsstufen eingeteilt:

• Stufe A sind grundlegende Anforderungen, um Webauftritte und Webanwendungen nutzen zu können
• Stufe AA ist der Standard, der für gute Zugänglichkeit erreicht werden sollte
• Stufe AAA umfasst sehr hohe Anforderungen

Da öffentliche Stellen laut BITV 2.0 sowie Unternehmen nach dem BFSG zur Erfüllung der Stufen A und AA verpflichtet sind, konzentriert sich dieser Leitfaden auf genau diese. Die Stufe AAA kann zur Umsetzung des höchstmöglichen Maßes der Barrierefreiheit genutzt werden, bleibt an dieser Stelle jedoch außen vor. Sie kann jederzeit bei Bedarf ergänzend berücksichtigt werden. Zur besseren Verständlichkeit findet ihr am Ende dieses Dokuments ein Glossar mit kurzen Erklärungen zentraler Begriffe rund um die folgenden Erklärungen.

Erfolgskriterien des Prinzips Wahrnehmbarkeit

1. Textalternativen
   • 1.1.11 Nicht-Text-Inhalte (Stufe A):
   • Stellt für alle informative Nicht-Text-Inhalte (z. B. Bilder, Grafiken) Textalternativen bereit. Dies ermöglicht es Nutzenden mit Sehbeeinträchtigungen und kognitiven Beeinträchtigungen die Inhalte zu erfassen.
   • Umsetzungsempfehlung: Verwendet in HTML das alt-Attribut für informative Bilder. Für komplexe Grafiken wie Diagramme oder Infografiken nutzt zusätzlich eine ausführliche Beschreibung im Text oder verlinkt auf eine externe Beschreibung. Verwendet bei dekorativen Bildern leere Alt-Texte (alt=““), damit sie von Screenreadern ignoriert werden. Achtet bei Icons mit Funktion (z. B. Drucken, Suchen) auf eine sinnvolle Kennzeichnung, sofern keine sichtbare Beschriftung vorhanden ist. Sonst sollten diese als dekorativ gekennzeichnet werden.
2. Zeitbasierte Medien
   • 1.2.1 Nur-Audio und Nur-Video (vorab aufgezeichnet) (Stufe A):
   • Bietet für vorab aufgezeichnete Audio- und stumme Videoinhalte entsprechende Alternativen in Textform an.
   • Umsetzungsempfehlung: Erstellt für Podcasts oder Interviews ohne visuelle Komponente ein vollständiges Transkript. Bei stummen Videos beschreibt in Textform, was im Bild zu sehen ist. Die Textbeschreibung kann entweder direkt auf der Seite stehen oder über einen Link erreichbar sein.
   • 1.2.2 Untertitel (vorab aufgezeichnet) (Stufe A):
   • Stellt Untertitel für vorab aufgezeichnete Videos mit Ton bereit.
   • Umsetzungsempfehlung: Nutzt Untertitelungssoftware oder -dienste, um genaue Untertitel zu erstellen. Untertitel sollten gesprochene Inhalte, Sprecherwechsel und relevante Hintergrundgeräusche enthalten. Nutzt standardisierte Untertitelformate wie .srt. Achtet darauf, dass die Untertitel nicht fest ins Video eingebrannt sind, damit Nutzende sie ein- oder ausschalten können. Stellt eine hohe sprachliche Qualität und Lesbarkeit sicher, z. B. durch gut getimte Zeilenumbrüche, korrekte Rechtschreibung und ausreichend lange Einblendzeiten.
   • 1.2.3 Audiodeskription oder Medienalternative (vorab aufgezeichnet) (Stufe A):
   • Bietet eine Möglichkeit an, visuelle Informationen auch hörbar oder als Text verfügbar zu machen.
   • Umsetzungsempfehlung: Erstellt zusätzlich zur Originalspur eine Version mit eingesprochener Beschreibung visueller Elemente (Audiodeskription). Die Audiodeskription wird dabei ausschließlich in den Sprechpausen eingefügt und muss daher in der Regel sehr kompakt formuliert sein. Sie ist nur dann erforderlich, wenn wesentliche Informationen über das Bild vermittelt werden, die nicht im Ton enthalten sind. Alternativ kann eine ausführliche Inhaltsbeschreibung als HTML verlinkt werden. Wichtig ist, dass Nutzende erkennen, dass es diese Alternative gibt. Es geht hierbei explizit um die Beschreibung visueller Inhalte in Videos, nicht um die Vorlesung von Textinhalten.
   • 1.2.4 Untertitel (live) (Stufe AA):
   • Stellt für Live-Videoinhalte Untertitel bereit.
   • Umsetzungsempfehlung: Arbeitet mit Live-Untertitelungsdiensten oder Software, die Echtzeit-Transkription. Informiert die Teilnehmenden im Vorfeld, ob Untertitel bereitgestellt werden und wie diese aktiviert werden können. Stellt eine hohe sprachliche Qualität und Lesbarkeit sicher, z. B. durch gut getimte Zeilenumbrüche, korrekte Rechtschreibung und ausreichend lange Einblendzeiten.
   • 1.2.5 Audiodeskription (vorab aufgezeichnet) (Stufe AA):
   • Vorab aufgezeichnete Videos mit visuellen Informationen sollten eine Audiodeskription enthalten, um auch für sehbeeinträchtigte Nutzende verständlich zu sein.
   • Umsetzungsempfehlung: Sprecht Bildinhalte zwischen Dialogpausen oder in separater Version ein. Falls technisch aufwendig, bietet alternativ ein detailliertes Transkript mit Bildbeschreibung zum Download oder direkt auf der Seite an. Für Videos mit hohem narrativem oder atmosphärischem Anteil reicht ein Transkript in der Regel nicht aus, da es die audiovisuelle Wirkung und komplexe Bildsprache nicht adäquat überträgt. Geeignete Einsatzszenarien für Transkripte mit Bildbeschreibungen sind zum Beispiel: Lehrvideos mit klarer Struktur, Produkt- oder Erklärvideos, Webinare oder aufgezeichnete Fachvorträge mit Präsentationen, kurze Informationsclips ohne dramatische Bildwirkung sowie stille Videos oder Animationen ohne Ton, bei denen Transkripte die Inhalte vollständig erfassbar machen.
3. Anpassbar
   • 1.3.1 Informationen und Beziehungen (Stufe A):
   • Stellt sicher, dass Informationen und Beziehungen, die durch visuelle oder auditive Mittel vermittelt werden, auch programmatisch von assistiven Technologien abgerufen werden können oder in Textform verfügbar sind.
   • Umsetzungsempfehlung: Nutzt semantisch korrektes HTML: h1 bis h6 für Überschriften, ul/ol für Listen, table für Tabellen mit Beschriftung. Vermeidet visuelle Formatierung mit leeren Zeilen oder reinem Text-Layout. Prüft die Struktur regelmäßig mit Screenreader-Test oder HTML-Validator.
   • 1.3.2 Bedeutungsvolle Reihenfolge (Stufe A):
   • Inhalte sollten in einer sinnvollen und logischen Reihenfolge präsentiert werden, sodass sie bei allen Darstellungsformen verständlich und bedienbar bleiben.
   • Umsetzungsempfehlung: Achtet bei der Strukturierung von HTML-Inhalten auf die visuelle wie auch die programmatische Reihenfolge. Nutzt semantische Container und überprüft die Lesereihenfolge mithilfe von Screenreadern oder browserbasierten Testwerkzeugen. Inhaltliche Zusammenhänge wie Beschriftung und Eingabefeld oder Bild und Beschreibung sollten im Quelltext direkt aufeinander folgen.
   • 1.3.3 Sensorische Merkmale (Stufe A):
   • Anweisungen sollten nicht ausschließlich auf sensorische Hinweise wie Farbe, Form, Größe oder Position verweisen.
   • Umsetzungsempfehlung: Ergänzt Farbangaben durch textliche Hinweise. Beispiel: Statt „Klicken Sie auf den grünen Knopf“ sollte es heißen „Klicken Sie auf den grünen Knopf mit dem Pfeilsymbol rechts unten“. Achtet darauf, dass der Hinweis auch per Screenreader verständlich ist, indem z. B. aria-labels verwendet werden.
   • 1.3.4 Ausrichtung (Stufe AA):
   • Inhalte sollten sowohl im Hoch- als auch im Querformat nutzbar sein, ohne dass eine bestimmte Bildschirmorientierung erforderlich ist.
   • Umsetzungsempfehlung: Stellt sicher, dass die Seite sich dynamisch an die jeweilige Ausrichtung anpasst. Verwendet flexible Layouts, die sich im CSS anpassen lassen. Vermeidet JavaScript-Sperren, die bestimmte Orientierungen erzwingen. Testet eure Anwendungen auf Mobilgeräten in beiden Formaten.
   • 1.3.5 Eingabezweck identifizieren (Stufe AA):
   • Der Zweck von Eingabefeldern sollte so gekennzeichnet sein, dass Browser und assistive Technologien ihn erkennen und automatische Eingabehilfen (z. B. Autofill) unterstützen können. Ein Eingabefeld z. B. für „Nachname“ muss auch als Nachnamefeld erkennbar sein.
   • Umsetzungsempfehlung: Verwendet standardisierte HTML-Attribute wie autocomplete=“name“, email, postal-code etc., damit mobile Betriebssysteme oder Passwortmanager die Felder korrekt vorausfüllen können. Prüft die Wirksamkeit mit einem Autofill-Test auf unterschiedlichen Geräten.
4. Unterscheidbar
   • 1.4.1 Verwendung von Farbe (Stufe A):
   • Informationen dürfen nicht ausschließlich durch Farbe vermittelt werden, da dies für Menschen mit Farbsehschwächen problematisch ist.
   • Umsetzungsempfehlung: Ergänzt farbliche Kennzeichnungen immer durch Text oder Symbole. Beispielsweise sollte ein Fehlerfeld nicht nur rot umrandet sein, sondern auch mit einem Hinweis wie „Fehler: Bitte ausfüllen“ versehen sein.
   • 1.4.2 Audiosteuerung (Stufe A):
   • Audioinhalte sollten nicht automatisch starten und länger als drei Sekunden dauern, da automatisch abgespielte Klänge die Nutzung für viele Menschen mit Beeinträchtigungen erschweren können.
   • Umsetzungsempfehlung: Vermeidet Autoplay bei Toninhalten. Wenn unvermeidlich, stellt gut sichtbare Bedienelemente zur Verfügung, mit denen Nutzende die Wiedergabe pausieren oder stoppen können.
   • 1.4.3 Kontrast (Minimum) (Stufe AA):
   • Texte sollten ausreichend vom Hintergrund abgehoben sein, damit sie auch bei eingeschränktem Sehvermögen lesbar sind.
   • Umsetzungsempfehlung: Nutzt Kontrastverhältnisse von mindestens 4,5:1 bei normalem Text und 3:1 bei großem Text. Verwendet Tools wie den WebAIM Contrast Checker zur Prüfung.
   • 1.4.4 Textgröße ändern (Stufe AA):
   • Texte sollten bis auf 200 % vergrößerbar sein, ohne dass Inhalte abgeschnitten oder unleserlich werden.
   • Umsetzungsempfehlung: Nutzt relative Maßeinheiten wie „em“ oder „rem“. Vermeidet feste Layoutbreiten oder absolute Schriftgrößen in Pixeln.
   • 1.4.5 Bilder von Text (Stufe AA):
   • Wenn Text in Bildern (Schriftgrafiken) enthalten ist, kann er nicht ohne Qualitätsverlust (Schärfe) vergrößert oder von Hilfsmitteln wie einem Screenreader vorgelesen werden. Dadurch haben manche Menschen Schwierigkeiten, die Informationen zu erkennen oder zu verstehen.
   • Umsetzungsempfehlung: Nutzt HTML-Text statt Text in Grafiken. Wenn ein Bildtext unverzichtbar ist (z. B. in Logos), stellt eine gleichwertige Textalternative bereit.
   • 1.4.10 Umfluss (Reflow) (Stufe AA):
   • Digitale Inhalte müssen auch bei starker Vergrößerung übersichtlich, verständlich und ohne horizontales Scrollen nutzbar sein.
   • Umsetzungsempfehlung: Stellt sicher, dass eure Webinhalte bei einem Zoom von bis zu 400 % bei einer Fensterbreite von 1280 px weiterhin ohne horizontales Scrollen lesbar bleiben (ausgenommen sind Inhalte, bei denen horizontales Scrollen aus funktionalen Gründen notwendig ist, z. B. bei Tabellen oder interaktiven Diagrammen). Nutzt responsive Layouts, die sich flexibel an verschiedene Bildschirmgrößen anpassen.
   • 1.4.11 Nicht-Text-Kontrast (Stufe AA):
   • Grafische Inhalte und interaktive Elemente müssen ebenfalls gut erkennbar sein.
   • Umsetzungsempfehlung: Stellt sicher, dass Icons, Formfelder und Steuerelemente ein Kontrastverhältnis von mindestens 3:1 zum Hintergrund haben.
   • 1.4.12 Textabstand (Stufe AA):
   • Nutzende sollten Textzeilen mit ausreichendem Abstand lesen können.
   • Umsetzungsempfehlung: Richtet die Darstellung so aus, dass beifolgenden Werten keine Inhalte überlappen oder verloren gehen: z.B. Zeilenhöhe 1,5-fach, Absatzabstand mindestens 1,5-mal der Textgröße, Buchstabenabstand 0,12em, Wortabstand 0,16em.
   • 1.4.13 Inhalt bei Hover oder Fokus (Stufe AA):
   • Zusätzliche Inhalte wie Tooltips sollten bei Bedarf durch Eingabegeräte angezeigt und leicht geschlossen werden können.
   • Umsetzungsempfehlung: Achtet darauf, dass eingeblendete Inhalte nicht automatisch verschwinden, solange Nutzende mit dem Mauszeiger oder der Tastatur interagieren. Bietet klare Schaltflächen zum Schließen an (z. B. ein „X“ oder die Esc-Taste).

Weiterführende Informationen aus der BFIT

Alternativtexte was gibt es zu beachten – Beitrag bei LinkedIn

Untertitel richtig einsetzen

Korrekte Kontraste verwenden

Strukturierung von Textinhalten

Tools zur Überprüfung der Wahrnehmbarkeit

1. Farbkontraste
   • WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/ prüft Kontrastverhältnisse zwischen Text- und Hintergrundfarbe. Unterstützt AA- und AAA-Werte.
   • Colour Contrast Analyser (CCA): https://www.tpgi.com/color-contrast-checker/ Desktop-Tool, erkennt Kontraste auch in eingebetteten PDF- oder App-Inhalten.
2. Responsive Design
   • Chrome DevTools (Device Mode): Entwicklertools in Chrome mit mobilen Ansichten
3. Textskalierung & Textabstand
   • Zoomfunktion in Browser (Ctrl + / Cmd +): Prüft, ob Inhalte bei 200 % Zoom lesbar und vollständig sind.
   • WAVE Tool: https://wave.webaim.org/ prüft u.a. Textgrößen, Kontrast und Struktur auf einer Seite.

Diese Liste erhebt nicht den Anspruch vollständig zu sein, es gibt noch viele andere Tools und Werkzeuge. Dies ist lediglich ein Einstieg.

Glossar

• .em und .rem: Relative Maßeinheiten in CSS zur Schriftgrößen- und Abstandsdefinition. Sie passen sich an die eingestellte Textgröße an und ermöglichen eine flexible Skalierung.
• .srt: Ein Untertitelformat (SubRip Subtitle), das Zeitstempel und Textzeilen enthält. Wird häufig für Videountertitel genutzt.
• Alternativtexte (alt-text): Texte, die als Alternativen für Bilder hinterlegt werden. Sie werden z. B. von Screenreadern vorgelesen und ermöglichen so Menschen mit Sehbeeinträchtigung den Zugang zu Bildinhalten.
• ARIA-Label: Ein Attribut zur barrierefreien Beschriftung von Elementen, insbesondere von Icons oder Schaltflächen, die keinen sichtbaren Text enthalten.
• Assistive Technologien: Hilfsmittel wie Screenreader, Braillezeilen oder Sprachausgabe, die Menschen mit Beeinträchtigungen die Nutzung digitaler Inhalte ermöglichen.
• Autocomplete: HTML-Attribut, mit denen Browser Formularfelder automatisch ausfüllen können. Sie verbessern Komfort und Barrierefreiheit.
• Autofill: Funktion von Webbrowsern, die Formularfelder automatisch mit gespeicherten Daten befüllt.
• Autoplay: Automatischer Start von Medieninhalten wie Videos oder Audio beim Seitenaufruf.
• BFSG: Barrierefreiheitsstärkungsgesetz. Regelt die Barrierefreiheit für bestimmte Produkte und Dienstleistungen in der Privatwirtschaft.
• BITV: Barrierefreie-Informationstechnik-Verordnung. Regelt die digitale Barrierefreiheit für öffentliche Stellen auf Bundesebene in Deutschland.
• CSS: Cascading Style Sheets. Sprache zur Gestaltung von HTML-Inhalten, z. B. für Farben, Abstände, Schriftgrößen und Layout.
• Formfelder: Eingabeelemente in Formularen wie Textfelder, Checkboxen oder Auswahlmenüs. Sie müssen beschriftet und per Tastatur bedienbar sein.
• H1–H6: HTML-Überschriftenelemente. Sie bilden eine hierarchische Struktur und erleichtern die Navigation mit Hilfstechnologien.
• HTML: Hypertext Markup Language. Strukturierungssprache für Webseiten, z. B. zur Auszeichnung von Überschriften, Absätzen und Formularen.
• Javascript: Skriptsprache zur Umsetzung dynamischer Inhalte und Interaktionen auf Webseiten. Muss barrierefrei integriert und steuerbar sein.
• normaler Text und großer Text: Als normaler Text gilt Text in Standardgröße, also in der Regel unter 18 Punkt oder unter 14 Punkt fett. Als großer Text gilt Text mit mindestens 18 Punkt (ca. 24 Pixel) oder 14 Punkt fett (ca. 18,66 Pixel).
• Quelltext: Der programmierte Code einer Webseite, z. B. HTML, CSS oder Javascript.
• Responsive Design: Ein Layout-Prinzip, bei dem sich Webseiten an verschiedene Bildschirmgrößen anpassen.•
• Schriftgrafiken: Text, der als Bild eingebunden ist.
• Steuerelemente: Interaktive Bedienelemente wie Schaltflächen, Links oder Eingabefelder.
• Table: HTML-Element zur Darstellung von tabellarischen Daten.
• Transkript: Textliche Aufbereitung von Audio- oder Videoinhalten.
• Ul/OI: HTML-Elemente für ungeordnete (<ul>) und geordnete (<ol>) Listen.
• WCAG: Die Web Content Accessibility Guidelines sind internationale Richtlinien zur digitalen Barrierefreiheit.