Layer 8Ehrlicher Tech-Support

Webseite ohne Maus nicht bedienbar: Fokus weg oder gefangen

Tabulator springt ins Nichts, oder der Fokus kommt aus dem Fenster nicht mehr heraus. Was WCAG 2.1.1 und 2.1.2 fordern und was nicht.

Aufwand:
ca. 40 Min.
Voraussetzung:
Eine Tastatur, Ein Browser, Die Entwicklerwerkzeuge des Browsers
Gilt für:
Webseiten und Web-Anwendungen, WCAG 2.2 in der Fassung vom 12.12.2024

Das Symptom

Die Maus liegt daneben, und plötzlich wird die Seite zum Rätsel. Der Tabulator springt irgendwohin, aber wohin, ist nicht zu sehen — der Umriss um das aktive Element fehlt. Ein paar Anschläge weiter ist der Fokus in einem eingebetteten Kartenfenster verschwunden und kommt nicht mehr heraus: Tabulator dreht sich im Kreis, Umschalt-Tabulator ebenso, Esc tut nichts. Der Rest der Seite liegt dahinter und ist ab jetzt unerreichbar. Nichts davon meldet einen Fehler. Es hört einfach auf zu funktionieren.

Die „Layer 8“-Wahrheit

Die Tastatur ist nicht die Notlösung für Leute ohne Maus. Sie ist die Schnittstelle, an der praktisch jede assistive Technik hängt. Das W3C schreibt das in seinem Verständnisdokument unverblümt hin: Zu den Tastaturemulatoren zählen Spracheingabe, Blas-Saug-Steuerungen, Bildschirmtastaturen, Abtastverfahren und eine Vielzahl alternativer Tastaturen. Wer die Tastaturbedienung kaputt macht, macht damit nicht ein Eingabegerät kaputt, sondern die gesamte Klasse. Erfolgskriterium 2.1.1 verlangt entsprechend, dass alle Funktionen über eine Tastaturschnittstelle bedienbar sind — ohne Zeitvorgaben für einzelne Anschläge, mit einer einzigen Ausnahme für echte Bahnabhängigkeit wie Freihandzeichnen. Gerade Linien und Grundformen zeichnen, Fenster in der Größe ändern und Objekte an eine Stelle ziehen — sofern der Weg dorthin keine Rolle spielt — fallen laut demselben Dokument ausdrücklich nicht darunter.

Was gern als Ausrede kommt, steht sogar dabei: Niemand verlangt den Verzicht auf die Maus. Die Anmerkung zu 2.1.1 sagt wörtlich, das Kriterium verbiete zusätzliche Eingabearten nicht und solle nicht davon abhalten. Es geht um „zusätzlich“, nicht um „stattdessen“. Und die naheliegende Ausflucht, das System könne den Zeiger doch per Ziffernblock steuern, hat das W3C ebenfalls vorweggenommen: Diese Funktion erfüllt das Kriterium nicht, weil sie kein Tastaturäquivalent zur Anwendung ist, sondern ein Mausäquivalent. Für das Programm sieht sie aus wie eine Maus. Das Problem bleibt also exakt bestehen, es dauert nur länger.

Der spektakulärere Fehler ist die Falle, und 2.1.2 beschreibt sie präzise: Wenn der Fokus mit der Tastatur in ein Bauteil hineinbewegt werden kann, muss er sich allein mit der Tastatur auch wieder herausbewegen lassen — und falls dafür mehr nötig ist als unveränderte Pfeiltasten, der Tabulator oder andere übliche Ausstiegswege, muss dem Benutzer der Weg mitgeteilt werden. Bemerkenswert daran ist, was das Kriterium nicht verbietet. Ein Dialogfenster, das den Fokus absichtlich festhält, ist nach dem Verständnisdokument ausdrücklich in Ordnung, solange der Benutzer weiß, wie er wieder herauskommt. Der Standard legt dabei bewusst nicht fest, was als übliche Ausstiegsmethode gilt — das hänge von Hardware, Browser und Betriebssystem ab —, nennt aber Esc als das, was in Umgebungen mit körperlicher Tastatur verbreitet erwartet wird. Der Fehler ist also nicht das Festhalten. Der Fehler ist das Verschweigen.

Und dann kommt der Punkt, der erklärt, warum dieses eine Kriterium so unverhältnismäßig hart wiegt. Die WCAG führen die Tastaturfalle in der Konformitätsanforderung zur Nichtbeeinträchtigung — zusammen mit der Lautstärkeregelung, der Blitzgrenze und dem Anhalten bewegter Inhalte. Diese vier gelten für sämtliche Inhalte einer Seite, auch für solche, auf die sich die Seite zur Erfüllung anderer Kriterien gar nicht stützt, weil ihr Versagen jede Nutzung der Seite stören kann. Übersetzt: Eine Falle in einem beliebigen eingebetteten Ausschnitt macht alles unerreichbar, was dahinter liegt. Der Werbebanner am Seitenende kann den Bezahlvorgang abschneiden, obwohl er mit ihm nichts zu tun hat.

