Verwenden Des Inspect-Tools, um Barrierefreiheitsprobleme zu erkennen, indem Sie mit dem Mauszeiger 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 Informationen zur Barrierefreiheit. Im Gegensatz dazu meldet das Tool Probleme automatisch für die gesamte Webseite.

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

Wenn das Inspect-Tool aktiv ist, wird beim Bewegen des Mauszeigers 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 Textfarbenkontrast, Sprachausgabetext und Tastaturunterstützung angezeigt:

Der Standard Artikel zum Inspect-Tool ist Analysieren von HTML-Seiten mit dem Inspect-Tool. Der vorliegende Artikel konzentriert sich auf die Barrierefreiheitsfeatures 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 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 Untersuchen (), damit das Symbol hervorgehoben ist (blau):

   

4. Zeigen Sie auf ein beliebiges Element auf der gerenderten Demowebseite. Das Inspect-Tool zeigt eine Informationsüberlagerung neben dem Element auf der gerenderten Webseite an. Die Informationsüberlagerung enthält einen Abschnitt Barrierefreiheit :

   

Der Abschnitt Barrierefreiheit enthält die folgenden Informationen:

• Kontrast definiert, ob ein Element von Sehschwächen verstanden werden kann. Das in den WCAG-Richtlinien definierte Kontrastverhältnis gibt an, ob genügend Kontrast vorhanden ist oder nicht.

  • Ein grünes Häkchen zeigt einen ausreichenden Kontrast an.
  • Ein orangefarbenes Ausrufezeichen zeigt an, dass der Kontrast nicht ausreicht.

• Name und Rolle werden von Hilfstechnologien wie Sprachausgaben über das Element gemeldet.

  • Der Name ist der Textinhalt des darauf gezeigten Elements. Für das Element <a href="/">About Us</a>lautet der Name , der im Inspect-Tool angezeigt wird , Über uns.
  • Die Rolle des Elements. Dies ist in der Regel der Elementname, z article. B. , img , linkoder heading. Die div Elemente und span werden als genericbezeichnet.

• Tastaturfokussierbar gibt an, ob Benutzer das Element unabhängig vom Eingabegerät erreichen können.

  • Ein grünes Häkchen zeigt 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 , der sich über dem Abschnitt Barrierefreiheit befindet, enthält die folgenden Details des Elements.

• Layouttyp. Wenn das Element mithilfe einer Flexbox oder eines Rasters positioniert wird, wird ein Symbol () angezeigt.
• 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 Pixeln.

Siehe auch

• Analysieren von HTML-Seiten mit dem Inspect-Tool
• Untersuchen eines Knotens
• Überprüfen des Textfarbenkontrasts im Standardzustand mit dem Tool "Inspect"