WCAG-Kriterium Bedienbarkeit praxisnah erklärt

Bedienbarkeit: Inhalte zugänglich und steuerbar machen

Das WCAG-Prinzip Bedienbarkeit stellt sicher, dass alle Funktionen einer digitalen Oberfläche von allen Nutzenden bedient werden können, unabhängig von ihren individuellen Fähigkeiten oder bevorzugten Eingabemethoden. Im Fokus stehen insbesondere Menschen, die keine Maus verwenden, Screenreader nutzen oder mit motorischen Einschränkungen arbeiten. Bedienbarkeit betrifft nicht nur technische Interaktionen, sondern auch die sinnvolle Strukturierung von Navigation, Formularen und Fokusführung.

Warum ist Bedienbarkeit so wichtig?

Ohne durchdachte Bedienung können selbst die besten Inhalte unerreichbar bleiben. Wenn interaktive Elemente nicht per Tastatur erreichbar sind oder der Fokus nicht sichtbar ist, können Menschen mit Beeinträchtigungen digitale Angebote nicht nutzen.

Was ist bei der Umsetzung zu beachten?


Die barrierefreie Bedienung eines Webauftrittes oder einer mobilen Anwendung ist ein Zusammenspiel aus sauberem HTML, semantischer Struktur, sinnvoller Fokusführung und Einhaltung technischer Standards. Redaktion, Entwicklung und UX sollten gemeinsam dafür sorgen, dass Nutzerinteraktionen ohne Hürden möglich sind, mit Tastatur, Bildschirmvergrößerung oder anderen assistiven Technologien.

Zur besseren Verständlichkeit findet ihr am Ende dieses Dokuments ein Glossar mit kurzen Erklärungen zentraler Begriffe rund um die folgenden Erklärungen.

Im Folgenden werden die einzelnen Erfolgskriterien unter dem Prinzip Bedienbarkeit 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.

Erfolgskriterien des Prinzips Bedienbarkeit


2.1 Tastaturzugänglichkeit

  • 2.1.1. Tastatur (Stufe A):
    Alle interaktive Bedienelemente eines Webauftritt müssen vollständig über die Tastatur bedienbar sein. Das bedeutet, dass Menschen, die keine Maus nutzen können, alle Elemente bedienen und steuern können.
    Umsetzungsempfehlung: Nutzt standardisierte HTML-Elemente wie <button> , <input>, und <a href> , die automatisch tastaturzugänglich sind. Prüft regelmäßig, ob sich Menüs, Buttons, Links und Formular per Tab-Taste, Enter, Leertaste oder Pfeiltasten erreichen und steuern lassen. Ein Navigationsmenü sollte nicht nur mit der Maus bedienbar sein, sondern sich auch mit Enter öffnen und mit den Pfeiltasten navigieren lassen.
  • 2.1.2 Keine Tastaturfalle (Stufe A):
    Nutzende dürfen bei der Tastaturbedienung nicht in einem Element (z. B. einem Popup-Fenster oder interaktiven Widget) „feststecken“. Sie müssen jederzeit zu anderen Inhalten navigieren können.
    Umsetzungsempfehlung: Sorgt dafür, dass Fokusbereiche klar definiert sind und Nutzende jederzeit weiter navigieren oder zurückkehren können. Tastaturfallen werden vermieden, in dem man z. B. den Fokus von einem Element wieder entfernen kann, in dem eine Interaktion abgebrochen werden kann.
  • 2.1.4 Zeichentastenbefehle (Stufe A):
    Tastenkürzel, die nur aus einem einzelnen Zeichen bestehen, können versehentlich ausgelöst werden und sollten deshalb vermieden werden, deaktivierbar oder anpassbar sein.
    Umsetzungsempfehlung: Vermeidet Einzeltasten-Shortcuts ohne Modifikatortasten (wie Strg oder Alt). Falls ihr solche Shortcuts verwendet, bietet Möglichkeiten an, diese anzupassen oder abzuschalten. Beispiel: Ein Mailprogramm nutzt „e“ zum Archivieren von E-Mails. Dies sollte entweder auf eine Kombination (z. B. Alt+E) geändert oder durch Nutzende abschaltbar sein.


