Überprüfen Sie die Barrierefreiheitsstruktur auf Tastatur- und Sprachausgabeunterstützung

Mehrere DevTools-Features überprüfen auf Tastatur- und Sprachausgabeunterstützung. Die Verwendung des Inspect-Tools zum Überprüfen der Barrierefreiheit der einzelnen Seitenelemente kann ziemlich zeitaufwändig werden. Eine alternative Möglichkeit zum Überprüfen einer Webseite ist die Verwendung der Barrierefreiheitsstruktur. Die Barrierefreiheitsstruktur gibt an, welche Informationen die Seite für Hilfstechnologien wie Bildschirmleseprogramme bereitstellt.

Die Barrierefreiheitsstruktur ist eine Teilmenge der DOM-Struktur, die Elemente aus der DOM-Struktur enthält, die relevant und nützlich sind, um den Inhalt einer Seite in einer Sprachausgabe anzuzeigen. Die Barrierefreiheitsstruktur befindet sich auf der Registerkarte "Barrierefreiheit**" des** Elements-Tools (in der Nähe der Registerkarte "Formatvorlagen").

So erkunden Sie die Verwendung der Barrierefreiheitsstruktur:

  1. Öffnen Sie die Demo-Webseite für Barrierefreiheitstests auf einer neuen Registerkarte. Drücken Sie F12 dann, um DevTools zu öffnen.

  2. Wählen Sie in der oberen linken Ecke von DevTools die Schaltfläche " Überprüfen " (das Symbol "Überprüfen") aus, sodass die Schaltfläche hervorgehoben ist (blau).

  3. Zeigen Sie auf der gerenderten Webseite im Abschnitt "Schenkung " auf die Schaltfläche 100 . Die Überprüfungstoolüberlagerung wird angezeigt.

  4. Wählen Sie in der gerenderten Webseite die Schaltfläche 100 aus. In DevTools wird das Elementtool angezeigt. Die DOM-Struktur zeigt das div Element für die Schaltfläche 100 an. Im Bereich "Formatvorlagen " werden die CSS-Einstellungen für das Element angezeigt.

  5. Wählen Sie rechts neben der Registerkarte " Formatvorlagen " die Registerkarte "Barrierefreiheit" aus. Die Barrierefreiheitsstruktur für das Element wird angezeigt und erweitert.

    Schaltfläche "Schenkungsformular" im Tool "Barrierefreiheitsstruktur".

Jedes Element in der Struktur, das keinen Namen hat oder eine Rolle generic hat (z. B. das div Element), ist ein Problem, da dieses Element für Tastaturbenutzer oder Benutzer, die Hilfstechnologien verwenden, nicht verfügbar ist.

Weitere Informationen