Verwenden Sie das Inspect-Tool, um Barrierefreiheitsprobleme zu erkennen, indem Sie auf die Webseite zeigen

Das Inspect-Tool zeigt Informationen zu einzelnen Elementen an, während Sie mit dem Mauszeiger auf die gerenderte Webseite zeigen, einschließlich Barrierefreiheitsinformationen. Im Gegensatz dazu meldet das Tool "Probleme " automatisch Probleme für die gesamte Webseite.

Die Schaltfläche "Werkzeug prüfen " (Inspect.) befindet sich in der oberen linken Ecke von DevTools. Wenn Sie auf die Schaltfläche "Werkzeug prüfen " klicken, wird die Schaltfläche blau, womit angegeben wird, dass das Inspect-Tool aktiv ist.

Wenn das Inspect-Tool aktiv ist, wird beim Zeigen auf ein beliebiges Element auf der gerenderten Webseite die Inspect-Überlagerung angezeigt. Diese Überlagerung zeigt allgemeine Informationen und Barrierefreiheitsinformationen zu diesem Element an. Im Abschnitt "Barrierefreiheit " der Überlagerung "Überprüfen " werden Informationen zu Textfarbkontrast, Sprachausgabetext und Tastaturunterstützung angezeigt.

Das Inspect-Tool zeigt den Bereich des Elements als mehrfarbige Überlagerung und die Details des Elements als große Informationsüberlagerung an.

Der Hauptartikel zum Inspect-Tool ist das Analysieren von HTML-Seiten mithilfe des Inspect-Tools.

Überprüfen einzelner Elemente auf Textkontrast, Sprachausgabetext und Tastaturunterstützung

  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 "Überprüfen" aus. Oder drücken Sie F12. DevTools wird neben der Webseite geöffnet.

  3. Klicken Sie in der oberen linken Ecke von DevTools auf die Schaltfläche " Prüfen (Prüfen)", damit das Symbol hervorgehoben ist (blau).

    Zum Aktivieren des Inspect-Tools klicken Sie auf die Schaltfläche "Überprüfen".

  4. Zeigen Sie auf ein beliebiges Element auf der gerenderten Demowebseite. Das Inspect-Tool zeigt eine Informationsüberlagerung unterhalb des Elements innerhalb der gerenderten Webseite an.

    Das Inspect-Tool zeigt das Layout des Elements als mehrfarbige Überlagerung und die Details des Elements als große Informationsüberlagerung an.

Der untere Teil der Inspect-Überlagerung enthält einen Abschnitt "Barrierefreiheit ", der die folgenden Informationen enthält:

  • Der Kontrast definiert, ob ein Element von Personen mit Sehschwäche verstanden werden kann. Das in den WCAG-Richtlinien definierte Kontrastverhältnis gibt an, ob genügend Kontrast vorhanden ist (ein grünes Häkchensymbol) oder nicht ausreichend (ein orangefarbenes Ausrufezeichensymbol).

  • Name und Rolle sind die Hilfstechnologien wie Bildschirmsprachausgaben, die über das Element berichten.

    • Der Name ist der Textinhalt eines a Elements. Für das Element <a href="/">About Us</a>lautet der im Inspect-Tool angezeigte Name "About Us".
    • Die Rolle des Elements. Dies ist normalerweise der Elementname, z article. B. , img , linkoder heading. Die div Und-Elemente span werden als genericbezeichnet.
  • Tastaturfokussierbar gibt an, ob Benutzer das Element unabhängig vom Eingabegerät erreichen können.

    • Ein grünes Häkchensymbol gibt an, dass das Element tastaturfokussierbar ist.
    • Ein grauer Kreis mit diagonaler Linie gibt an, dass das Element nicht tastaturfokussierbar ist.

Zusätzliche Informationen in der Inspect-Überlagerung

