Tastaturnavigation

Vollständige Tastaturzugänglichkeit Muss

Alle Funktionen müssen mit der Tastatur erreichbar und bedienbar sein (WCAG 2.1.1). Es darf keine Tastaturfalle entstehen (WCAG 2.1.2).

Skip-Links Muss

Jede Seite muss einen Skip-Link bereitstellen, der bei Fokus sichtbar wird und zum Hauptinhalt springt (WCAG 2.4.1).

<body>
  <a class="skip-link" href="#main">Zum Inhalt springen</a>
  <header>...</header>
  <main id="main">...</main>
</body>

Tab-Reihenfolge Muss

Die Tab-Reihenfolge muss der visuellen und logischen Reihenfolge entsprechen (WCAG 2.4.3).

tabindex="0" – Element in natürliche Tab-Reihenfolge aufnehmen
tabindex="-1" – Programmatisch fokussierbar, aber nicht in Tab-Reihenfolge
tabindex="1+" – Niemals verwenden. Verursacht unvorhersehbare Reihenfolgen.

Focus-Trapping (Modale Dialoge) Muss

In modalen Dialogen muss der Fokus innerhalb des Dialogs gehalten werden. Beim Schliessen muss der Fokus zum auslösenden Element zurückkehren.

Tastaturmuster für Widgets

Erwartete Tastaturinteraktion nach WAI-ARIA Authoring Practices
Widget	Tasten
Tabs	Pfeiltasten zwischen Tabs, Tab zum Inhalt
Dropdown-Menü	Enter/Space öffnen, Pfeiltasten navigieren, Escape schliessen
Dialog	Tab innerhalb, Escape schliessen
Accordion	Enter/Space öffnen/schliessen, Pfeiltasten zwischen Headers

Tastenkürzel-Konflikte Muss

Wenn Tastenkürzel mit einzelnen Buchstaben, Ziffern oder Sonderzeichen implementiert werden (WCAG 2.1.4), muss mindestens eine der folgenden Bedingungen erfüllt sein:

Abschaltbar: Es gibt einen Mechanismus, um das Tastenkürzel zu deaktivieren.
Umkonfigurierbar: Das Tastenkürzel kann auf eine andere Taste (inkl. Modifier-Tasten) umgelegt werden.
Nur bei Fokus aktiv: Das Tastenkürzel ist nur aktiv, wenn die zugehörige Komponente fokussiert ist.