Analysieren der fehlenden Anzeige des Tastaturfokus

Tastaturbenutzer müssen wissen, wo sie sich auf einer Webseite befinden. Wenn ein Tastaturbenutzer mit der Tabulatortaste auf einen Link oder eine Schaltfläche klickt, sollte der Link oder die Schaltfläche einen visuellen Hinweis darauf haben, dass er den Fokus hat. Diese visuelle Anzeige ist in der Regel eine Kontur um das fokussierte Element.

Auf der Demowebseite für Barrierefreiheitstests zeigt das Navigationsmenü der Randleiste mit blauen Links bei Verwendung einer Tastatur nicht visuell an, welcher Link den Fokus hat. Um herauszufinden, warum das Fehlen der visuellen Tastaturfokusanzeige verwirrend ist, versuchen Sie, auf die blauen Links auf der Demoseite zu wechseln. Die blaue Schaltfläche "Cats " hat den Fokus, wie die Ziellinkinformationen zeigen, die in der unteren linken Ecke des Browserfensters angezeigt werden, aber es gibt keinen visuellen Hinweis darauf, dass sich der Fokus auf dieser Schaltfläche befindet:

Analysieren der Fehlenden Fokusanzeige mit dem Quellentool

Verwenden Sie das Tool Quellen, um zu sehen, welche CSS-Formatvorlagen auf einen Link angewendet werden, z. B. eine verknüpfte Schaltfläche:

1. Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie F12. DevTools wird neben der Webseite geöffnet.

3. Klicken Sie in der linken oberen Ecke von DevTools auf die Schaltfläche Inspect (), damit die Schaltfläche hervorgehoben (blau) ist.

4. Zeigen Sie im Navigationsmenü der Seitenleiste auf die blaue Schaltfläche Katzen . Die Überlagerung "Inspect" wird angezeigt und gibt an, dass das a Element tastaturfokussierbar ist:

   

   Die Inspect-Überlagerung zeigt jedoch nicht an, dass dem Element keine visuelle Anzeige fehlt, wenn der Link den Fokus hat.

5. Klicken Sie auf der gerenderten Webseite auf die Schaltfläche Katzen .

   Das Inspect-Tool wird deaktiviert, und das Tool Elemente wird geöffnet, wobei der a Knoten in der DOM-Struktur hervorgehoben wird. Die CSS-Regel #sidebar nav li a wird auf der Registerkarte Formatvorlagen zusammen mit einem Link zu einer Zeilennummer in styles.cssangezeigt:

   

6. Klicken Sie auf den styles.css Link. Die CSS-Datei wird im Tool Quellen geöffnet:

   

   Beachten Sie, dass die #sidebar nav li a CSS-Regel über die CSS-Eigenschaftseinstellung verfügt outline: none, die die Gliederung entfernt, die Browser automatisch hinzufügen, wenn Sie Links mithilfe einer Tastatur fokussieren.

   Die CSS-Datei enthält eine CSS-Regel, die die :hover Pseudoklasse verwendet, die verwendet wird, um anzugeben, in welchem Menüelement Sie sich befinden, wenn Sie eine Maus verwenden: #sidebar nav li a:hover. Die CSS-Datei enthält jedoch keine CSS-Regel, die die :focus Pseudoklasse verwendet, z #sidebar nav li a:focus. B. . Dies bedeutet, dass keine CSS-Formatvorlagen verwendet werden, um visuell anzugeben, auf welchem Menüelement Sie sich befinden, wenn Sie eine Tastatur verwenden.

   

Simulieren des Fokuszustands mithilfe des Bereichs "Formatvorlagen"

Anstatt den Link mithilfe einer Tastatur zu fokussieren, können Sie den Fokuszustand mithilfe des Bereichs Formatvorlagen simulieren:

1. Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite, und wählen Sie dann Untersuchen aus.

3. Klicken Sie in der linken oberen Ecke von DevTools auf die Schaltfläche Inspect (), und klicken Sie dann auf der gerenderten Webseite auf den Link Katzen . Der <a href="#cats">Cats</a> Knoten ist im Tool Elemente hervorgehoben.

4. Klicken Sie im Bereich Formatvorlagen auf die Schaltfläche Elementzustand umschalten (:hov). Der Abschnitt Elementzustand erzwingen wird angezeigt.

5. Aktivieren Sie das :focus Kontrollkästchen. Der Fokuszustand wird auf den Link angewendet, aber der Link hat keinen visuellen Hinweis auf den Fokus:

   

Siehe auch

• Nachverfolgen, welches Element den Fokus hat