Tastaturbedienung: Ist Ihre Website ohne Maus nutzbar?

Tastaturbedienung bedeutet, dass jeder Link, jede Schaltfläche und jedes Formular Ihrer Website ohne Maus funktioniert. In diesem Leitfaden erklären wir, Talha Aslan und Team, Fokusstile, Tabreihenfolge, Skiplinks sowie typische Fallen in Menüs und Dialogen. Am Ende finden Sie einen Test für zehn Minuten und eine Checkliste für Ihre eigene Website.

Das klingt zunächst einfach. Allerdings scheitern viele Websites schon beim ersten Versuch: Das Menü öffnet sich nicht, der Cookiebanner lässt sich nicht schließen, oder der Fokusrahmen fehlt komplett. Kurz gesagt: Ein Design kann mit der Maus perfekt wirken und trotzdem bei der Tastaturbedienung versagen.

Dieser Beitrag behandelt nur einen Ausschnitt des größeren Themas. Das Gesamtbild, einschließlich Farben und Textalternativen, beschreiben wir in unserem Beitrag zur barrierefreien Website nach WCAG. Hier konzentrieren wir uns dagegen auf Tastatur und Fokusreihenfolge.

Wer ist auf die Tastaturbedienung angewiesen?

Viele Teams glauben, nur blinde Menschen bräuchten eine Tastaturbedienung. Screenreader Nutzer arbeiten tatsächlich mit der Tastatur; allerdings sind sie längst nicht die einzige Gruppe. Menschen mit eingeschränkter Feinmotorik, Zittern oder Schmerzen beim Greifen der Maus bevorzugen ebenfalls die Tastatur oder Geräte, die sich wie eine Tastatur verhalten.

Zudem ist ein Teil dieser Zielgruppe nur vorübergehend betroffen. Denken Sie an jemanden mit Gips am Handgelenk, an einen defekten Touchpad oder an eine Buchhalterin, die Formulare aus Gewohnheit per Tab ausfüllt. Außerdem senden Schaltersteuerungen, Sprachsteuerung und manche Augensteuerungen im Hintergrund Tastaturereignisse.

• Blinde und sehbehinderte Besucher mit Screenreader.
• Menschen mit motorischen Einschränkungen, die keine Maus nutzen können.
• Nutzer mit vorübergehender Verletzung oder defekter Hardware.
• Erfahrene Nutzer, die Formulare zügig mit der Tabtaste ausfüllen.
• Alle, deren Hilfstechnik Tastatureingaben nachahmt.

Die Tastaturbedienung ist also kein Extra für eine kleine Minderheit. Stattdessen bildet sie eine Grundschicht der Benutzbarkeit. Fehlt sie, verlassen all diese Besucher die Seite, bevor sie Ihr Formular erreichen.

Welche WCAG Kriterien regeln die Tastaturbedienung?

Die WCAG (Web Content Accessibility Guidelines) sind der internationale Standard für digitale Barrierefreiheit, herausgegeben vom W3C. Konkret verteilen sich die Regeln zur Tastatur auf mehrere Erfolgskriterien, und jedes zielt auf ein anderes Problem. Die folgende Tabelle fasst die Kriterien zusammen, denen wir in der Praxis am häufigsten begegnen.

Laut der W3C Erläuterung zu 2.1.1 Tastatur gilt nur eine Ausnahme: Funktionen, die vom Bewegungspfad des Nutzers abhängen, etwa freihändiges Zeichnen. Für alles andere, auch Ziehen und Ablegen, Größe ändern oder Objekte verschieben, brauchen Sie daher eine Tastaturalternative.

Was ist der Fokus, und warum muss der Fokusindikator sichtbar sein?

Zunächst legt der Fokus fest, welches Element gerade die Tastatureingabe empfängt. Wer mit der Maus arbeitet, folgt dem Zeiger mit den Augen. Wer die Tastatur nutzt, folgt dagegen nur dem Fokusindikator. Dieser erscheint meist als Rahmen, Unterstreichung oder Farbwechsel rund um das Element.

Ohne deutlichen Indikator tappt der Nutzer im Dunkeln. Er drückt Tab, vermutet eine Veränderung und weiß trotzdem nicht, wo er sich befindet. Deshalb verlangt das W3C Kriterium 2.4.7 Fokus sichtbar, dass jede per Tastatur bedienbare Oberfläche einen Modus mit sichtbarem Fokusindikator bietet.

