Die eigene Seite selbst testen: Tastatur-Navigation

Wenn ich eine Kundenanfrage für einen Test bekomme, dann schaue ich mir meist zuerst die Kundenwebsite an, um mir einen Überblick zu verschaffen. Dabei ist die Tastaturnavigation und der Fokus das allererste, was ich teste, denn eine barrierefreie Webseite ist vollständig mit der Tastatur navigierbar. In diesem Blogartikel erfahren Sie, wie Sie Ihre Webseite mit der Tastatur testen können, um sicherzustellen, dass sie für alle Benutzer*innen, einschließlich derer, die keine Maus verwenden können, zugänglich ist.

Viele Benutzer verlassen sich auf die Tastatur, um im Internet zu surfen. Dies kann Menschen mit motorischen Beeinträchtigungen, Sehbehinderungen oder blinde Menschen betreffen. Eine gut durchdachte Tastatur-Navigation verbessert also nicht nur die Benutzererfahrung, sondern ist auch ein wesentlicher Bestandteil der Barrierefreiheit.

Ein Fokus(-indikator) ist ein visuelles Element (z.B. ein Rahmen), das Benutzer*innen anzeigt, welches interaktive Element auf einer Webseite gerade aktiv ist, wenn sie mit der Tastatur navigieren. Er ist entscheidend für die Zugänglichkeit, da er Benutzer*innen hilft, den Überblick darüber zu behalten, wo sie sich auf der Seite befinden und welche Aktionen sie ausführen können. Stellen Sie beim „durchtabben“ durch Ihre Website sicher, dass der Fokusindikator immer deutlich sichtbar ist. Der Fokusindikator sollte nur bei interaktiven Elementen wie Links, verlinkten Beiträgen, Menüschaltflächen, Buttons, Formularfeldern und ähnlichem angezeigt werden. 

Beispiel: Ein gut sichtbarer Fokusindikator könnte ein farbiger (und ausreichend kontrastreicher) Rahmen um ein interaktives Element sein.

Nun kommen wir zum oben bereits erwähnten „durchtabben“. Beginnen Sie mit der Tab-Taste, um durch die fokussierbaren Elemente auf Ihrer Seite zu navigieren. Dies umfasst Links, Schaltflächen und Formularfelder. Stellen Sie sicher, dass die Fokusreihenfolge logisch ist und dass alle interaktiven Elemente erreichbar sind.

Beispiel Menü: Wenn Sie eine Navigationsleiste haben, sollte der Fokus zuerst auf das erste Menüelement und dann nacheinander auf die anderen Elemente springen. Jeder Menüpunkt muss mit der Tastatur erreicht werden.

Verwenden Sie die Enter-Taste, um Links zu aktivieren und Formulare zu übermitteln. Die Leertaste kann verwendet werden, um Schaltflächen zu aktivieren und Kontrollkästchen zu markieren.

Beispiel Formular: Wenn Sie ein Formular auf Ihrer Website haben, sollten Benutzer in der Lage sein, die Tab-Taste zu verwenden, um zwischen den Feldern zu wechseln, und die Enter-Taste, um das Formular abzusenden.

Durch das Testen Ihrer Webseite mit der Tastatur können Sie sicherstellen, dass sie für alle Benutzer zugänglich und benutzerfreundlich ist. Eine gut durchdachte Tastatur-Navigation ist ein wesentlicher Bestandteil der Barrierefreiheit und trägt dazu bei, dass sich alle Benutzer auf Ihrer Webseite willkommen und unterstützt fühlen.

Wenn Sie lernen möchten, wie man die eigene Website testet oder Tests in seine Entwicklungsprozesse einbindet, melden Sie sich für meinen Workshop „Digitale Barrierefreiheit selbst testen“ an.