Ein Fokus-Indikator ist die sichtbare Markierung eines Elements, das aktuell per Tastatur angesteuert wird – zum Beispiel ein Button, ein Link oder ein Formularfeld. Er ist ein zentrales Element der Tastaturbedienbarkeit und somit eine Voraussetzung für barrierefreies Webdesign.
Warum ist der Fokus-Indikator wichtig?
Menschen, die eine Website ohne Maus bedienen – etwa mit der Tabulatortaste – sind darauf angewiesen zu sehen, welches Element gerade aktiv ist. Der Fokus-Indikator (meist ein Rahmen oder eine farbige Linie) ermöglicht es ihnen, sich auf der Seite zurechtzufinden und mit der Oberfläche zu interagieren.
Wird dieser Indikator entfernt oder nicht klar gestaltet, entstehen Barrieren, die eine Nutzung unmöglich machen können.
Technische Umsetzung
In HTML und CSS ist der Fokus-Indikator standardmäßig vorhanden. Er kann z. B. über die Pseudoklasse :focus mitgestaltet werden:
cssKopierenBearbeitenbutton:focus {
outline: 2px solid #000;
outline-offset: 4px;
}
Wichtig: Fokus-Styles dürfen nicht per outline: none; unterdrückt werden – außer es gibt eine barrierefreie Alternative, die ebenso deutlich ist.
WCAG-Konformität
Die WCAG-Richtlinien fordern einen sichtbaren Fokuszustand für alle interaktiven Elemente. Der Kontrast und die Erkennbarkeit müssen auch bei Zoom oder Farbsehschwäche gegeben sein.
Der Klicklounge-Tipp: Verwenden Sie den Fokus-Indikator nicht nur „aus Pflichtgefühl“. Ein durchdachtes Fokusdesign verbessert die User Experience für alle – auch bei temporärer Einschränkung, z. B. bei Touchpad-Nutzung oder hellem Umgebungslicht.