Browser zeichnen zunächst einen Standardrahmen. Allerdings wirkt dieser nicht auf jedem Hintergrund gleich deutlich; eine dünne blaue Linie auf einem dunklen Header verschwindet fast. Daher empfehlen wir, nicht auf den Standard zu vertrauen, sondern einen kräftigen Fokusstil passend zu Ihrer Farbpalette zu gestalten.

Warum ist das Entfernen des Fokusrahmens der häufigste Fehler?

Der Tastaturfehler, den wir in Designprüfungen am häufigsten sehen, ist eine CSS Regel, die den Fokusrahmen komplett abschaltet. Der Grund ist meist optisch: Ein Designer oder Kunde klickt auf eine Schaltfläche, bemerkt den Rahmen und hält ihn für einen Fehler. Folglich nimmt eine einzige Zeile CSS den Tastaturnutzern jede Orientierung.

Die Lösung besteht nicht darin, den Rahmen zu löschen. Entscheiden Sie stattdessen, wann er erscheint. Genau das leistet die Pseudoklasse :focus-visible, die moderne Browser unterstützen. Der Browser unterscheidet anhand eigener Heuristiken zwischen Tastaturfokus und Mausfokus. Somit bleibt der Rahmen nach einem Klick meist unsichtbar und erscheint nach einem Tab.

Ein Beispielszenario: Eine Dienstleisterseite hat Hauptschaltflächen, die mit der Maus einwandfrei funktionieren. Ein Tastaturnutzer erkennt jedoch nicht, welche Schaltfläche den Fokus hat. In diesem Fall entfernen wir zuerst die Regel, die den Rahmen ausblendet. Dann definieren wir mit :focus-visible einen kräftigen Ring in Markenfarbe. So bleibt die Designsprache erhalten, und Tastaturnutzer finden ihren Weg wieder.

Wie gestalten Sie einen guten Fokusindikator?

Ein guter Fokusindikator fällt in jedem Bereich der Seite gleich deutlich auf. Bedenken Sie, dass eine einzige Farbe selten auf jedem Hintergrund funktioniert. Auf hellen Flächen brauchen Sie eine dunkle Linie, auf dunklen Flächen eine helle. Deshalb nutzen wir oft einen zweifarbigen Ansatz: innen dunkel, außen hell.

• Halten Sie den Rahmen mindestens 2 Pixel stark, denn dünne Linien gehen leicht unter.
• Lassen Sie mit outline-offset einen kleinen Abstand zwischen Element und Rahmen.
• Sorgen Sie für einen starken Kontrast zwischen Rahmen und Umgebung.
• Verlassen Sie sich nicht nur auf Farbe; ergänzen Sie Form oder Stärke.
• Nutzen Sie für Schaltflächen, Links, Formularfelder und Karten dieselbe Bildsprache.

Messen Sie den Kontrast, statt ihn zu schätzen. Zum Beispiel können Sie mit unserem Kontrastrechner Ihre Fokusfarbe gegen Header, Inhaltsbereich und Footer einzeln prüfen. Das strengere Kriterium zur Fokusdarstellung in WCAG 2.2 liegt auf Stufe AAA. Dennoch liefert seine Logik zu Stärke und Kontrast einen guten Ausgangspunkt.

Wie legen Sie die Tabreihenfolge fest?

Die Tabreihenfolge ist die Abfolge, der der Fokus bei jedem Druck auf Tab folgt. Browser bilden diese Abfolge aus der Reihenfolge der Elemente im HTML Quelltext. Das heißt: Nicht das optische Layout, sondern die Quelltextreihenfolge bestimmt Ihre Fokusreihenfolge.

Genau hier beginnt allerdings das Problem. Sobald Sie Elemente per CSS optisch umsortieren, etwa eine Spalte mit Flexbox oder Grid von rechts nach links verschieben, laufen Bildschirmreihenfolge und Tabreihenfolge auseinander. Der Nutzer erwartet die nächste Schaltfläche oben, doch der Fokus springt nach unten. Das W3C Kriterium 2.4.3 Fokusreihenfolge soll genau diesen Bruch verhindern.