2.2 Ausreichende Zeit

  • 2.2.1. Zeiteinteilung anpassbar (Stufe A):
    Bei zeitlich begrenzten Inhalten müssen Nutzende die Möglichkeit haben, die Zeitbegrenzung zu verlängern, zu deaktivieren oder Eingaben zu speichern. Zeitlich begrenzte Inhalte sind beispielsweise Online-Formulare, Buchungsprozesse (wie bei Zugtickets, Hotelreservierungen oder Konzertkarten), Online-Tests und -Prüfungen oder automatisierte Abmeldeprozesse bei Inaktivität (z. B. Online-Banking).
    Umsetzungsempfehlung: Implementiert vor Ablauf einer Sitzung eine deutliche Vorwarnung, bevor ein Zeitlimit erreicht ist. Gleichzeitig muss Nutzenden eine klare Möglichkeit gegeben werden, dieses Limit zu verlängern, zu pausieren oder ganz abzuschalten. Ebenfalls sollte sichergestellt sein, dass Nutzereingaben nicht verloren gehen, falls die Zeit doch einmal abläuft, etwa durch automatische Speicherung von Daten oder Zwischenspeichern nach Abschnitten.
  • 2.2.2. Anhalten, Beenden, Ausblenden (Stufe A):
    Automatisch ablaufende Inhalte, wie Animationen oder Karussells, dürfen nicht von anderen Inhalten ablenken und müssen pausier bar oder zu stoppen sein. Diese Steuerungsmöglichkeiten sollten immer eingebaut werden, sobald Inhalte automatisch starten, sich bewegen, sich regelmäßig aktualisieren oder rotieren, und Nutzende diese Inhalte nicht selbst aktiv gestartet haben. Dies gilt insbesondere für Inhalte, die länger als fünf Sekunden laufen, sich wiederholen oder fortlaufend aktualisieren.
    Umsetzungsempfehlung: Bietet gut sichtbare Schaltflächen oder Steuerungen an, um automatisch rotierende oder abspielende Inhalte zu stoppen oder auszublenden, besser noch werden Animationen nicht automatisch gestartet. Achtet darauf, dass die Bedienelemente per Tastatur zugänglich sind.


2.3 Anfälle und körperliche Reaktionen

  • 2.3.1. Drei Blitze oder Unterschwellenwert (Stufe A):
    Vermeidet Inhalte, die häufiger als dreimal pro Sekunde blinken oder blitzen, da diese bei Personen epileptische Anfälle auslösen können.
    Umsetzungsempfehlung: Verzichtet vollständig auf stark blinkende oder blitzende Animationen. Wenn Bewegungseffekte unvermeidbar sind, prüft ihre Frequenz sorgfältig, sodass sie deutlich unter drei Blitzen pro Sekunde bleibt.

