WCAG-Kriterium Verständlichkeit praxisnah erklärt

Verständlichkeit: Inhalte verständlich und nachvollziehbar gestalten

Das WCAG-Prinzip Verständlichkeit stellt sicher, dass digitale Inhalte und Interaktionen für alle Menschen nachvollziehbar und eindeutig und sind. Es betrifft sprachliche Formulierungen, die Struktur von Benutzeroberflächen sowie das Verhalten von Webseiten bei der Eingabe oder Navigation. Verständlichkeit ist besonders wichtig für Menschen mit kognitiven Beeinträchtigungen, Lernschwierigkeiten oder geringen Sprachkenntnissen, aber auch für alle, die sich schnell orientieren oder komplexe Inhalte erfassen wollen.

Warum ist Verständlichkeit so wichtig?

Selbst wenn Inhalte technisch erreichbar und visuell gut gestaltet sind, können sie unzugänglich bleiben, wenn Sprache, Struktur oder Interaktionen verwirren. Wenn zum Beispiel die Hauptsprache der Seite nicht korrekt angegeben ist oder Formulare unklar beschriftet sind, entstehen Barrieren, die die Nutzung erschweren oder unmöglich machen.

Was ist bei der Umsetzung zu beachten?

Verständliche digitale Angebote erfordern die Zusammenarbeit von Redaktion, UX-Design und Entwicklung. Wichtig sind unter anderem klar formulierte Inhalte, einheitliche Benennungen für gleiche Funktionen, gut strukturierte Formulare sowie vorhersehbares Verhalten bei der Bedienung.

Im Folgenden werden die Erfolgskriterien des Prinzips Robustheit 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 Hinweise zur technischen Umsetzung.

Die Erfolgskriterien sind in drei Stufen unterteilt:

  • Stufe A umfasst grundlegende Anforderungen, die nötig sind, damit Webauftritte und Anwendungen überhaupt zugänglich sind.
  • Stufe AA ist der empfohlene Standard für gute digitale Zugänglichkeit.
  • Stufe AAA enthält zusätzliche Anforderungen für ein sehr hohes Maß an Barrierefreiheit.

Da öffentliche Stellen gemäß BITV 2.0 und Unternehmen gemäß BFSG zur Umsetzung der Stufen A und AA verpflichtet sind, konzentriert sich dieser Leitfaden ausschließlich auf diese beiden Konformitätsstufen. Die Kriterien der Stufe AAA können ergänzend berücksichtigt werden, wenn ein besonders hoher Barrierefreiheitsstandard erreicht werden soll.
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 Verständlichkeit

3.1 Lesbar

3.1.1 Sprache der Seite (Stufe A):
Die Hauptsprache des Inhalts muss im HTML-Dokument korrekt angegeben sein. Die Angabe der Hauptsprache ist essenziell für die Zugänglichkeit von Inhalten für Nutzende mit assistiven Technologien, insbesondere für Personen, die Screenreader verwenden. Screenreader wie JAWS, NVDA oder VoiceOver verwenden die Sprachangabe, um die richtige Aussprache, Intonation und Betonung zu wählen. Ist keine oder eine falsche Sprache hinterlegt, kann der Text unverständlich oder irreführend wiedergegeben werden.
Umsetzungsempfehlung: Nutzt das lang-Attribut im -Element (z. B. für Deutsch). Diese Angabe gilt seitenweit und sollte einheitlich und konsistent verwendet werden. So können Screenreader oder andere assistive Technologien den Text korrekt ausgeben. Ohne diese Information wird die Sprache falsch erkannt oder falsch ausgesprochen.
3.1.2 Sprache von Teilen (Stufe AA):
Wenn Abschnitte oder einzelne Wörter in einer anderen Sprache, als der angegebenen Hauptsprache verfasst sind, müssen diese ausgezeichnet sein. Viele Webseiten enthalten einzelne Wörter, Fachbegriffe oder Abschnitte in anderen Sprachen, z. B. englische Zitate, französische Begriffe oder mehrsprachige Informationen. Ohne eine korrekte Sprachauszeichnung erkennen Screenreader und andere assistive Technologien diese Abschnitte nicht als fremdsprachig. Das führt zu falscher Aussprache, erschwerter Verständlichkeit und kann den Lesefluss erheblich stören.
Umsetzungsempfehlung: Nutzt auch innerhalb des Inhalts das lang-Attribut, etwa Accessibility. Das ermöglicht Screenreadern eine korrekte Aussprache und signalisiert den Wechsel deutlich. Bei längeren Textabschnitten kann das Attribut auch auf größere Strukturelemente angewendet werden. Diese Anforderung betrifft nicht Begriffe, die bereits erläuternd im Duden stehen (z. B. „E-Mail“, „Computer“). Verwendet nicht zu viele Sprachauszeichnungen innerhalb eines Textes – zu häufige Sprachwechsel führen dazu, dass Screenreader ständig die Stimme wechseln, was die Verständlichkeit stark erschwert.