1. Schreiben Sie die Seite zuerst in logischer Lesereihenfolge: Header, Hauptmenü, Hauptinhalt, Seitenleiste, Footer.
2. Bauen Sie das optische Layout so, dass es diese Reihenfolge nicht bricht.
3. Testen Sie die Reihenfolge getrennt für mobile und Desktop Ansicht.
4. Platzieren Sie nachgeladene Inhalte wie Hinweise oder Panels direkt hinter dem auslösenden Element.

Das Geheimnis einer guten Tabreihenfolge ist also kein zusätzlicher Code, sondern sauberes HTML. Zudem liest der Screenreader die Seite dann nach derselben Logik vor.

Wann sollten Sie tabindex verwenden, und wann besser nicht?

tabindex ist das HTML Attribut, das steuert, ob ein Element am Tastaturfokus teilnimmt. Laut MDN Dokumentation gibt es drei Fälle. Der Wert 0 fügt das Element in die natürliche Reihenfolge ein. Der Wert minus eins entfernt es aus der Tababfolge, lässt es aber per Skript fokussierbar. Positive Werte ändern die Reihenfolge von Hand.

MDN rät ausdrücklich von positiven Werten ab. Denn ein Element mit tabindex 1 springt vor alle natürlichen Elemente der Seite und macht die Reihenfolge unberechenbar. Außerdem lassen sich diese Zahlen kaum noch pflegen, sobald die Website wächst.

• Wert 0: Macht ein eigenes Widget, etwa eine selbst gebaute Registerkarte, fokussierbar.
• Wert minus eins: Erlaubt es, den Fokus per Skript auf eine Fehlermeldung oder eine Dialogüberschrift zu setzen.
• Positive Werte: Fast nie; korrigieren Sie stattdessen die Quelltextreihenfolge.

Andererseits nehmen Links, Schaltflächen und Formularfelder den Fokus ohnehin an. Dort brauchen Sie kein tabindex. Unnötige Ergänzungen machen den Code unübersichtlich und führen manchmal sogar dazu, dass ein Element zweimal den Fokus erhält.

Was ist ein Skiplink, und wie richten Sie ihn ein?

Ein Skiplink steht ganz am Anfang der Seite und führt den Nutzer am Menü vorbei direkt zum Hauptinhalt. Meist trägt er den Text „Zum Inhalt springen“. Normalerweise bleibt er außerhalb des sichtbaren Bereichs und erscheint, sobald ein Besucher zum ersten Mal Tab drückt.

Sein Nutzen zeigt sich vor allem bei großen Menüs. Ein Beispielszenario: Eine Unternehmensseite hat im Header ein Menü mit 30 Links, eine Sprachauswahl und ein Suchfeld. Ohne Skiplink müssen Tastaturnutzer auf jeder Seite durch all diese Elemente tabben. Das W3C Kriterium 2.4.1 Blöcke umgehen verlangt einen Weg, solche Wiederholungen zu überspringen, und nennt den Skiplink als eine ausreichende Technik.

1. Setzen Sie den Link direkt nach dem öffnenden body Tag als erstes fokussierbares Element.
2. Verweisen Sie auf die id des Hauptinhalts.
3. Blenden Sie ihn optisch aus, zeigen Sie ihn aber bei Fokus deutlich oben am Bildschirm.
4. Prüfen Sie dann mit Tab, ob der Fokus wirklich im Hauptinhalt landet.

Zusätzlich geben Sie Screenreader Nutzern mit dem main Element für den Hauptinhalt und dem nav Element für das Menü eine weitere Sprungmöglichkeit. Trotzdem bleibt ein sichtbarer Skiplink für Tastaturnutzer ohne Screenreader unverzichtbar.

Warum scheitern Dropdownmenüs an der Tastaturbedienung?

In der Praxis öffnen sich die meisten Dropdownmenüs nur, wenn die Maus darüber fährt. Fokussiert ein Tastaturnutzer den Menüpunkt, passiert nichts. Entweder erscheint das Untermenü gar nicht, oder seine Links erhalten unsichtbar den Fokus. Der zweite Fall verwirrt noch mehr, denn der Fokus verschwindet mit jedem Tab in versteckten Links.

Robuster ist es, das Untermenü an eine Schaltfläche zu koppeln. Der Menüpunkt bleibt ein Link, der Pfeil daneben wird eine eigene Schaltfläche. Drückt der Nutzer darauf Enter oder Leertaste, öffnet sich das Untermenü, und der Zustand aria-expanded ändert sich. Somit sagt der Screenreader an, ob das Menü offen oder geschlossen ist.

