Ansicht von oben: linke Hand auf der Tastatur, rechte Hand auf dem Touchpad des MacBook

Wie Navigation für Tastaturnutzer funktionieren sollte

Barrierefreie Navigation ist essenziell für eine inklusive Website. Menschen, die auf die Tastatur angewiesen sind – etwa aufgrund motorischer Einschränkungen oder weil sie Screenreader nutzen – müssen sich effizient und verständlich durch Websites bewegen können.

Inhaltsverzeichnis:

  1. Beispiel für eine einfache Navigation
  2. Navigation mit Dropdown-Menüs
  3. Tastaturverhalten gemäß den WCAG 2.1 & EN 301 549
  4. Best Practices für Entwickler:innen
  5. Faszit

Beispiel für eine einfache Navigation

<nav aria-label="Hauptnavigation">
  <ul>
    <li><a href="/home">Startseite</a></li>
    <li><a href="/about">Über uns</a></li>
    <li><a href="/contact">Kontakt</a></li>
  </ul>
</nav>

Warum ist das gut?

  • <nav> signalisiert Screenreadern, dass es sich um einen Navigationsbereich handelt.
  • aria-label="Hauptnavigation" gibt diesem Bereich einen eindeutigen Namen.
  • <ul> und <li> vermitteln strukturell, dass es sich um eine Liste von Links handelt.
  • <a>Elemente sind per Tab-Taste erreichbar und standardmäßig tastaturfreundlich.

Navigation mit Dropdown-Menüs

<nav aria-label="Hauptnavigation">
    <ul>
        <li><a href="/home">Startseite</a></li>
        <li>
            <button aria-expanded="false" aria-controls="about-submenu">Über uns</button>
            <ul id="about-submenu" hidden>
                <li><a href="/about/ethos">Philosophie</a></li>
                <li><a href="/about/team">Team</a></li>
                <li><a href="/about/history">Geschichte</a></li>
            </ul>
        </li>
        <li><a href="/contact">Kontakt</a></li>
    </ul>
</nav>

Was passiert hier?

  • <button> anstelle eines <a>-Elements zeigt an, dass hier eine Aktion (Dropdown öffnen) passiert.

  • aria-expanded zeigt an, ob das Menü geöffnet ist.

  • aria-controls referenziert das zu steuernde Element.

  • hidden sorgt dafür, dass das Untermenü für Screenreader und Tastaturnutzer verborgen bleibt, bis es aktiv geöffnet wird.

Tastaturverhalten gemäß den WCAG 2.1 & EN 301 549

  • Tab: Bewegt den Fokus von einem interaktiven Element zum nächsten.

  • Shift + Tab: Rückwärtsbewegung.

  • Enter: Aktiviert Links oder Buttons.

  • Leertaste: Öffnet Buttons (z. B. Dropdown).

  • Escape: Schließt ein geöffnetes Menü und fokussiert wieder die zugehörige Schaltfläche.

Wichtig ab Juni 2025

Laut EN 301 549 (Pflicht ab 28.06.2025 für viele Websites in der EU):

  • Alle interaktiven Elemente müssen per Tastatur erreichbar sein.

  • Fokusindikatoren müssen sichtbar sein.

  • ARIA-Attribute müssen korrekt eingesetzt werden.

  • Die Reihenfolge per Tab muss der visuellen Reihenfolge folgen.

 

Best Practices für Entwickler:innen

  1. Regelmäßiges Testen mit Tastatur und Screenreader (z. B. NVDA, VoiceOver, JAWS).

  2. Saubere semantische HTML-Struktur anstelle von JavaScript-Basteleien.

  3. Verwendung von :focus-visible für klare Fokusgestaltung.

  4. Richtige Nutzung von ARIA, aber: ARIA nur, wenn nötig.

  5. Achtsamer Umgang mit hidden, aria-expanded, aria-controls.

Faszit

Navigation ist ein kritischer Teil der Barrierefreiheit. Ab dem 28. Juni 2025 gelten verbindliche Standards. Wenn du jetzt schon barrierefrei entwickelst, bist du auf der sicheren Seite – und sorgst für eine bessere User Experience für alle.