Barrierefreies Webdesign nach BITV 2.0: Tastaturfokus muss sichtbar sein

In diesem Blogartikel erkläre ich warum es wichtig ist, den Tastaturfokus deutlich sichtbar zu machen um barrierefreies Webdesign umzusetzen.

Sehbehinderung – Was ist das?

Eine Sehbehinderung ist eine meist dauerhafte massive Einschränkung der Sehfähigkeit. Man teilt sie allgemein in Schweregrade ein, die sich in der Regel am verbliebenen Ausmaß der Sehschärfe des besseren Auges orientieren.
Das verbleibende Ausmaß der Sehschärfe des besseren Auges nennt sich Sehrest.

Viele sehbehinderte Menschen arbeiten nur mit Tastatur

Menschen die eine starke Sehbehinderung haben können oft nicht mit einer Computermaus arbeiten. Deswegen bedienen sie den ganzen Computer per Tastatur. Das bedeutet, dass alle Bedienelemente per Tastatur erreichbar sein müssen.

Tastatur mit Rollstuhlsymbol und Wort barrierefrei
Quelle: Robert Kneschke – 483201067 / Shutterstock.com

Tastaturfokus – Was ist das?

Der Tastaturfokus markiert das Bedien-oder Eingabeelement, das der Benutzer per Tastatur angesteuert hat. Damit eine Webseite von Menschen mit Sehbehinderung per Tastatur bedient werden kann, ist ein deutlicher Tastaturfokus wichtig.

Tastaturfokus – Das Problem

Am Beispiel einer Eingabemaske für eine Adressenverwaltung erkläre ich das Problem. Wenn ein Eingabefeld den Fokus hat wird der Textcursor als schmaler senkrechter Strich dargestellt. Dieser schmaler Strich ist für Menschen mit einer Sehbehinderung nur sehr schlecht oder gar nicht zu erkennen. Dieses Problem muss gelöst werden.

Tastaturfokus – Die Lösung

Das Problem kann gelöst werden, in dem das aktive Bedienelement die Hintergrundfarbe Gelb bekommt. Dies kann mit Cascading Style Sheets, abgekürzt CSS umgesetzt werden.

Das Bild zeigt ein Formular barrierefrei gestaltet mit Tastenkürzel und guter Anzeige des Tastenfokus
Das Bild zeigt ein barrierefreies Formular mit Tastenkürzel und gut sichtbaren Tastaturfokus.

Beispiel für Hervorhebung von Tastaturfokus

<style type=“text/css“>
input:focus { background-color:yellow;}
</style>

Dieser Code führt dazu, dass alle aktiven Eingabefelder und Schalter die Hintergrundfarbe Gelb bekommen.

Schlussbemerkung:

Für Menschen mit einer Sehbehinderung ist es sehr wichtig, dass der Tastaturfokus auf Webseiten gut sichtbar ist. Deswegen sollten Sie bei der Erstellung bzw. Programmierung stets dran denken. Eine gute und Bewährte Methode den Tastaturfokus sichtbar zu machen ist, dass das aktive Bedienelement die Hintergrundfarbe Gelb bekommt. Bei Fragen, rufen Sie mich an 07121/504458 oder schreiben eine Mail info@marlem-software.de .


Barrierefreies Webdesign mit der BITV 2.0 – Artikelreihe

Autor: Markus Lemcke

Ich bin Markus Lemcke, Softwareentwickler, Webentwickler, Appentwickler, Berater und Dozent für barrierefreies Webdesign, barrierefreie Softwareentwicklung mit Java, C# und Python, Barrierefreiheit bei den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS.

Schreibe einen Kommentar