Tastaturbedienbarkeit: Ohne Maus durch die Seite

Tastaturbedienbarkeit ist ein wesentlicher Aspekt der digitalen Barrierefreiheit. Sie ermöglicht es Nutzern, die keine Maus verwenden können oder wollen, eine Website vollständig zu bedienen. Dies ist besonders wichtig für Menschen mit motorischen Einschränkungen, die auf Tastaturbefehle angewiesen sind. In diesem Beitrag erfahren Sie, wie Sie Ihre Website für die Tastaturbedienbarkeit optimieren können, welche WCAG-Kriterien dabei zu beachten sind und erhalten praktische Code-Beispiele für die Umsetzung.

Grundlagen der Tastaturbedienbarkeit

Die Tastaturbedienbarkeit einer Website ist dann gegeben, wenn alle Funktionen und Inhalte der Seite über die Tastatur erreichbar und bedienbar sind. Dies umfasst die Navigation durch Links, Formulare, Schaltflächen und andere interaktive Elemente. Die WCAG 2.2 (Web Content Accessibility Guidelines) definieren klare Anforderungen für die Tastaturbedienbarkeit, insbesondere in den Erfolgskriterien 2.1.1 Tastatur und 2.4.7 Fokus sichtbar.

Um die Tastaturbedienbarkeit zu gewährleisten, müssen folgende Punkte beachtet werden:
- Fokus-Reihenfolge: Die Reihenfolge, in der die interaktiven Elemente per Tabulator-Taste durchlaufen werden, muss logisch und nachvollziehbar sein.
- Fokus-Indikator: Es muss visuell erkennbar sein, welches Element gerade den Fokus hat.
- Tastaturfallen: Es darf keine Situationen geben, in denen der Nutzer in einem Element 'gefangen' ist und nicht mehr mit der Tastatur herauskommt.

Ein Beispiel für eine einfache Navigation per Tastatur:

<nav>
  <a href="#home">Startseite</a>
  <a href="#about">Über uns</a>
  <a href="#contact">Kontakt</a>
</nav>

In diesem Beispiel können die Links per Tabulator-Taste durchlaufen und mit der Enter-Taste aktiviert werden.

Technische Umsetzung und Best Practices

Die technische Umsetzung der Tastaturbedienbarkeit erfordert eine sorgfältige Planung und Implementierung. Hier sind einige Best Practices und technische Details:

1. HTML-Struktur: Verwenden Sie semantisches HTML, um die natürliche Tastaturnavigation zu unterstützen. Elemente wie <button>, <a>, <input> und <select> sind von Haus aus tastaturbedienbar.

2. ARIA-Rollen und -Eigenschaften: Verwenden Sie ARIA (Accessible Rich Internet Applications), um die Zugänglichkeit komplexer Widgets zu verbessern. Beispielsweise kann role="button" einem <div> die Funktionalität einer Schaltfläche verleihen.

3. JavaScript-Ereignisse: Achten Sie darauf, dass alle interaktiven Funktionen auch per Tastatur ausgelöst werden können. Verwenden Sie onkeydown oder onkeypress zusätzlich zu onclick.

4. Fokus-Management: In Single-Page-Applications (SPAs) oder modalen Dialogen ist ein korrektes Fokus-Management entscheidend. Verwenden Sie element.focus(), um den Fokus programmatisch zu setzen.

Ein Beispiel für die Implementierung einer tastaturbedienbaren Schaltfläche:

<div role="button" tabindex="0" onkeydown="if(event.key === 'Enter' || event.key === ' ') { handleClick(); }">Klick mich</div>

In diesem Beispiel kann die Schaltfläche sowohl per Mausklick als auch per Tastatur (Enter oder Leertaste) aktiviert werden.

WCAG-Kriterien und Compliance

Die Einhaltung der WCAG-Kriterien ist entscheidend für eine barrierefreie Website. Im Kontext der Tastaturbedienbarkeit sind folgende Kriterien besonders relevant:

• 2.1.1 Tastatur: Alle Funktionen müssen über eine Tastaturschnittstelle bedienbar sein, ohne dass spezifische Timings für einzelne Tastatureingaben erforderlich sind.
• 2.4.3 Fokus-Reihenfolge: Wenn eine Seite sequenziell navigiert wird und die Navigationssequenzen Bedeutung haben, müssen die fokussierbaren Komponenten in einer Reihenfolge angeordnet sein, die Bedeutung und Bedienbarkeit bewahrt.
• 2.4.7 Fokus sichtbar: Jede tastaturbedienbare Benutzerschnittstelle muss einen Modus haben, in dem der Tastaturfokus sichtbar ist.

Um diese Kriterien zu erfüllen, sollten Sie regelmäßige Accessibility Audits durchführen und Tools wie axe oder Lighthouse verwenden, um potenzielle Probleme zu identifizieren und zu beheben.

Eine Tabelle zur Übersicht der relevanten WCAG-Kriterien:

Kriterium	Beschreibung
2.1.1	Tastatur
2.4.3	Fokus-Reihenfolge
2.4.7	Fokus sichtbar

Fazit

Die Tastaturbedienbarkeit ist ein zentraler Bestandteil einer barrierefreien Website. Durch die Beachtung der WCAG-Kriterien, die Verwendung semantischen HTMLs und die Implementierung von ARIA-Rollen können Sie sicherstellen, dass Ihre Website für alle Nutzer zugänglich ist. Regelmäßige Tests und Audits helfen dabei, die Zugänglichkeit kontinuierlich zu verbessern.

Testen Sie die Tastaturbedienbarkeit Ihrer Website und identifizieren Sie Verbesserungspotenziale. Kontaktieren Sie uns für ein professionelles Accessibility Audit.