Prüfpunkt 2.1.1Stufe ATastatur und Fokus
Warum muss eine Website ohne Maus bedienbar sein?
Eine Website muss ohne Maus bedienbar sein, weil viele Menschen ausschließlich die Tastatur nutzen: blinde Menschen mit Vorleseprogramm, Menschen mit Zittern oder Lähmungen und Nutzer von Spezialtastaturen. Erreicht die Tabulatortaste einen Menüpunkt oder eine Schaltfläche nicht, ist diese Funktion für all diese Menschen schlicht nicht vorhanden — so, als hätten Sie sie nie gebaut. Das WCAG-Kriterium 2.1.1 verlangt deshalb die vollständige Tastaturbedienbarkeit.
Tastaturbedienung im Alltag: Tab, Eingabetaste und Pfeiltasten
Die Bedienung ohne Maus folgt einem festen Muster. Die Tabulatortaste bewegt eine sichtbare Markierung von Element zu Element: vom Logo zum Menü, vom Menü zum Suchfeld, weiter zu Links und Schaltflächen. Die Eingabetaste öffnet das markierte Element, Pfeiltasten steuern Menüs und Auswahllisten. Ein Beispiel: Wer Ihr Kontaktformular ausfüllt, springt mit Tab von Feld zu Feld und sendet am Ende mit der Eingabetaste ab. Dieses Muster funktioniert nur, wenn jedes Bedienelement technisch als Link, Schaltfläche oder Formularfeld angelegt ist. Ein klickbarer Textabsatz, den ein Skript zur Schaltfläche macht, sieht mit der Maus gleich aus — für die Tastatur existiert er nicht.
So prüft der Prüfservice die Tastaturbedienung
Der Prüfservice drückt auf Ihrer Seite tatsächlich die Tabulatortaste, Halt für Halt, bis zum Ende des Dokuments. Zusätzlich durchsucht er den Quelltext nach Bedienelementen, die nur auf Mausklick reagieren: Elemente mit Klick-Anweisung, die für die Tastatur unerreichbar sind. Findet er solche Elemente, gilt das Kriterium als verstoßen, und der Bericht benennt das erste betroffene Element samt Beleg-Bildschirmfoto. Erreicht die Tabulatortaste trotz vorhandener Bedienelemente keinen einzigen Halt, ist auch das ein Verstoß. Bleibt die Messung unentschieden, weist der Bericht das offen als manuellen Prüfpunkt aus — eine leere Prüfung gilt bei uns als Fehler, nie als Freibrief.
Beispiele
Klick-Handler auf einem div
<div class="knopf" onclick="warenkorb()">In den Warenkorb</div><button type="button" onclick="warenkorb()">In den Warenkorb</button>Ein div erreicht die Tabulatortaste nicht und reagiert nicht auf Enter oder Leertaste. Ein button kann beides von selbst.
Menü öffnet nur beim Überfahren
.menue li:hover > ul { display: block; }.menue li:hover > ul,
.menue li:focus-within > ul { display: block; }focus-within öffnet das Untermenü auch, wenn der Fokus per Tastatur auf einem Eintrag liegt.
So gehen Sie es an
- Legen Sie die Maus beiseite und bedienen Sie Ihre Startseite fünf Minuten nur mit Tabulatortaste, Eingabetaste und Pfeiltasten.
- Prüfen Sie besonders Menüs, Suchfeld und Warenkorb — dort verstecken sich die meisten Stellen, die nur auf Mausklick reagieren.
- Bitten Sie Ihre Agentur, für jedes klickbare Element echte Bedienelemente zu verwenden: Link, Schaltfläche oder Formularfeld statt klickbarem Text.
- Wiederholen Sie den Tastatur-Test nach jedem größeren Umbau — ein neues Menü-Skript kann die Tastaturbedienung unbemerkt entfernen.
Weiter im Prüfbereich Barrierefreiheit
- Was ist eine Tastaturfalle auf einer Website?Eine Tastaturfalle hält den Tastaturfokus gefangen: Wer hineingerät, kommt ohne Maus nie wieder heraus. So erkennen und vermeiden Sie sie.
- Warum brauchen Tastenkürzel aus einem einzelnen Buchstaben eine Abschaltung?Kürzel aus einem einzelnen Buchstaben lösen bei Sprachsteuerung ungewollt aus. WCAG 2.1.4 verlangt: abschaltbar, umbelegbar oder nur bei Fokus aktiv.
- Warum müssen Zeitlimits auf Websites verlängerbar sein?Zeitlimits müssen abschaltbar, anpassbar oder verlängerbar sein, weil Menschen unterschiedlich schnell arbeiten. Das verlangt WCAG-Kriterium 2.2.1.
- Warum brauchen bewegte Inhalte auf Websites eine Pause-Funktion?Alles, was sich länger als fünf Sekunden automatisch bewegt, muss sich pausieren, stoppen oder ausblenden lassen. Das verlangt WCAG-Kriterium 2.2.2.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Glenn Carstens-Peters, CC0
.jpg){kind=link}