Benutzerdefinierte interaktive Steuerelemente sollten fokussierbar sein. Wenn Sie beispielsweise mit JavaScript ein <div> in ein ausgefallenes Drop-down-Menü umwandeln, wird dieses Drop-down-Menü nicht automatisch in die richtige Tab-Reihenfolge eingefügt.
Sie müssen manuell prüfen, ob alle benutzerdefinierten Steuerelemente über die Tastatur fokussiert werden können.
Verwenden Sie nach Möglichkeit semantisches HTML-Markup, das Interaktionen ermöglicht.
So testen Sie
Drücken Sie die Taste TAB, um sich auf der Website zu bewegen und zu testen, ob das benutzerdefinierte Steuerelement den Fokus erhalten kann:
Können Sie alle interaktiven Steuerelemente auf der Seite erreichen?
Andernfalls müssen Sie möglicherweise tabindex verwenden, um die Fokussierbarkeit dieser Steuerelemente zu verbessern.
Weitere Informationen finden Sie unter Fokus mit „tabindex“ steuern.
Lösung
Wenn Sie ein benutzerdefiniertes Steuerelement benutzbar machen möchten, fügen Sie es mit tabindex="0" in die natürliche Tabulatorreihenfolge ein.
Beispiel:
<div tabindex="0">Focus me with the TAB key</div>
Warum das wichtig ist
Für Nutzer, die die Maus nicht verwenden können oder dies nicht möchten, ist die Tastaturnavigation das wichtigste Mittel, um alle Elemente auf dem Bildschirm zu erreichen. Eine gute Bedienung der Tastatur hängt von einer logischen Tab-Reihenfolge und einem deutlich erkennbaren Fokusstil ab. Wenn ein Nutzer mit Tastatur nicht sehen kann, was gerade fokussiert ist, kann er nicht mit der Seite interagieren.
Wenn Sie noch keine Erfahrung mit Tests zur Barrierefreiheit haben, empfehlen wir Ihnen, sich mit manuellen Tests zur Barrierefreiheit und Tests für Hilfstechnologien vertraut zu machen.