• Links in einem geschlossenen Untermenü gehören nicht in die Tabreihenfolge.
• Esc schließt ein offenes Untermenü und gibt den Fokus an seine Schaltfläche zurück.
• Verlässt der Fokus das Untermenü, schließt es sich von selbst.

Für das mobile Menü gelten dieselben Regeln. Das Hamburgersymbol muss eine echte Schaltfläche sein, das Panel muss den Fokus erhalten, und die Schließen Schaltfläche muss per Tastatur funktionieren. Die Wahl der mobilen Navigation selbst behandeln wir in unserem Beitrag wann Sie ein Hamburgermenü verwenden sollten.

Wie vermeiden Sie Fokusprobleme in modalen Dialogen?

Ein modaler Dialog ist eine Ebene, die sich über die Seite legt und die Interaktion mit dem Inhalt dahinter vorübergehend stoppt. Für die Tastaturbedienung gibt es zwei gegensätzliche Fehler: Der Fokus entwischt aus dem Dialog, oder der Nutzer kommt nie wieder heraus. Beides stört. Das richtige Verhalten beschreibt das Muster für modale Dialoge im W3C ARIA Authoring Practices Guide allerdings sehr klar.

1. Setzen Sie beim Öffnen den Fokus auf ein passendes Element im Dialog, meist das erste fokussierbare Element oder die Überschrift.
2. Lassen Sie Tab und Umschalt+Tab innerhalb des Dialogs kreisen, vom letzten zurück zum ersten Element.
3. Lassen Sie den Dialog mit Esc schließen.
4. Geben Sie den Fokus beim Schließen an die Schaltfläche zurück, die den Dialog geöffnet hat.
5. Halten Sie den Seiteninhalt hinter dem offenen Dialog aus dem Fokus heraus.

Vor allem den vierten Schritt vergessen Teams häufig. Landet der Fokus nach dem Schließen am Seitenanfang, verliert der Nutzer seine Position und muss auf einer langen Seite erneut nach unten scrollen. Deshalb lohnt es sich, das auslösende Element zu speichern und den Fokus beim Schließen dorthin zurückzugeben.

Das native dialog Element moderner Browser übernimmt einen Teil dieses Verhaltens, wenn Sie es mit showModal öffnen. Dennoch sollten Sie sich in keinem Projekt darauf verlassen, ohne es von Hand mit der Tastatur zu testen.

Worin unterscheidet sich eine Tastaturfalle von einer Fokussperre im Dialog?

Auf den ersten Blick wirken beide gleich, denn in beiden Fällen bleibt der Fokus in einem bestimmten Bereich. Der Unterschied liegt im Ausgang. Eine Fokussperre im modalen Dialog ist eine bewusste Designentscheidung, und der Nutzer kann jederzeit per Esc oder Schließen Schaltfläche heraus.

Eine Tastaturfalle ist dagegen ein Fehler. Das W3C Kriterium 2.1.2 verlangt: Kann der Fokus eine Komponente betreten, muss er sie auch allein per Tastatur wieder verlassen können. Braucht es dafür einen ungewöhnlichen Weg, muss die Seite die Nutzer darüber informieren. Eingebettete Videoplayer, Kartenwidgets von Drittanbietern, Chatfenster und manche Texteditoren sind klassische Quellen solcher Fallen.

• Fokussperre im Dialog: Bewusst, mit klarem Ausgang, schließt per Esc.
• Tastaturfalle: Unbeabsichtigt, ohne Ausgang, nur ein Neuladen hilft.
• Testmethode: Tabben Sie in jedes eingebettete Element und versuchen Sie dann, es mit Tab, Umschalt+Tab oder Esc zu verlassen.

Hält zum Beispiel eine Chatblase den Fokus fest, erreichen Besucher den Rest der Seite nicht mehr. In diesem Fall prüfen wir zunächst die Einstellungen des Drittanbieters und bewerten notfalls Alternativen.

Warum verdecken fixierte Header und Cookiebanner den Fokus?