2.4 Navigierbar

  • 2.4.1. Blöcke umgehen (Stufe A):
    Wiederholte Inhalte (z. B. Navigation, Header) sollten übersprungen werden können, um direkt zum gewünschten Inhalt zu gelangen. In der Praxis hat sich bewährt, drei „Skip-Links“ einzubauen. Diese müssen am Anfang der Seite stehen, um Nutzenden eine schnelle und unkomplizierte Navigation zu ermöglichen. So müssen Nutzende, die auf Tastaturbedienung oder Screenreader angewiesen sind, nicht bei jedem Seitenaufruf durch Menüs, Kopfbereiche oder Banner navigieren.
    Umsetzungsempfehlung: Setzt am Anfang jeder Seite drei fokussierbare „Zum Inhalt springen“-Links ein, die beim Tabulatorfokus sichtbar werden und direkt zum Hauptinhalt führen.
  • 2.4.2. Seiten-Titel (Stufe A):
    Jede Seite benötigt einen eindeutigen, aussagekräftigen Titel, der ihren Inhalt klar beschreibt. Ein guter Seitentitel setzt sich aus der individuellen Seite und dem Namen des gesamten Webauftrittes zusammen. Ein klar formulierter Seitentitel ist besonders wichtig, weil er die erste Orientierungshilfe für viele Nutzende darstellt, insbesondere für Personen, die Screenreader verwenden oder mehrere Browser-Tabs gleichzeitig geöffnet haben. Der Titel erscheint in der Titelleiste des Browsers, in der Tab-Darstellung und in der Verlaufsliste. Ein gut gewählter Titel hilft, sich schneller zu orientieren, Inhalte zu unterscheiden und gezielt zwischen Seiten zu wechseln. Er trägt maßgeblich zur Zugänglichkeit und zur besseren Nutzbarkeit bei, da unklare oder gleichlautende Titel wie „Startseite“ oder „Home“ keinen Hinweis auf den spezifischen Inhalt oder Zweck der Seite geben.
    Umsetzungsempfehlung: Verwendet das HTML-Element , um für jede Seite einen spezifischen, beschreibenden Titel zu vergeben, der Kontext schafft (z. B. „Kontakt – Stadtverwaltung Musterstadt“).
  • 2.4.3. Fokus-Reihenfolge (Stufe A):
    Die Reihenfolge der Tastaturnavigation muss logisch und nachvollziehbar sein. Sie sollte programmatisch korrekt umgesetzt sein, das heißt: Die Anordnung der Bedienelemente im HTML-Quellcode sollte der visuellen und inhaltlichen Struktur entsprechen. Dadurch wird sichergestellt, dass Nutzende, die ausschließlich mit der Tastatur navigieren – zum Beispiel durch die Tabulatortaste – die Inhalte in der erwarteten Reihenfolge durchlaufen können. Eine logisch aufgebaute Fokusreihenfolge ermöglicht eine barrierefreie Nutzung ohne Verwirrung oder Umwege.
    Umsetzungsempfehlung: Strukturiert eure HTML-Elemente im Quellcode in derselben logischen Reihenfolge, wie sie visuell dargestellt werden. Vermeidet manuelle Eingriffe in die Tab-Reihenfolge (kein übermäßiger Einsatz von tabindex).
  • 2.4.4. Linkzweck (im Kontext) (Stufe A):
    Der Zweck jedes Links muss aus dem Kontext klar hervorgehen. Das bedeutet: Nutzende müssen schon beim Lesen des Linktexts erkennen können, wohin der Link führt und was sie dort erwartet. Dies ist besonders wichtig für Menschen, die Screenreader nutzen, denn diese können sich eine Liste aller Links auf einer Seite ausgeben lassen – dabei wird der Linktext oft aus dem Zusammenhang gerissen.
    Umsetzungsempfehlung: Nutzt klare und beschreibende Linktexte (z. B. „Weitere Informationen zur Anmeldung“ statt nur „hier klicken“). Alternativ stellt sicher, dass der Kontext unmittelbar klarstellt, wohin der Link führt.
  • 2.4.5. Mehrere Wege (Stufe AA):
    Inhalte sollten über mindestens zwei Wege (z. B. Navigation, Suche oder Sitemap) erreichbar sein. Besonders für Menschen mit kognitiven Beeinträchtigungen, Lernschwierigkeiten oder Sehbeeinträchtigungen kann es hilfreich sein, Inhalte auf unterschiedlichen Wegen ansteuern zu können. Auch für Screenreader-Nutzende oder Personen, die sich schnell einen Überblick verschaffen möchten, ist eine alternative Navigation hilfreich.<br /> Umsetzungsempfehlung: Ergänzt die Navigation durch eine leicht auffindbare Suchfunktion oder eine Sitemap, damit Nutzende mehrere Möglichkeiten haben, Inhalte zu finden.
  • 2.4.6. Überschriften und Beschriftungen (Stufe AA):
    Überschriften und Beschriftungen müssen klar und eindeutig den Inhalt oder Zweck des jeweiligen Abschnitts oder Elements beschreiben.
    Umsetzungsempfehlung: Verwendet den Zweck beschreibende Beschriftungen bei Formularen. So verbessert ihr die Orientierung der Nutzenden und Verständlichkeit der Inhalte.
  • 2.4.7. Sichtbarer Fokus (Stufe AA):
    Der aktuell fokussierte Bereich muss deutlich sichtbar sein, um Nutzenden, die eine Tastatur benutzen, Orientierung zu bieten.
    Umsetzungsempfehlung: Gestaltet Fokuszustände per CSS deutlich sichtbar (z.B. eine auffällige Umrandung oder Hintergrundfarbe). Entfernt niemals den Standard-Fokus (outline) ohne sichtbare Alternative.

