Interaktive Steuerelemente können über die Tastatur fokussiert werden

Veröffentlicht am 2. Mai 2019

Prüfen Sie manuell, ob alle benutzerdefinierten Steuerelemente den Tastaturfokus erhalten können und einen Fokusindikator anzeigen. Die Reihenfolge, in der Elemente fokussiert werden, sollte der DOM-Reihenfolge entsprechen. Wenn Sie sich nicht sicher sind, welche Elemente den Fokus erhalten sollten, sehen Sie sich das Fokusmodul im Kurs „Barrierefreiheit lernen“ auf web.dev an.

Manuelles Testen

Um zu testen, ob das benutzerdefinierte Steuerelement fokussierbar ist und eine Fokusanzeige enthält, tabben Sie zuerst durch Ihre Website. Verwenden Sie TAB (oder SHIFT + TAB), um zwischen Steuerelementen zu wechseln, und die Pfeiltasten sowie ENTER und SPACE, um ihre Werte zu ändern (siehe auch Grundlagen des Tastaturzugriffs):

Können Sie alle interaktiven Steuerelemente auf der Seite erreichen? Gibt es auf jedem interaktiven Steuerelement einen Fokusindikator?

Lösung

Wenn Sie nicht alle Elemente auf einer Seite mit der Tabulatortaste durchlaufen können, müssen Sie möglicherweise tabindex verwenden, um die Fokussierbarkeit dieser Steuerelemente zu verbessern.

Damit ein benutzerdefiniertes Steuerelement fokussierbar ist, fügen Sie das benutzerdefinierte Steuerelement mit tabindex="0" in die natürliche Tab-Reihenfolge ein (siehe auch Fokus mit „tabindex“ steuern). Beispiel:

<div tabindex="0">Focus me with the TAB key</div>

Möglicherweise müssen Sie den benutzerdefinierten Steuerelementen auch die entsprechenden ARIA-Rollen hinzufügen. Weitere Informationen finden Sie unter Benutzerdefinierte Steuerelemente haben ARIA-Rollen.

Wenn Sie keinen Fokusindikator sehen, können Sie :focus verwenden, um immer einen Fokusindikator anzeigen zu lassen. Unabhängig davon, ob Sie mit einer Maus oder einer Tastatur darauf zugreifen, sieht der Fokusindikator der Schaltfläche immer gleich aus (siehe auch Fokus gestalten).

Relevanz

Für Nutzer, die keine Maus verwenden können oder möchten, ist die Tastaturnavigation die primäre Methode, um alle Elemente auf einem Bildschirm zu erreichen. Eine gute Tastaturbedienung hängt von einer logischen Tab-Reihenfolge und gut erkennbaren Fokusstilen ab. Wenn ein Tastaturnutzer nicht sehen oder erfahren kann, was fokussiert ist, kann er nicht mit der Seite interagieren.

Weitere Informationen zur Barrierefreiheit

Ressourcen