Der Rest sind Kleinigkeiten mit großer Wirkung. Die eine Zeile, die den Fokusumriss abschaltet, weil er im Entwurf störte — danach springt der Fokus zwar, aber unsichtbar. Der von Hand vergebene positive Reihenfolgewert, der ein Element vor alle anderen zieht und die Reihenfolge des gesamten Dokuments verdreht. Die fest oben klebende Kopfleiste, die sich beim Tabben über genau das Element schiebt, das gerade den Fokus bekommen hat — seit WCAG 2.2 ein eigenes Kriterium, weil es so oft passiert. Und die fehlende Sprungmarke, die jeden Tastaturbenutzer auf jeder einzelnen Unterseite durch dieselben vierzig Navigationslinks schickt.

Das Beste an dieser ganzen Fehlerklasse: Sie ist die einzige in der Barrierefreiheit, die man ohne Werkzeug, ohne Schulung und ohne Budget vollständig selbst prüfen kann. Maus weglegen, den Weg abgehen, an dem für den Betrieb etwas hängt. Wenn du selbst nicht durchkommst, brauchst du über den Rest nicht mehr zu diskutieren.

Die echte, verifizierte Lösung

1000 % faktenbasiert. Jeder Befehl ist real, jeder Pfad existiert. Schritt für Schritt:

  1. 1.

    Die Maus wegräumen und den wichtigsten Weg wirklich abgehen

    Nicht überfliegen, sondern durchführen: Vom Seitenanfang mit dem Tabulator bis zum Ziel, zurück mit Umschalt und Tabulator, auslösen mit Eingabetaste und Leertaste, in Listen und Reitern mit den Pfeiltasten, aus Überlagerungen heraus mit Esc. Der Testfall ist nicht die Startseite, sondern der Vorgang, an dem Geld oder Termin hängen — Anmeldung, Formular, Bezahlung, Bestätigung. Wo du selbst hängen bleibst, bleibt jemand anders dauerhaft hängen.

  2. 2.

    Sichtbar machen, wo der Fokus gerade steht

    Erfolgskriterium 2.4.7 verlangt, dass eine tastaturbedienbare Oberfläche eine Betriebsart hat, in der die Fokusanzeige sichtbar ist. Der häufigste Einzelfehler im Netz ist eine Zeile, die genau das abschaltet, weil der Rahmen jemandem im Entwurf nicht gefiel. Wer den Umriss nicht mag, ersetzt ihn — er löscht ihn nicht:

    /* Der Klassiker, der die Seite blind macht: */
    *:focus { outline: none; }
    
    /* Stattdessen: eigene, deutlich sichtbare Anzeige */
    :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
    
  3. 3.

    Die Falle dort suchen, wo fremder Code anfängt

    Tastaturfallen entstehen selten im eigenen Text und fast immer an Nahtstellen: eingebettete Karten, Videofenster, Bezahlfelder in einem fremden Rahmen, Zustimmungsdialoge, selbstgebaute Auswahlfelder. Test: In jedes dieser Bauteile hineinspringen und versuchen, mit Tabulator, Umschalt-Tabulator, Pfeiltasten und Esc wieder herauszukommen. Gelingt es nur mit einer ungewöhnlichen Taste, ist das erlaubt — aber dann muss die Seite diese Taste vorher nennen.

  4. 4.

    Die Fokusreihenfolge gegen die Leserichtung prüfen

    Erfolgskriterium 2.4.3 verlangt, dass die Fokusreihenfolge Bedeutung und Bedienbarkeit erhält. Kaputt geht das meistens durch von Hand vergebene positive Reihenfolgewerte: Ein einziger davon zieht das Element vor alle normalen Elemente der Seite und verdreht die Reihenfolge für den Rest des Dokuments. Der Wert null nimmt ein Element in die natürliche Reihenfolge auf, minus eins macht es nur programmatisch fokussierbar:

    <!-- verdreht die Reihenfolge der ganzen Seite -->
    <button tabindex="5">Absenden</button>
    
    <!-- richtig: natürliche Reihenfolge, keine Nummernvergabe -->
    <button>Absenden</button>
    <div tabindex="-1" id="dialogtitel">…</div>
    
  5. 5.

    Eine Sprungmarke an den Anfang setzen

    Erfolgskriterium 2.4.1 verlangt einen Weg, wiederkehrende Blöcke zu überspringen. Ohne ihn tabbt sich jemand auf jeder Unterseite erneut durch vierzig Navigationslinks, bevor der Inhalt kommt. Die Lösung ist der erste fokussierbare Link im Dokument — er darf optisch verborgen sein, solange er bei Fokus sichtbar wird, aber niemals mit einer Technik, die ihn ganz aus der Fokusreihenfolge nimmt:

    <a href="#inhalt" class="sprungmarke">Zum Inhalt springen</a>
    …
    <main id="inhalt" tabindex="-1">…</main>
    
  6. 6.

    Prüfen, ob die klebrige Kopfleiste den Fokus verschluckt

    Erfolgskriterium 2.4.11 ist neu in WCAG 2.2 und trifft ein weit verbreitetes Entwurfsmuster: „When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.“ Eine fest oben stehende Leiste schiebt sich beim Tabben regelmäßig über genau das Element, das gerade den Fokus bekommen hat. Sichtbar ist das nur, wenn man tatsächlich tabbt — mit der Maus fällt es nie auf.

  7. 7.

    Einbuchstaben-Kürzel abschaltbar machen

    Wer ein Kürzel auf einen nackten Buchstaben legt, löst es bei jedem aus, der per Spracheingabe arbeitet oder beim Tippen abrutscht. Erfolgskriterium 2.1.4 lässt genau drei Auswege: Das Kürzel lässt sich abschalten, es lässt sich auf eine Kombination mit einer nicht druckbaren Taste umlegen, oder es ist nur aktiv, solange das zugehörige Bauteil den Fokus hat. Einer davon muss zutreffen — keiner ist keine Option.

