Bedienung mit der Tastatur

Was wir prüfen

Wir öffnen die Startseite in einem Browser in Desktop-Grösse und drücken bis zu 40-mal die Tab-Taste, so wie es Menschen tun, die keine Maus benutzen. Bei jedem Schritt prüfen wir:

• Erreichbarkeit: Lässt sich überhaupt ein Link oder Button mit der Tastatur erreichen?
• Sichtbarer Fokus: Verändert sich das angesprungene Element sichtbar, etwa durch einen Rahmen, eine Unterstreichung oder eine andere Farbe?
• Unsichtbare Ziele: Landet der Fokus auf Elementen, die man nicht sieht, etwa in einem geschlossenen Menü?
• Tastaturfalle: Springt die Tab-Taste im Kreis, ohne den Rest der Seite zu erreichen?
• Sprunglink: Gibt es bei Seiten mit vielen Tab-Schritten am Anfang einen Link «Zum Inhalt springen»?

Den Cookie-Hinweis schliessen wir vor dem Durchlauf, wie es ein Besucher zuerst tun muss: Wir lehnen ab oder blenden ihn aus, eine Einwilligung geben wir nie. Ein anderer Dialog darf den Fokus festhalten, bis er geschlossen ist. Wir bewerten dann die Schritte bis dahin. Die automatische Prüfung ersetzt keinen Test mit echten Nutzerinnen und Nutzern.

Warum das wichtig ist

Die Tab-Taste ist für viele Menschen die Maus. Sie springen damit von Link zu Link und lösen mit Enter aus. Damit das funktioniert, braucht es drei Dinge:

1. Alles Wichtige muss erreichbar sein. Ein Menü, das nur auf Mausbewegung aufklappt, oder ein «Button», der in Wahrheit ein anklickbares Bild ist, bleibt für sie verschlossen.
2. Man muss sehen, wo man ist. Ohne sichtbaren Fokus ist das wie Bedienen mit verbundenen Augen. Häufigste Ursache ist eine einzige CSS-Zeile, outline: none, mit der Designer den «störenden» Rahmen entfernen.
3. Man darf nicht hängen bleiben. Springt der Fokus im Kreis, etwa in einem Slider oder einem Chat-Widget, kommt man nicht mehr weiter.

Unsichtbare Ziele verwirren zusätzlich: Man drückt Tab, und scheinbar passiert nichts, weil der Fokus gerade durch ein verstecktes Untermenü wandert.

Die Bedienbarkeit mit der Tastatur ist eine Grundanforderung der Barrierefreiheitsrichtlinien WCAG.

So behebst Du es

Fokus sichtbar machen

Entferne outline: none aus dem CSS oder ersetze es durch eine deutliche eigene Markierung:

:focus-visible {
  outline: 3px solid #0a5bd3;
  outline-offset: 2px;
}

Der Rahmen erscheint dann nur bei Bedienung mit der Tastatur.

Unsichtbare Elemente aus der Tab-Reihenfolge nehmen

Geschlossene Menüs, ausgeblendete Slider-Folien und versteckte Pop-ups sollten nicht fokussierbar sein. Blende sie mit hidden oder display: none aus oder setze das Attribut inert, solange sie geschlossen sind.

Echte Links und Buttons verwenden

Was eine Seite öffnet, ist ein <a href>, was eine Aktion auslöst, ein <button>. Beide sind von Haus aus mit der Tastatur bedienbar. Anklickbare <div>- oder <span>-Elemente sind es nicht.

Link «Zum Inhalt springen»

Ein Link ganz am Anfang der Seite, der beim Fokussieren erscheint und zum Hauptinhalt springt, erspart den Weg durch die ganze Navigation. Viele WordPress-Themes haben ihn bereits eingebaut.

WordPress und Baukästen

Wähle Themes und Plugins mit dem Vermerk «Accessibility Ready». In Page-Buildern wie Elementor prüfst Du die Einstellungen für Fokus-Stile. Wix hat einen eingebauten «Barrierefreiheits-Assistenten».

So prüfst Du es selbst

Klick in die Adresszeile und drück dann wiederholt die Tab-Taste. Siehst Du bei jedem Schritt, wo Du bist? Erreichst Du Menü, Kontaktformular und Telefonnummer? Kommst Du bis zur Fusszeile durch?

Häufige Fragen

Wer bedient denn Websites mit der Tastatur?

Menschen mit motorischen Einschränkungen, blinde Menschen mit Vorlesesoftware, Menschen mit Sprachsteuerung oder Schaltern, aber auch viele Vielnutzer, die mit der Tastatur schneller sind. Und alle, deren Maus oder Trackpad gerade streikt.

Der Fokusrahmen sieht hässlich aus. Darf man ihn nicht anpassen?

Doch, unbedingt. Er darf zum Design passen, etwa in der Markenfarbe. Mit :focus-visible erscheint er nur bei Bedienung mit der Tastatur, nicht beim Klicken mit der Maus.