Eine barrierefreie Website erstellen – das ist ein Ziel, das weit über die bloße Einhaltung gesetzlicher Vorschriften hinausgeht. Es geht darum, das Internet für alle Menschen zugänglich zu machen, unabhängig von ihren körperlichen Voraussetzungen oder den Eingabegeräten, die sie nutzen. Während viele Webdesigner bei Barrierefreiheit sofort an Farbkontraste oder Alt-Texte für Bilder denken, wird ein entscheidender Aspekt oft übersehen: die Bedienbarkeit mittels Tastatur.

Stell dir vor, ein Nutzer hat aufgrund einer motorischen Einschränkung Schwierigkeiten, eine Maus präzise zu steuern, oder er nutzt ein Assistenzsystem, das Tastaturbefehle simuliert. Wenn dieser Nutzer auf deine Website kommt und nicht einmal das Hauptmenü ansteuern kann, hast du ihn bereits als Besucher (und potenziellen Kunden) verloren. Eine barrierefreie Website erstellen bedeutet also zwingend, dass jede Funktion, jeder Link und jedes Formular allein über die Tasten Tab, Shift, Enter und die Pfeiltasten erreichbar sein muss.

Warum die Tastatur-Bedienbarkeit der Schlüssel zur UX ist

Tastatur-Navigation ist nicht nur für Menschen mit Behinderungen wichtig. Auch Power-User navigieren oft lieber über Shortcuts, und auf mobilen Endgeräten wie dem iPad nutzen viele ältere Menschen gerne externe Tastaturen. Wenn du eine barrierefreie Website erstellen möchtest, schaffst du ein System, das logisch, vorhersehbar und vor allem sichtbar ist.

Das Problem: Der fehlende Focus-State

Das größte Vergehen bei der Tastatur-Navigation ist das Unterdrücken der sogenannten „Focus Outline“. Viele Designer finden den blauen oder gestrichelten Rahmen, der um ein fokussiertes Element erscheint, optisch störend und deaktivieren ihn per CSS (outline: none;). Das ist fatal. Ohne diesen Rahmen weiß ein Tastatur-Nutzer nicht, wo er sich gerade befindet. Es ist, als würde man im Dunkeln versuchen, einen Lichtschalter zu finden.

Schritt 1: Den Status Quo testen mit Firefox

Bevor du anfängst zu optimieren, musst du wissen, wo deine Seite steht. Ein hervorragendes Tool dafür ist der Firefox-Browser. Während Chrome und Safari zwar grundlegende Funktionen bieten, hat Firefox spezielle „Barrierefreiheit“-Tools integriert, die unschlagbar sind.

1. Öffne deine Website im Firefox.

2. Klicke mit rechts auf ein Element und wähle „Untersuchen“.

3. Wechsle im Inspektor-Fenster auf den Reiter „Barrierefreiheit“.

4. Aktiviere den Button „Tab-Reihenfolge anzeigen“.

Nun siehst du kleine Zahlen neben deinen Elementen. Diese zeigen dir exakt, in welcher Reihenfolge ein Nutzer durch deine Website „tabbt“. Wenn die Zahlen wild über den Bildschirm springen (z. B. vom Footer zurück in den Header), ist deine DOM-Struktur unlogisch und du musst hier nachbessern, um eine wirklich barrierefreie Website erstellen zu können.

Schritt 2: Der Skiplink – Die Überholspur für Profis

Nichts ist frustrierender für einen Tastatur-Nutzer, als bei jedem Seitenwechsel erst durch 50 Menüpunkte der Hauptnavigation tappen zu müssen, bevor er zum eigentlichen Inhalt gelangt. Die Lösung heißt: Skiplink (Sprungmarke).