Fixierte Header bleiben beim Scrollen oben am Bildschirm stehen. Cookiebanner und Chatblasen haften meist am unteren Rand. Drückt ein Tastaturnutzer Tab, scrollt der Browser das fokussierte Element in den sichtbaren Bereich. Doch genau dort kann es unter einer dieser festen Ebenen landen.

Somit ist der Fokus zwar da, aber der Nutzer sieht ihn nicht. Kriterium 2.4.11, das mit WCAG 2.2 hinzukam, verlangt, dass ein fokussiertes Element nicht vollständig hinter Inhalten des Seitenautors verschwindet. Es liegt auf Stufe AA; folglich sollte jede Website mit AA als Ziel es berücksichtigen.

Die praktischen Lösungen sind dennoch einfach. Setzen Sie den CSS Wert scroll-padding-top auf die Höhe des fixierten Headers. Dann platziert der Browser das Element direkt darunter statt dahinter. Den Cookiebanner stellen Sie an den Anfang der Fokusreihenfolge und sorgen dafür, dass er die Seite nur bis zur Entscheidung des Nutzers überlagert. Vor allem auf dem Smartphone sollten Sie diese festen Ebenen gesondert testen.

Warum funktionieren Schaltflächen aus div Elementen nicht per Tastatur?

Bauen Sie eine Schaltfläche aus einem div oder span statt aus einem button Element, gibt der Browser ihr kein eingebautes Verhalten. Das Element nimmt keinen Fokus an, reagiert nicht auf Enter oder Leertaste, und der Screenreader kündigt es nicht als Schaltfläche an. Da der Mausklick trotzdem funktioniert, übersieht das Team den Fehler im Design meist.

Ein echtes button Element liefert dagegen all das kostenlos mit. Ebenso sollte alles, was die Seite wechselt, ein a Element sein, und alles, was eine Aktion auslöst, ein button. Diese Unterscheidung zählt für Tastatur und Screenreader gleichermaßen, denn Nutzer erwarten, dass ein Link sie woandershin bringt und eine Schaltfläche etwas tut.

Ein Beispielszenario: Eine ganze Produktkarte reagiert auf Klicks, doch die Karte ist ein div, das nur auf Mausereignisse hört. Tastaturnutzer erreichen die Karten nie und öffnen keine Produktdetails. Am saubersten wandeln Sie den Produkttitel in einen echten Link um und vergrößern seine Klickfläche per CSS. Allgemeine Gestaltungsregeln für solche Elemente finden Sie in unserem Beitrag zu interaktiven Elementen im Webdesign.

Wie sollten Formulare, Slider und Karussells per Tastatur funktionieren?

Formulare sind der Ort, an dem Ihre Website Umsatz bringt; deshalb verdienen sie beim Test der Tastaturbedienung die meiste Zeit. Jedes Feld braucht eine sichtbare Beschriftung, der Fokus sollte in sinnvoller Reihenfolge von Feld zu Feld wandern, und bei einem Fehler sollte der Fokus zum Feld oder zu einer Fehlerübersicht springen. Außerdem sollten eigene Auswahlfelder und Datumswähler auf die Pfeiltasten reagieren.

Karussells und Slider bringen ein anderes Problem mit. Ein automatisch drehendes Karussell kann einen fokussierten Link aus dem Bild ziehen, während der Nutzer gerade darauf steht. Daher brauchen Sie eine Pausenschaltfläche, eine angehaltene Rotation, solange der Fokus im Karussell liegt, und echte Schaltflächen für Zurück und Weiter.

• Verknüpfen Sie jede Beschriftung programmatisch mit ihrem Feld.
• Prüfen Sie, ob sich die Absenden Schaltfläche per Tastatur erreichen und auslösen lässt.
• Halten Sie Links in verdeckten Karussellfolien aus der Tabreihenfolge heraus.
• Bauen Sie Akkordeonüberschriften als Schaltflächen und melden Sie ihren Zustand.

Die Conversion Seite von Formularen besprechen wir im Beitrag Formulare für Termin, Angebot und Demo optimieren. Hier bleiben wir beim Verhalten per Tastatur.

Beeinflusst die Tastaturbedienung SEO und Conversions?

Google hat die Tastaturbedienung nicht als direkten Rankingfaktor beschrieben. Deshalb versprechen wir nie, dass ein Fokusrahmen Ihre Rankings steigert. Trotzdem sind die indirekten Zusammenhänge stark, und es wäre ein Fehler, sie zu übersehen.

