Benutzerdefinierte interaktive Steuerelemente sollten fokussierbar sein.
Wenn Sie mit JavaScript ein <div> in ein schickes Drop-down-Menü verwandeln, wird es nicht automatisch in die TAB-Reihenfolge eingefügt.
Sie müssen manuell prüfen, ob alle benutzerdefinierten Steuerelemente über die Tastatur fokussiert werden können.
Weitere Informationen finden Sie im Hilfeartikel Grundlagen des Tastaturzugriffs.
Manuelles Testen
Wenn Sie testen möchten, ob das benutzerdefinierte Steuerelement fokussierbar ist, drücken Sie die Taste TAB, um durch die Website zu navigieren:
Können Sie auf alle interaktiven Steuerelemente auf der Seite zugreifen?
Ist dies nicht der Fall, musst du eventuell 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 fokussierbar machen möchten, fügen Sie es mithilfe von tabindex="0" in die natürliche TAB-Reihenfolge ein.
Beispiel:
<div tabindex="0">Focus me with the TAB key</div>
Warum das wichtig ist
Für Nutzer, die keine Maus verwenden können oder möchten, ist die Tastaturnavigation das wichtigste Mittel, um alles auf einem Bildschirm zu erreichen. Gute Tastaturfunktionen hängen von einer logischen TAB-Reihenfolge und leicht erkennbaren Fokusstilen ab. Wenn Tastaturnutzer den Fokus nicht sehen, haben sie keine Möglichkeit, mit der Seite zu interagieren.
Weitere Informationen zur Überprüfung der Barrierefreiheit