Überprüfen Sie die Barrierefreiheitsstruktur für Tastatur- und Sprachausgabeunterstützung.
Mehrere DevTools-Features überprüfen, ob Tastatur- und Sprachausgabe unterstützt werden. Die Verwendung des Inspect-Tools , um die Barrierefreiheit jedes Einzelnen Seitenelements zu überprüfen, 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 Sprachausgaben bereitstellt.
Die Barrierefreiheitsstruktur ist eine Teilmenge der DOM-Struktur, die Elemente aus der DOM-Struktur enthält, die für die Anzeige des Inhalts einer Seite in einer Sprachausgabe relevant und nützlich sind. Die Barrierefreiheitsstruktur befindet sich auf der Registerkarte Barrierefreiheit des Tools Elemente (in der Nähe der Registerkarte Formatvorlagen ).
So erkunden Sie die Verwendung der Barrierefreiheitsstruktur:
Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.
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.
Wählen Sie in der linken oberen Ecke von DevTools die Schaltfläche Überprüfen (
) aus, damit die Schaltfläche hervorgehoben ist (blau).Zeigen Sie auf der gerenderten Webseite im Abschnitt Spende auf die Schaltfläche 100 . Die Überlagerung des Inspect-Tools wird angezeigt.
Klicken Sie auf der gerenderten Webseite auf die Schaltfläche 100 . In DevTools wird das Tool Elemente angezeigt. Die DOM-Struktur zeigt das
<div class="donationbutton">100</div>Element für die Schaltfläche 100 an. Im Bereich Formatvorlagen werden die CSS-Regeln angezeigt, die für das Element gelten.
Wählen Sie rechts neben der Registerkarte Formatvorlagen die Registerkarte Barrierefreiheit aus. Die Barrierefreiheitsstruktur für das -Element wird angezeigt und erweitert:
Jedes Element in der Struktur, das keinen Namen hat oder eine Rolle von generic hat (z. B. das <div class="donationbutton">100</div> -Element), ist ein Problem, da dieses Element für Tastaturbenutzer oder Benutzer, die Hilfstechnologie verwenden, nicht verfügbar ist.