Zunächst beruht eine tastaturfreundliche Website meist auf sauberem, semantischem HTML. Echte Links und Schaltflächen helfen auch den Crawlern der Suchmaschinen, Ihre Seiten zu verstehen. Zum Beispiel bieten Scheinlinks, die nur über einen Klickhandler funktionieren, keine Adresse, der ein Crawler folgen kann.

Noch klarer ist die Conversion Seite. Ein Besucher, der Ihr Angebotsformular nicht per Tastatur erreicht, kann es nicht absenden, so überzeugt er auch sein mag. Daher empfehlen wir, den Tastaturtest als festen Schritt im conversionorientierten Webdesign zu sehen. Werkzeuge wie Lighthouse bilden einen Teil der Tastaturbedienung in ihrer Bewertung ab, aber nicht alles.

Wie testen Sie die Tastaturbedienung in zehn Minuten?

Für den Test brauchen Sie also keine besondere Software, nur einen Browser und zehn Minuten. Schieben Sie die Maus beiseite oder ziehen Sie sogar das Kabel ab. Prüfen Sie dann nacheinander die drei wichtigsten Seiten Ihrer Website: Startseite, eine Leistungsseite und die Kontaktseite.

1. Klicken Sie in die Adressleiste und drücken Sie einmal Tab. Erscheint ein Skiplink?
2. Sehen Sie beim Weitertabben in jedem Schritt, wo der Fokus steht?
3. Folgt der Fokus der Lesereihenfolge auf dem Bildschirm, oder springt er?
4. Öffnen sich Untermenüs per Enter oder Leertaste und schließen sie per Esc?
5. Lassen sich Cookiebanner und Chatblase per Tastatur schließen?
6. Öffnen Sie einen Dialog: Springt der Fokus hinein, schließt Esc ihn, kehrt der Fokus zum Auslöser zurück?
7. Können Sie das Formular vollständig ausfüllen und absenden? Lenkt eine Fehlermeldung den Fokus?
8. Prüfen Sie, ob ein fixierter Header oder eine untere Leiste das fokussierte Element verdeckt.
9. Bleibt die Reihenfolge auch beim Rückwärtsgehen mit Umschalt+Tab erhalten?

Notieren Sie dann jedes „Nein“ mit Seitenadresse und Elementname in einer Tabelle. So erhält Ihr Entwicklerteam eine klare, wiederholbare Fehlerliste. Wiederholen Sie den Test schließlich in der mobilen Ansicht des Browsers mit einer externen Tastatur.

Finden automatische Werkzeuge Probleme bei der Tastaturbedienung?

Automatische Prüfwerkzeuge für Barrierefreiheit sind wertvoll, finden aber nur einen Teil der Tastaturprobleme. Sie markieren zum Beispiel positive tabindex Werte, unbeschriftete Formularfelder und manche interaktiven Elemente ohne Fokus. Ob die Fokusreihenfolge sinnvoll ist oder wohin der Fokus nach dem Schließen eines Dialogs wandert, kann ein Algorithmus allerdings nicht verlässlich beurteilen.

Deshalb arbeiten wir in zwei Schichten. Zunächst räumt ein automatischer Scan die einfachen Fehler ab. Danach folgt der manuelle Testplan von oben. Auch Lighthouse listet am Ende seines Barrierefreiheitsberichts Punkte auf, die Sie von Hand prüfen sollten. Den Umgang mit Lighthouse erklären wir Schritt für Schritt im Beitrag zum Lighthouse Test.

Kurz gesagt: Auch mit perfekter automatischer Bewertung kann die Tastaturbedienung Lücken haben. Die Bewertung ist ein Startpunkt; die eigentliche Prüfung besteht darin, die Tastatur in die Hand zu nehmen und die Website wirklich zu benutzen.

Beispielszenario: per Tastatur zum Angebotsformular

Das Szenario in diesem Abschnitt ist erfunden und zeigt eine typische Fehlerkette. Auf der Website einer Beratungsfirma möchte ein Besucher von der Startseite zum Angebotsformular. Beim ersten Tab landet der Fokus auf dem Logolink, ohne jeden Rahmen, denn das Stylesheet hat ihn abgeschaltet.