3.2 Vorhersehbar

Hinweis zu allen Erfolgskriterien unter 3.2: Alle Veränderungen der Benutzeroberfläche, sei es durch Fokus, Eingabe, Navigation oder Interaktion mit Komponenten dürfen nur dann automatisch erfolgen, wenn Nutzende vorher eindeutig darüber informiert wurden. Ohne eine solche Vorwarnung gilt jede automatisch ausgelöste Kontextänderung als unvorhersehbar und stellt eine erhebliche Barriere dar.

  • 3.2.1 Bei Fokus (Stufe A):
    Das Setzen des Fokus (z. B. durch Tastaturnavigation via Tab-Taste) darf keine unerwarteten Aktionen auslösen. Wenn sich bei der Tastaturnavigation plötzlich etwas verändert, nur weil ein Element den Fokus erhält, zum Beispiel ein Menü aufgeht oder die Seite neu lädt, kann das für viele Nutzende sehr verwirrend sein. Besonders für Menschen mit kognitiven Einschränkungen oder motorischen Beeinträchtigungen kann das zur Desorientierung führen oder sogar dazu, dass sie die Seite nicht mehr bedienen können.
    Umsetzungsempfehlung: Vermeidet automatische Weiterleitungen oder das plötzliche Öffnen von Fenstern, nur weil ein Element den Fokus erhält. Nutzende sollen Aktionen bewusst auslösen können (z. B. durch Enter, Klick oder Auswahländerung). Verwendet die JavaScript-Events, onchange oder onclick, aber nicht onfocus als Auslöser für Seitenwechsel oder Inhaltsänderungen.
  • 3.2.2 Bei Eingabe (Stufe A):
    Veränderungen an Eingaben (z. B. Auswahl in Dropdowns) dürfen nicht automatisch zu Seitenwechseln oder Kontextänderungen führen, außer die Änderung wird angekündigt oder ist zu erwarten. Viele Nutzende sind auf die Tastaturnavigation angewiesen, darunter auch Personen, die mit Screenreadern oder anderen assistiven Technologien arbeiten. Wenn sich durch eine einfache Eingabe unvorhergesehen der Seiteninhalt verändert, kann dies zu Orientierungsverlust oder Fehlbedienung führen. Besonders Menschen mit kognitiven Beeinträchtigungen oder motorischen Einschränkungen profitieren davon, wenn sie selbst bestimmen können, wann eine Änderung ausgelöst wird.
    Umsetzungsempfehlung: Startet Funktionen erst, wenn eine Eingabe aktiv bestätigt wird, z. B. mit einer „Weiter“- oder „Absenden“-Schaltfläche. Wenn automatische Änderungen technisch notwendig sind, muss dies vorher deutlich gemacht werden (z. B. durch einen erklärenden Text, ein ARIA-Hinweis oder einen sichtbaren Hinweis im Formular).
  • 3.2.3 Konsistente Navigation (Stufe AA):
    Navigationsmechanismen, die auf mehreren Seiten innerhalb eines Webauftritt wiederkehren, sollen in derselben Reihenfolge und mit denselben Bezeichnungen erscheinen. Viele Nutzende, besonders Menschen mit kognitiven Einschränkungen, blinde Personen oder Menschen mit motorischen Einschränkungen, sind auf verlässliche Strukturen angewiesen. Wenn Navigationselemente zwischen Seiten wechseln, umbenannt werden oder an unerwarteten Stellen erscheinen, führt das zu Verwirrung und Orientierungslosigkeit.
    Umsetzungsempfehlung: Nutzt identische Navigationsstrukturen auf allen Seiten, z. B. durch Templates. Achtet auf einheitliche Bezeichnungen und testet, ob Menüstrukturen auch bei Seitenwechsel stabil bleiben.
  • 3.2.4 Konsistente Bezeichnung (Stufe AA):
    Wenn Komponenten mit derselben Funktion mehrfach innerhalb eines Webauftritt vorkommen, sollen sie einheitlich benannt sein. Für viele Nutzende, etwa blinde Menschen mit Screenreader, Personen mit kognitiven Einschränkungen oder Lernschwierigkeiten ist die Wiedererkennbarkeit von Funktionen entscheidend für die selbstbestimmte Nutzung einer Website. Uneinheitliche Bezeichnungen können zu Verwirrung führen und wichtige Funktionen unzugänglich machen.
    Umsetzungsempfehlung: Verwendet durchgängig dieselben Begriffe für dieselbe Funktion, sowohl im sichtbaren Text als auch in programmatischen Labels. Legt redaktionelle Standards fest: z. B. einheitliche Begriffe für „Suche“, „Kontakt“, „Weiter“, „Abbrechen“ Bei Verwendung von Symbolen oder Icons: einheitliche ARIA-Labels oder Alt-Texte verwenden.

