Testen der Tastaturunterstützung mithilfe des Quellreihenfolge-Viewers

Die Quellreihenfolge eines Dokuments ist für die Hilfstechnologie wichtig und kann sich von der Reihenfolge unterscheiden, in der Elemente auf der gerenderten Seite angezeigt werden. Die Quellreihenfolge ist die Reihenfolge, in der die Elemente der Webseite im HTML-Quellcode angezeigt werden. Mithilfe von CSS können Sie Seitenelemente visuell neu anordnen, was bedeutet, dass sich die visuelle und quellbasierte Reihenfolge einer Webseite unterscheiden können.

Hilfstechnologien wie Sprachausgaben folgen in der Regel der Quellreihenfolge und ignorieren die visuelle Reihenfolge der Elemente auf der Webseite.

Um sicherzustellen, dass das Dokument eine logische Reihenfolge aufweist, unabhängig davon, ob es mit Hilfstechnologie zugegriffen wird oder nicht, verwenden Sie den Source Order Viewer , um verschiedene Seitenelemente mit Zahlen zu beschriften, die die Reihenfolge im Quellcode des Dokuments angeben. Der Quellreihenfolge-Viewer befindet sich auf der Registerkarte Barrierefreiheit (in der Nähe der Registerkarte Formatvorlagen ).

Analysieren der Reihenfolge des Tastaturzugriffs durch Abschnitte der Seite

Die Demowebseite für Barrierefreiheitstests weist eine kontraintuitive Aktivierreihenfolge auf, bei der Tastaturbenutzer nur nach dem Durchlaufen aller Weiteren Links auf das Navigationsmenü der Randleiste zugreifen. Das Navigationsmenü der Randleiste soll eine Verknüpfung sein, um tief in den Seiteninhalt zu gelangen. Da Sie jedoch die gesamte Seite durchlaufen müssen, bevor Sie das Navigationsmenü der Seitenleiste erreichen, ist dieses Navigationsmenü für Tastaturbenutzer ineffektiv.

Die Tabulatortastenreihenfolge auf der Demoseite lautet:

1. Das Suchfeld und dann die Schaltfläche "Los" für das Feld "Suchen".

2. Die Schaltfläche "Mehr " im Abschnitt "Katzen ", um zu einer Webseite "Katzen" zu wechseln. Dann die anderen Mehr Knöpfe, für Hunde, Schafe, Pferde und dann Alpakas.

3. Die blauen Links des Navigationsmenüs der Seitenleiste: Katzen, Hunde, Schafe, Pferde und dann Alpakas.

4. Das Textfeld für die Spende im Spendenformular.

5. Die Schaltflächen in der oberen Navigationsleiste: "Home", "Adopt a pet", "Donate", "Jobs" und dann "About Us".

6. Die obere Benutzeroberfläche des Browsers.

Der Grund für die verwirrende Reihenfolge der TAB-TASTE ist, dass die Reihenfolge bei verwendung einer Tastatur durch die Quellreihenfolge des Dokuments bestimmt wird. Die Reihenfolge, die über eine Tastatur erfolgt, kann mithilfe des tabindex -Attributs für -Elemente geändert werden, wodurch dieses Element aus der Quellreihenfolge herausnimmt.

Im Quellcode des Dokuments wird das Navigationsmenü der Seitenleiste nach dem Standard Inhalt der Webseite angezeigt. CSS wurde verwendet, um das Navigationsmenü der Seitenleiste über den meisten Standard Inhalt der Webseite zu positionieren.

Sie können die Reihenfolge der Seitenelemente testen, indem Sie den Quellreihenfolge-Viewer auf der Registerkarte Barrierefreiheit verwenden.

Aktivieren und Verwenden des Quellreihenfolge-Viewers

So aktivieren und verwenden Sie den Source Order Viewer mit der Demoseite:

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

2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

3. Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Elemente aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools ().

4. Wählen Sie im Tool Elemente rechts neben der Registerkarte Formatvorlagen die Registerkarte Barrierefreiheit aus.

5. Aktivieren Sie im Abschnitt Source Order Viewer das Kontrollkästchen Quellreihenfolge anzeigen .

   Auf der gerenderten Webseite werden Zahlen angezeigt, die die Aktivierreihenfolge angeben, die durch die Reihenfolge der Codezeilen in der Quelldatei gesteuert wird:

   

6. Wählen Sie in der DOM-Struktur im Tool Elemente ein Hauptlayoutelement aus, z. B. das section -Element.

   Die Nummern der Aktivierreihenfolge werden nun auf untergeordneten Elementen des section Elements angezeigt, was die Quellreihenfolge der verschiedenen untergeordneten Elemente angibt:

   

7. Scrollen Sie auf der Seite, um alle Zahlen anzuzeigen, und überprüfen Sie, wie sich die Quellreihenfolge der verschiedenen Elemente von der visuellen Reihenfolge der Elemente unterscheidet.