Dann erreicht der Nutzer das Menü. Das Untermenü „Leistungen“ öffnet sich nur beim Überfahren mit der Maus und bleibt für die Tastatur verborgen. Seine zwölf Links erhalten trotzdem den Fokus, und der Nutzer verirrt sich zwischen unsichtbaren Einträgen. Danach überdeckt der Cookiebanner am unteren Rand die fokussierte Schaltfläche „Angebot anfordern“ vollständig.

Der Korrekturplan umfasst vier Schritte: ein kräftiger Rahmen mit :focus-visible, ein Untermenü mit Schaltfläche, ein Skiplink und ein Cookiebanner am Anfang der Fokusreihenfolge mit funktionierender Schließen Schaltfläche. Danach legt der Nutzer denselben Weg mit wenigen Tabs zurück und kann ihn mit den Augen verfolgen.

Checkliste für die Tastaturbedienung

Wir empfehlen, die folgende Liste vor jedem Livegang einer neuen Seite und nach jeder größeren Designänderung abzuarbeiten. Jeden Punkt können Sie in wenigen Minuten von Hand prüfen.

• Ich erreiche jeden Link, jede Schaltfläche und jedes Formularfeld per Tab.
• Der Fokusindikator fällt auf jedem Hintergrund mit genügend Kontrast auf.
• Die Fokusreihenfolge entspricht der optischen Lesereihenfolge.
• Kein Element nutzt einen positiven tabindex Wert.
• Am Seitenanfang steht ein funktionierender Skiplink.
• Untermenüs öffnen sich per Tastatur und schließen per Esc.
• Links in geschlossenen Menüs und verdeckten Folien erhalten keinen Fokus.
• Der Fokus springt beim Öffnen in den Dialog und beim Schließen zum Auslöser zurück.
• Keine eingebettete Komponente erzeugt eine Tastaturfalle.
• Fixierte Header und Cookiebanner verdecken nie das fokussierte Element.
• Interaktive Elemente nutzen echte a und button Tags.
• Formularfehler lenken den Fokus auf das richtige Feld.

Jeder Punkt entspricht einem Kriterium oder einer Praxis aus den Abschnitten oben. Somit können Sie die Liste in eine Projektvorlage aufnehmen und mit Design, Entwicklung und Redaktion teilen.

Wie planen Sie die Fokusreihenfolge schon im Design?

Die meisten Probleme mit der Tastaturbedienung entstehen in der Designdatei, nicht im Code. Zeichnet die Designerin nur Normalzustand und Mausüberfahrt, aber keinen Fokuszustand, lässt die Entwicklung ihn ebenfalls weg. Deshalb behandeln wir den Fokuszustand als Pflichtteil jeder Komponente im Designsystem.

Konkret zeichnen Sie für Schaltflächen, Links, Formularfelder, Karten und Menüpunkte eine eigene fokussierte Ansicht. Außerdem hilft eine kurze Notiz neben jedem Screen, die die Tabreihenfolge durchnummeriert. Dieser kleine Schritt erleichtert der Entwicklung die Arbeit enorm. Die Designerin entscheidet über die Reihenfolge, die Entwicklung setzt sie nur noch um.

Verbinden Sie diese Gewohnheit mit einer klaren Kontraststrategie, wie wir sie im Beitrag zum Kontrast im Webdesign beschreiben. Dann ist die Tastaturbedienung kein Flicken in letzter Minute mehr, sondern ein Qualitätsstandard ab dem ersten Tag.

So setzen wir das auf Ihrer Website um

Bei einer neuen Website planen wir Tastaturbedienung und Fokusreihenfolge ab dem ersten Wireframe ein. Wir ergänzen Fokusstile im Designsystem, bauen Menüs und Dialoge nach den beschriebenen Mustern und testen vor dem Livegang von Hand mit der Tastatur. Bei einer bestehenden Website erstellen wir zunächst mit dem Testplan aus diesem Beitrag eine Fehlerliste und beheben die Punkte dann nach Priorität.

Sind Sie unsicher, wie sich Ihre Website per Tastatur verhält, richten wir das im Rahmen unseres Webdesign Angebots für Sie ein. Nennen Sie uns Seitenzahl und System, dann erstellen wir ein Angebot mit klar umrissenem Umfang. Für eine barrierearme, schnelle und conversionstarke Website können Sie über unsere Webdesign Seite ein Angebot anfordern.