3.3 Eingabehilfe

  • 3.3.1 Fehleridentifikation (Stufe A): Wenn ein Eingabefehler erkannt wird, muss dieser beschrieben werden, also was falsch ist und (wenn möglich), wo der Fehler liegt. Viele Menschen, insbesondere mit kognitiven Einschränkungen oder Nutzende von assistiven Technologien, sind auf klare Rückmeldungen angewiesen. Eine bloße Markierung wie „Fehler“ ohne Beschreibung hilft nicht weiter. Nutzende müssen verstehen, was genau falsch war, um ihre Eingabe erfolgreich zu korrigieren.
    Umsetzungsempfehlung: Hebt fehlerhafte Felder hervor (z. B. mit einem roten Rahmen) und bietet eine konkrete Textmeldung wie „Bitte geben Sie Ihre E-Mail-Adresse im Format name@domain.de ein“. Achtet darauf, dass das Eingabefeld und die Fehlermeldung programmatisch verbunden sind. Fehler sollten nicht ausschließlich durch Farbe angezeigt werden. Zusätzliche textuelle Hinweise sind erforderlich, um sicherzustellen, dass alle Nutzenden die Fehlermeldung wahrnehmen können.
  • 3.3.2 Beschriftungen oder Anleitungen (Stufe A):
    Jedes Eingabefeld soll eine klare Beschriftung oder Anleitung haben, um korrekt ausgefüllt werden zu können. Unbeschriftete oder unverständliche Felder sind eine Barriere. Ohne aussagekräftige Beschriftung kann nicht erkannt werden, welche Informationen verlangt werden.
    Umsetzungsempfehlung: Verwendet für alle Formularfelder sprechende Beschriftungen (z. B. „Telefonnummer (optional)“) und bei Bedarf kurze Hinweise darunter. Platzhaltertexte (Placeholders) allein sind keine ausreichenden Beschriftungen, da sie beim Eintippen verschwinden und dadurch insbesondere für Nutzenden mit kognitiven Einschränkungen oder Screenreader nicht mehr zugänglich sind.
  • 3.3.3 Vorschläge zur Fehlerkorrektur (Stufe AA):
    Bei automatisch erkannten Eingabefehlern sollen den Nutzenden Korrekturvorschläge angeboten werden. Dies soll insbesondere Menschen mit kognitiven Beeinträchtigungen oder Sehbehinderungen helfen, Fehler zu verstehen und zu korrigieren. Viele Nutzende sind auf klare Anleitungen angewiesen, um Eingabefehler zu beheben. Ohne spezifische Hinweise können sie den Fehler nicht identifizieren oder wissen nicht, wie sie ihn korrigieren sollen. Dies kann dazu führen, dass das Ausfüllen von Formularen abgebrochen wird oder die Formulare falsch ausgefüllt werden.
    Umsetzungsempfehlung: Statt allgemeiner Hinweise wie „Ungültige Eingabe“ sollten spezifische Anleitungen gegeben werden, z. B. „Bitte geben Sie eine fünfstellige Postleitzahl ein“. Fehlermeldungen sollten in unmittelbarer Nähe zum betroffenen Eingabefeld angezeigt werden und programmatisch mit diesem verknüpft sein, z. B. durch aria-describedby. Bei komplexen Eingaben kann die Angabe eines Beispiels hilfreich sein, z. B. „Geben Sie Ihre Telefonnummer im Format 030 1234567 ein“.
  • 3.3.4 Fehlervermeidung bei sensiblen Prozessen (Stufe AA):
    Bei Eingaben, die rechtliche oder finanzielle Folgen haben, soll es Mechanismen geben, um Fehler zu vermeiden oder zu korrigieren. Ein versehentliches Versenden von falschen oder unvollständigen Daten kann ernste Folgen haben, gerade im Kontakt mit Behörden. Nutzende sollen die Möglichkeit haben, ihre Angaben zu prüfen und bei Bedarf zu ändern.
    Umsetzungsempfehlung: Stellt eine Zusammenfassung bereit, bevor das Formular abgeschickt wird („Bitte prüfen Sie Ihre Angaben“). Das hilft besonders bei langen Formularen oder juristisch relevanten Vorgängen. Ermöglicht Nutzenden, ihre Angaben einfach zu korrigieren, z. B. über „Zurück“-Buttons oder editierbare Vorschauansichten. Überprüft Eingaben schon während der Eingabe (z. B. Formatprüfung bei E-Mail, IBAN).