Ein Skiplink ist ein versteckter Link, der ganz oben im Code deiner Website steht. Er wird erst sichtbar, wenn er den Fokus bekommt (also wenn man das erste Mal Tab drückt). Er führt direkt zum Hauptinhalt der Seite (z. B. zu einem Container mit der ID #main-content).

So implementierst du einen Skiplink:

Viele moderne Themes (wie das GeneratePress oder Astra) bringen Skiplinks von Haus aus mit. Wenn dein Theme (wie oft bei Divi) dies vernachlässigt, kannst du ein leichtgewichtiges Plugin nutzen oder den Link manuell in die header.php deines Child-Themes einfügen. Ziel ist es, den Nutzer direkt zum „Fleisch“ der Seite zu bringen.

Schritt 3: Den Tab-Index richtig steuern

Manche Elemente auf einer Website, wie einfache Textblöcke oder Bilder, bekommen standardmäßig keinen Fokus. Das ist auch gut so, da sie nicht interaktiv sind. Doch manchmal nutzen wir Plugins (z. B. für Lexika oder Popups), die interaktive Elemente enthalten, die WordPress nicht automatisch als solche erkennt.

Hier hilft das Attribut tabindex.

• tabindex="0": Das Element wird in die normale Tab-Reihenfolge aufgenommen.

• tabindex="-1": Das Element kann per Script fokussiert werden, wird aber beim normalen Tabben übersprungen.

Wenn du eine barrierefreie Website erstellen willst, solltest du jedoch vorsichtig mit positiven Werten (tabindex="1", tabindex="2") umgehen. Diese erzwingen eine feste Reihenfolge, die oft mit dem logischen Lesefluss bricht und mehr Verwirrung stiftet als hilft.

Schritt 4: KI-Unterstützung für den Barrierefreiheits-Fix

In Zeiten von KI ist es überraschend einfach geworden, fehlende Barrierefreiheit nachzurüsten. Wenn du zum Beispiel feststellst, dass deine Buttons in einem speziellen Plugin keinen Fokus-Rahmen haben oder nicht anspringbar sind, kannst du KI-Editoren (wie Cursor oder ChatGPT) nutzen, um kleine JavaScript-Helfer zu schreiben.

Beispiel für einen Prompt:

„Schreibe ein JavaScript, das alle Elemente mit der Klasse .meincustom-button sucht. Wenn diese keinen Tabindex haben, füge tabindex="0" hinzu. Achte darauf, dass dies auch für dynamisch nachgeladene Inhalte funktioniert (MutationObserver).“

Solche kleinen Skripte sorgen dafür, dass auch ältere Themes oder starre Plugins barrierefrei werden, ohne dass du das gesamte Design umbauen musst.

Praxis-Check: Logische Reihenfolge vs. CSS-Design

Ein häufiger Stolperstein beim barrierefreie Website erstellen ist das sogenannte „Zick-Zack-Design“. Oft werden Bilder und Texte abwechselnd links und rechts platziert, um das Layout aufzulockern. Im CSS wird dies oft durch flex-direction: row-reverse erreicht.

Die Gefahr: Der Browser-Tab-Fokus folgt der Reihenfolge im HTML-Code, nicht der optischen Darstellung auf dem Bildschirm. Wenn du im Code erst den Text und dann das Bild hast, das Design es aber umgekehrt anzeigt, springt der Fokus für den Nutzer unlogisch hin und her. Achte darauf, dass die visuelle Ordnung mit der Code-Ordnung übereinstimmt.

Fazit: Barrierefreiheit ist ein Prozess, kein Ziel

Eine barrierefreie Website erstellen bedeutet, kontinuierlich an der Bedienbarkeit zu arbeiten. Die Tastatur-Navigation ist dabei einer der dankbarsten Aspekte: Du kannst sie sofort selbst testen, die Fehler sind meist technischer Natur und lassen sich mit kleinen Eingriffen (Skiplinks, Tab-Index, Focus-Styles) beheben.

Nutze die Tools deines Browsers, versetze dich in die Lage eines Nutzers, der keine Maus bedienen kann, und sorge dafür, dass dein Webdesign niemanden ausschließt. Am Ende profitierst du nicht nur von einer besseren SEO-Bewertung durch Google, sondern auch von einer deutlich höheren Reichweite und zufriedeneren Nutzern.