2.5 Eingabemodalitäten

  • 2.5.1. Zeigergesten (Stufe A):
    Verzichtet auf komplexe Gesten, die mehrere Finger oder komplizierte Bewegungen erfordern. Solche Gesten sind für viele Nutzende schwer auszuführen – zum Beispiel für Personen mit motorischen Beeinträchtigungen, Zittern, geringer Feinmotorik oder eingeschränkter Handbeweglichkeit. Auch bei der Nutzung von unterstützender Technik wie Bildschirmvergrößerungen oder alternativen Eingabemethoden (z. B. Spracheingabe, Einhandbedienung) sind komplexe Gesten oft nicht praktikabel. Wenn wichtige Funktionen ausschließlich über Gesten wie „Zweifingerwischen“, „Dreifachtippen“ oder „Langdruck mit Wisch“ ausgelöst werden, kann dies für bestimmte Gruppen bedeuten, dass sie diese Inhalte nicht oder nur sehr schwer nutzen können.
    Umsetzungsempfehlung: Stellt sicher, dass alle Funktionen auch durch einfache Gesten (Klick, einfacher Tap) ausführbar sind. Wenn ihr komplexe Gesten verwendet, bietet alternative Eingabemöglichkeiten an (z. B. zusätzliche Schaltflächen).
  • 2.5.2. Zeigeraufhebung (Stufe A):
    Aktionen, die durch Zeigerbewegungen ausgelöst werden, müssen einfach abzubrechen oder rückgängig zu machen sein. Besonders für Personen mit motorischen Einschränkungen, eingeschränkter Kontrolle über die Eingabe oder bei der Nutzung von Augen- oder Sprachsteuerung ist dies ein zentrales Nutzungshindernis. Ohne die Möglichkeit, eine Aktion abzubrechen oder rückgängig zu machen, führt ein einzelner Fehler möglicherweise zum Verlust von Eingaben, zu ungewollten Änderungen oder zu Frustration.
    Umsetzungsempfehlung: Gestaltet Drag-and-Drop-Aktionen so, dass sie durch einfaches Loslassen außerhalb des Zielbereichs abgebrochen werden können. Bietet Nutzenden die Möglichkeit, versehentliche Aktionen leicht rückgängig zu machen.
  • 2.5.3. Beschriftung im Namen (Stufe A):
    Die sichtbare Beschriftung eines interaktiven Elements sollte mit dem maschinenlesbaren Namen (z. B. aria-label) übereinstimmen. Das ist wichtig für Spracherkennungstechnologien.
    Umsetzungsempfehlung: Stellt sicher, dass sichtbarer Text und der programmatisch ermittelbare Name identisch sind. Ein Button mit der sichtbaren Beschriftung „Anfrage absenden“ darf nicht nur mit „Absenden“ oder einem anderen verkürzten Text programmiert sein.
  • 2.5.4. Bewegungsauslösung (Stufe A):
    Funktionen, die durch Bewegungen wie Schütteln oder Neigen ausgelöst werden, müssen auch anderweitig bedienbar sein. Denn nicht alle Nutzenden sind in der Lage, solche Bewegungen mit einem Gerät auszuführen – etwa aufgrund motorischer Beeinträchtigungen, eingeschränkter Beweglichkeit, Koordinationsschwierigkeiten oder weil sie Hilfsmittel wie Rollstühle oder Halterungen verwenden, in denen Geräte fest fixiert sind. Auch technische Einschränkungen wie deaktivierte Bewegungssensoren oder die Nutzung auf stationären Geräten (z. B. Desktop-PCs) können solche Gesten unmöglich machen. Wenn eine Funktion ausschließlich über Bewegung gesteuert wird, ist sie für viele Menschen nicht zugänglich. Daher muss es immer eine gleichwertige Alternative geben. Umsetzungsempfehlung: Bietet eine alternative Methode zur Auslösung dieser Funktionen an, z. B. durch zusätzliche sichtbare Schaltflächen oder Menüpunkte. Beispiel: „Zum Anfang scrollen durch Schütteln“ erhält zusätzlich eine fest platzierte Schaltfläche „Nach oben“.

Weiterführende Informationen aus der BFIT

Strukturierung von Textinhalten

Hilfreiche Skip Links erstellen

Tastaturbedienbarkeit umsetzen