Weiterführende Informationen aus der BFIT

Die richtige Sprache für barrierefreie Inhalte

Barrierefreie Gestaltung von User Interface-Elementen

Tools zur Prüfung der Verständlichkeit & Robustheit

  1. Sprache der Seite und von Abschnitten: Bookmarklet „Lang“. Prüft, ob die Hauptsprache der Seite korrekt mit dem lang-Attribut ausgezeichnet ist. Hilft dabei, anderssprachige Wörter oder Abschnitte zu identifizieren, die ebenfalls mit lang ausgezeichnet sein sollten.
  2. Aussagekräftige Überschriften und Beschriftungen: Bookmarklet „Inhalte gegliedert“. Hilft dabei, die Klarheit und Aussagekraft von Überschriften zu bewerten, indem es die semantische Struktur der Seite anzeigt.
  3. Fehlermeldungen und Eingabehilfen: WAVE Evaluation Tool, analysiert Formulare auf korrekte Beschriftungen, Fehlermeldungen und Eingabehilfen. | https://wave.webaim.org/

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

Hinweis: Die genannten Werkzeuge unter Punkt 1 und 2 der Liste im PDF-Dokument sind nicht mehr aktuell. Eine Auswahl möglicher Tools sind verfügbar unter https://bitvtest.de/test-methodik/web/werkzeugliste

Glossar

  • Alt-Texte: Alternative Textbeschreibungen für Bilder.
  • 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.
  • BFSG: Barrierefreiheitsstärkungsgesetz.
  • BITV: Barrierefreie-Informationstechnik-Verordnung.
  • Dropdowns: Auswahlelemente, bei denen eine Liste von Optionen eingeblendet wird, z. B. in einem -Feld.
  • Formfelder: Eingabeelemente in Formularen wie Textfelder oder Checkboxen.
  • H1–H6: HTML-Überschriftenelemente.
  • 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.
  • JAWS: Ein weit verbreiteter Screenreader für Windows, der Webseiteninhalte für blinde und sehbehinderte Menschen vorliest oder auf einer Braillezeile ausgibt.
  • NVDA: Ein kostenloser Screenreader für Windows, der Inhalte vorliest und mit verschiedenen Hilfstechnologien zusammenarbeitet.
  • Onchange: Ein JavaScript-Ereignis, das ausgelöst wird, wenn sich der Wert eines Elements ändert (z. B. Auswahl in einem Dropdown-Menü).
  • Onclick: Ein JavaScript-Ereignis, das bei einem Mausklick oder Tastendruck (z. B. Enter auf Schaltflächen) ausgelöst wird.
  • Onfocus: Ein JavaScript-Ereignis, das ausgelöst wird, wenn ein Element den Fokus erhält.
  • Programmatisch: Der Begriff bezieht sich auf Informationen im Quellcode, die maschinell ausgelesen werden können, z. B. von Screenreadern.
  • Quellcode: Der programmierte Code einer Webseite, z. B. HTML.
  • UX-Design: Kurz für „User Experience Design“. Gestaltungsansatz, der auf gute Benutzerführung, Verständlichkeit und barrierefreie Bedienbarkeit abzielt.
  • VoiceOver: Der integrierte Screenreader auf Apple-Geräten (z. B. iPhone, iPad, Mac), der Inhalte vorliest und per Gesten oder Tastatur steuerbar ist.
  • WCAG: Die Web Content Accessibility Guidelines sind internationale Richtlinien zur digitalen Barrierefreiheit.