Häufige Fragen (FAQ)

?Heißt das, ich darf keine Maus mehr voraussetzen?

Es heißt, du darfst sie nicht voraussetzen — nicht, dass du sie abschaffen sollst. Erfolgskriterium 2.1.1 der WCAG 2.2 verlangt: „All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.“ Die zugehörige Anmerkung stellt ausdrücklich klar: „This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation.“ Die Ausnahme ist außerdem eng: Sie meint echte Bahnabhängigkeit wie Freihandzeichnen. Das Verständnisdokument zählt ausdrücklich auf, was nicht darunter fällt: „Drawing straight lines, regular geometric shapes, re-sizing windows and dragging objects to a location (when the path to that location is not relevant) do not require path dependent input.“

?In meinem Fenster ist der Fokus absichtlich gefangen. Ist das ein Verstoß?

Nein, wenn man wieder herauskommt. Das W3C-Verständnisdokument zu 2.1.2 sagt das wörtlich: „There may be times when it's appropriate for a web page to restrict focus to a subsection of the content – for example, when the user is inside a modal dialog or popover. This does not fail the requirements of this criterion, as long as the user knows how to untrap the focus and leave that component.“ Der Standard definiert dabei bewusst nicht, was als übliche Ausstiegsmethode gilt: „This specification does not define what constitutes a standard exit method – this is dependent on the user's hardware, user agent, and operating system.“ In den meisten Umgebungen mit körperlicher Tastatur nennt das Dokument die Esc-Taste als verbreitete Ausstiegsmethode. Braucht es etwas anderes, muss man es dem Benutzer sagen.

?Warum wiegt ausgerechnet die Tastaturfalle so schwer?

Weil sie nicht nur ihr eigenes Bauteil betrifft, sondern alles danach. Die WCAG führen 2.1.2 in Konformitätsanforderung 5.2.5 Non-Interference — zusammen mit der Lautstärkeregelung, der Blitzgrenze und dem Anhalten bewegter Inhalte — als eines der Kriterien, die „apply to all content on the page, including content that is not otherwise relied upon to meet conformance, because failure to meet them could interfere with any use of the page“. Eine Falle in einem eingebetteten Kartenausschnitt am Seitenende macht damit den kompletten Weg dahinter unerreichbar. Für jemanden, der nur mit der Tastatur arbeitet, endet die Seite dort — nicht als Meldung, sondern als Sackgasse.

?Reicht nicht die Maussteuerung per Ziffernblock, die das System anbietet?

Nein, und die Begründung ist logisch statt technisch. Das W3C-Verständnisdokument zu 2.1.1 hält fest: „The use of MouseKeys would not satisfy this success criterion because it is not a keyboard equivalent to the application; it is a mouse equivalent (i.e., it looks like a mouse to the application).“ Der Anwendung ist eine so erzeugte Bewegung nicht von einer echten Maus zu unterscheiden — der Zeiger muss also weiterhin auf Pixel gesteuert werden, nur eben mühsamer. Dasselbe Dokument nennt den eigentlichen Grund, warum die Tastaturschnittstelle zählt: An ihr hängen Spracheingabe, Blas-Saug-Steuerungen, Bildschirmtastaturen, Scan-Verfahren und alternative Tastaturen.

Belege

Diese Seite ist gegen die folgenden Primärquellen geprüft – Hersteller, Standard oder Gesetzestext. Wer es nicht glaubt, muss es nicht: Da steht, wo es nachzulesen ist.

Zuletzt geprüft am . Dokumentation altert – ein Datum daneben ist der einzige ehrliche Umgang damit.

Auch zu finden unter

Verwandte Fehler