Der obere Teil der Inspect-Überlagerung , die sich oberhalb des Abschnitts "Barrierefreiheit " befindet, enthält die folgenden Details des Elements.

  • Layouttyp. Wenn das Element mit einer Flexbox oder einem Raster positioniert wird, ein Symbol (Rasterlayoutsymbol.) angezeigt wird.
  • Name des Elements, z h1. B. , h2oder div.
  • Die Abmessungen des Elements in Pixeln.
  • Die Farbe als Farbmuster (oder ein kleines, farbiges Quadrat) und als Zeichenfolge (z #336699. B. ).
  • Schriftartinformationen, z. B. Schriftgrad und Schriftfamilien.
  • Rand und Abstand in Pixel.

Identifizieren geschachtelter Bereiche mithilfe von Farbhervorhebungen

Zusätzlich zur Informationsüberlagerung bietet das Inspect-Tool auch Regionsfarben, die dem Zeigen in der DOM-Struktur im Elementtool ähneln.

  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 "Überprüfen" aus. Oder drücken Sie F12. DevTools wird neben der Webseite geöffnet.

  3. Klicken Sie in der oberen linken Ecke von DevTools auf die Schaltfläche " Überprüfen " (Symbol "Tool prüfen"). Dadurch wird die Schaltfläche hervorgehoben (blau).

  4. Zeigen Sie mit der Maus auf verschiedene Teile der gerenderten Demowebseite.

    Jedes Element auf der Webseite wird jetzt mit einer mehrfarbigen Überlagerung angezeigt. Diese mehrfarbige Überlagerung kann geschachtelte Bereiche innerhalb eines Elements anzeigen.

  5. Zeigen Sie z. B. auf den linken Rand von Katzen.

    Das Inspect-Tool hebt mehrere rechteckige Teile des Cats-Abschnitts mit unterschiedlichen Farben hervor und zeigt das Layout an, das aus den CSS-Flexboxdefinitionen auf Ihrer Webseite resultiert:

    Multicolor flexbox overlay and information overlay when using the Inspect tool.

Wenn Sie die Rasterüberlagerung oder flexbox-Überlagerung konfigurieren möchten, wählen Sie im Elementtool die Registerkarte " Layout " aus. Siehe Überprüfen des CSS-Rasters.

Verwenden sie das Inspect-Tool, um mit dem Mauszeiger auf die Webseite zu zeigen, um dom und CSS hervorzuheben

  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 "Überprüfen" aus. Oder drücken Sie F12. DevTools wird neben der Webseite geöffnet.

  3. Klicken Sie in DevTools in der oberen linken Ecke auf die Schaltfläche " Überprüfen " (das Tool "Überprüfen"). Dadurch wird die Schaltfläche hervorgehoben (blau).

  4. Wählen Sie das Elementtool aus .

  5. Zeigen Sie bei aktivem Inspect-Tool auf verschiedene Teile der gerenderten Webseite. Im Elementtool wird die HTML-DOM-Struktur automatisch erweitert, um Informationen zu dem Element anzuzeigen, auf das Sie zeigen. Das Zeigen mit dem Mauszeiger bewirkt nicht, dass der Bereich " Formatvorlagen " aktualisiert wird.

  6. Klicken Sie auf der gerenderten Webseite auf ein beliebiges Element.

    Das Elementtool wird automatisch geöffnet und zeigt den HTML-Code des Elements in der DOM-Struktur an. Das Elementtool zeigt auch das angewendete CSS für das Element im Bereich " Formatvorlagen " an. Durch Klicken auf ein Element auf der gerenderten Webseite wird das Inspect-Tool deaktiviert.

    Details zum angeklickten Element werden im Elementtool angezeigt.

Nachdem Sie auf ein Element auf der gerenderten Webseite geklickt haben, können Sie die Registerkarte "Barrierefreiheit " (in der Nähe der Registerkarte " Formatvorlagen ") verwenden, um die Barrierefreiheitsstruktur anzuzeigen und die Quellreihenfolgenanzeige zu verwenden.

Weitere Informationen