Tools zur Prüfung der Bedienbarkeit

  • 1.Tastaturbedienung:
    • Nutzt die Tab-Taste, um zu prüfen
    • Ist jedes interaktive Element erreichbar?
    • Wird der Fokus klar sichtbar angezeigt?
    • Ist die Fokusreihenfolge logisch?
    • Gibt es keine „Tastaturfalle“ (Elemente, in denen man hängen bleibt)?
  • 2. Fokusreihenfolge und Tastaturnavigation
    • Fokus-Reihenfolge anzeigen: Visualisiert die aktuelle Tab-Reihenfolge der Seite, um die logische Navigationsabfolge zu überprüfen
    • Tabindex prüfen: Zeigt alle Elemente mit tabindex an und warnt bei ungünstigen oder fehlerhaften Werten.

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 Tools aus dem PDF-Dokument sind nicht mehr aktuell. Eine aktualisierte Liste der Tools ist verfügbar unter https://bitvtest.de/test-methodik/web/werkzeugliste

Glossar

  • <a href>: HTML-Element zur Erstellung von Links.
  • <button>: Ein HTML-Element für Schaltflächen.
  • <input>: HTML-Element zur Eingabe von Daten, z. B. in Formularen. Es kann verschiedene Typen wie Text, E-Mail oder Checkbox enthalten.
  • <title>: Das HTML-Element, das den Seitentitel im Browser-Tab und in der Verlaufsliste festlegt.
  • 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.
  • 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.
  • Cookie: Kleine Datenspeicher auf Websites, die Nutzungsverhalten speichern.
  • CSS: Cascading Style Sheets. Sprache zur Gestaltung von HTML-Inhalten, z. B. für Farben, Abstände, Schriftgrößen und Layout.
  • Fokusführung: Bezeichnet die gezielte Steuerung der Tastaturnavigation durch interaktive Elemente.
  • Fokusindikatoren: Visuelle Hervorhebungen, die anzeigen, welches Element gerade per Tastatur fokussiert ist (z. B. Rahmen oder Farbänderungen).
  • Formfelder: Eingabeelemente in Formularen wie Textfelder, Checkboxen oder Auswahlmenüs.
  • H1–H6: HTML-Überschriftenelemente.
  • Header: Der obere Bereich einer Webseite, der meist Navigation, Logo und Suchfunktion enthält.
  • HTML: Hypertext Markup Language. Strukturierungssprache für Webseiten, z. B. zur Auszeichnung von Überschriften, Absätzen und Formularen.
  • interaktive Elemente: Bedienbare Inhalte wie Links, Buttons, Formulare oder Widgets, mit denen Nutzende aktiv interagieren können.
  • Karussells: Automatisch rotierende Inhaltselemente (z. B. Bilderslider).
  • Modifikatortasten: Tastenkombinationen, bei denen zusätzliche Tasten wie Strg, Alt oder Shift gedrückt werden.
  • Outline: CSS-Eigenschaft, die Fokuszustände visuell sichtbar macht.
  • Popup-Fenster: Temporäre Fenster, die sich über der Webseite öffnen.
  • Quelltext: Der programmierte Code einer Webseite, z. B. HTML, CSS oder JavaScript.
  • Reihenfolge: Bezieht sich auf die logische und visuelle Abfolge von Elementen, z. B. in Formularen oder beim Tab-Fokus
  • Sitemap: Strukturübersicht aller Seiten einer Website, oft alphabetisch oder thematisch gegliedert.
  • Skip Links: Versteckte Links am Seitenanfang, mit denen Tastaturnutzende direkt zum Hauptinhalt oder zu wichtigen Bereichen springen können.
  • Spracherkennungstechnologien: Technologien, mit denen Webseiten per Sprache gesteuert werden.
  • Tabindex: HTML-Attribut zur Steuerung der Tabulatorreihenfolge.
  • Tab-Taste: Tastaturtaste zur Navigation zwischen fokussierbaren Elementen auf einer Website.
  • UX (User Experience): Erlebnis und Wahrnehmung eines digitalen Angebots durch die Nutzenden.
  • WCAG: Die Web Content Accessibility Guidelines sind internationale Richtlinien zur digitalen Barrierefreiheit.
  • Widget: Kleine interaktive Module auf Webseiten (z. B. Wetteranzeige, Terminkalender), die häufig zusätzlichen Funktionen bieten.