Übersicht über Barrierefreiheitstests mit DevTools

In diesem Artikel behandeln wir einige der Features, die Sie in DevTools verwenden können, um auf Barrierefreiheitsprobleme zu testen. Wir gehen durch die Verwendung verschiedener Features von DevTools, um die Barrierefreiheitsprobleme auf einer Demoseite zu erkennen, und wir besprechen, wie sie behoben werden können.

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

    Die in diesem Artikel verwendete Demoseite mit einigen Barrierefreiheitsproblemen.

  2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Demowebseite, und wählen Sie dann "Überprüfen" aus. DevTools wird neben der Webseite geöffnet.

Automatisierte Tests mithilfe des Tools "Probleme"

Wenn Sie die Demoseite im Browser öffnen und DevTools öffnen, beachten Sie, dass einige Probleme automatisch im Problemindikator erkannt werden. Klicken Sie auf den Problemzähler (Fehlerindikator), um das Problemtool zu öffnen, um die Probleme und weitere Informationen anzuzeigen:

Der Problemindikator zeigt, wie viele Probleme auf der aktuellen Webseite vorhanden sind, und öffnet das Tool "Probleme".

In diesem Artikel konzentrieren wir uns auf den Abschnitt "Barrierefreiheit " des Tools "Probleme ":

Barrierefreiheitswarnungen, die im Tool "Probleme" angezeigt werden.

Ausführliche exemplarische Schritte finden Sie im Abschnitt "Barrierefreiheit" des Tools "Probleme".

Automatisches Überprüfen, ob Eingabefelder Beschriftungen aufweisen

Die erste angezeigte Warnung ist Form elements must have labels: Element has no title attribute. Element has no placeholder attribute. Wenn Sie diesen Abschnitt erweitern und dann auf den Link " In Elementen öffnen " klicken, wird das Tool "Elemente " geöffnet, wobei das Element in der DOM-Struktur hervorgehoben ist. Auf der Registerkarte " Formatvorlagen " wird das CSS angezeigt, das auf das Element angewendet wird.

Ausführliche exemplarische Schritte finden Sie unter Überprüfen, ob Eingabefelder Bezeichnungen aufweisen:

Elements tool showing the problematisch HTML after clicking the link in the Issues tool.

In diesem Fall verfügt der HTML-Code über ein label Element, das nicht funktioniert.

<label>Search</label>
<input type="search">
<input type="submit" value="go">

Die Verwendung des label Elements ist hier falsch, da es keine Verbindung zwischen dem label Element und dem input Element gibt. Eine gültige HTML-Beschriftung würde den Fokus auf das Sucheingabetextfeld setzen, wenn Sie auf die Suchbezeichnung klicken.

Sie können dieses Problem lösen, indem Sie das input Element entweder in einem label Element verschachteln oder ein for Attribut hinzufügen, das auf ein id Attribut des input Elements verweist. Wenn Sie eine korrekte Verbindung anzeigen möchten, klicken Sie im Spendenformular auf das Etikett "Sonstige ".

Sie können auch auf die erklärenden Links im Tool "Probleme " klicken, um diese Informationen zu erhalten:

Links im Problemtool, die auf ausführlichere Informationen zu dem Problem verweisen.

Automatische Überprüfung, ob Bilder Alternativtext enthalten

Das andere automatisch erkannte Problem ist, dass viele der Bilder auf der Seite keinen Alternativtext haben. Wenn Sie die Images must have alternate text: Element has no title attribute Warnung erweitern, erhalten Sie vier Instanzen von Bildern mit diesem Problem:

Das Problemtool, das Bilder mit fehlendem Alternativtext meldet.

Ausführliche exemplarische Schritte finden Sie unter Überprüfen, ob Bilder Alternativtext enthalten.

Automatische Überprüfung, ob Textfarben genügend Kontrast aufweisen

Das Problemtool meldet auch, wenn zwei Elemente auf der Seite nicht über genügend Kontrast verfügen:

Im Problemtool gemeldete Kontrastprobleme.

Das Problemtool enthält detaillierte Erläuterungen der Warnung. Wenn Sie einen Drilldown ausführen, erhalten Sie eine Liste der Elemente, die dieses Problem haben. Wenn Sie im Tool "Probleme " auf einen Link klicken, der auf ein Element verweist, wird dieses Element auf der gerenderten Seite hervorgehoben:

Element auf der Seite, das nach dem Klicken auf den Link hervorgehoben ist.

Ausführliche schritte zur exemplarischen Vorgehensweise finden Sie unter Überprüfen, ob textfarben genügend Kontrast aufweisen.

Stellen Sie sicher, dass das Webseitenlayout verwendet werden kann, wenn es schmal ist.

Ein wichtiger Teil der Barrierefreiheit besteht darin, sicherzustellen, dass Ihre Website in einem schmalen Viewport gut funktioniert. Viele Benutzer müssen die Seite zoomen, um sie verwenden zu können. Dies bedeutet, dass nicht mehr viel Platz übrig ist. Wenn nicht genügend Platz vorhanden ist, sollte das mehrspaltige Layout in ein einspaltiges Layout umgewandelt werden, wobei Inhalte in einer verständlichen Reihenfolge platziert werden. Dies bedeutet, dass Sie den wichtigsten Inhalt oben auf der Seite platzieren und weitere Inhalte weiter unten auf der Seite platzieren.

Wenn Sie das Browserfenster schmaler gestalten und die Pfeiltasten verwenden, um auf der Seite zu scrollen, können Sie sehen, dass die obere Navigationsleiste der Demoseite einige Barrierefreiheitsprobleme aufweist. Die obere Navigationsleiste überlappt das Suchformular , wie in der vorherigen Abbildung gezeigt, und dieses Problem muss behoben werden.

Geräteemulationstool zum Testen von schmalen Viewports

Sie können einen schmalen Viewport simulieren, indem Sie die Größe des Browserfensters ändern. Eine bessere Möglichkeit zum Testen der Reaktionsfähigkeit Ihres Designs ist jedoch die Verwendung des Geräteemulationstools . Hier sind einige Features des Geräteemulationstools , die Ihnen helfen, Barrierefreiheitsprobleme einer beliebigen Website zu finden:

  • Ändern Sie die Größe der Seite, ohne die Größe des Browserfensters zu ändern, und testen Sie, ob Ihre CSS-Medienabfragen eine Änderung des Layouts auslösen.

  • Suchen Sie nach Abhängigkeiten, die eine Maus verwenden. Standardmäßig geht die Geräteemulation von einem Touchgerät aus. Dies bedeutet, dass alle Funktionen Ihres Produkts, die auf der Hoverinteraktion basiert, nicht funktionieren.

  • Führen Sie visuelle Tests durch, indem Sie verschiedene Geräte, Zoomstufen und Pixelverhältnisse simulieren.

  • Testen Sie, wie sich Ihr Produkt bei unzuverlässigen Verbindungen verhält oder wenn der Benutzer offline ist. Das Anzeigen der wichtigsten Interaktionen für einen Benutzer bei einer langsamen Verbindung ist ebenfalls eine Überlegung zur Barrierefreiheit.

Weitere Informationen zum Geräteemulationstool finden Sie unter Emulieren mobiler Geräte (Geräteemulation).

Wellenförmige Unterstreichungen in der DOM-Struktur weisen auf automatisch erkannte Probleme hin

Die DOM-Struktur im Elementtool kennzeichnet Probleme automatisch direkt im HTML-Code, indem eine wellenförmige Unterstreichung hinzugefügt wird. Wenn Sie Shift+click ein Element haben, das eine wellenförmige Unterstreichung aufweist, wird das Tool "Probleme " geöffnet:

Ein Element, das in der DOM-Struktur mit wellenförmiger Unterstreichung angezeigt wird, weist Probleme auf.  Umschalt+Klicken Sie auf das Element, um direkt zum Problem zu gelangen.

Diese Probleme, die vom Tool "Probleme " gefunden wurden, sind einige relativ offensichtliche Barrierefreiheitsprobleme, die vermieden werden können. Wenn Sie das Problemtool und seine geführten Erläuterungen verwenden, um sie zu beheben, sind Sie auf dem Weg zu einem barrierefreien Produkt.

Grenzwerte für automatisierte Tests

Das Tool "Probleme", "Barrierefreiheit Insights" und "Leuchtturm" sind Tools, die automatisch einen Barrierefreiheitsbericht für eine Webseite generieren. Das Abrufen eines automatisierten Berichts von solchen Tools ist nur der Anfang Ihrer Reise zu Barrierefreiheitstests.

Bei der Barrierefreiheit geht es um menschliche Interaktion – Menschen mit unterschiedlichen Bedürfnissen verwenden Ihre Produkte in verschiedenen technischen Umgebungen. Diese Tests können nicht vollständig automatisiert werden, müssen aber von einem Menschen überprüft werden, der durch das Produkt navigiert. Im besten Szenario hätten Sie Zugriff auf Tester mit unterschiedlichen Barrierefreiheitsanforderungen und Tester mit verschiedenen Umgebungen. Sie können aber bereits viel selbst tun, indem Sie die Tastatur verwenden, um zu navigieren und verschiedene Teile der Seite zu untersuchen.

Auf der Demoseite gibt es weitere Probleme, die automatisierte Tests nicht erkennen können, einschließlich:

  • Probleme, die auftreten, nachdem Sie mit der Seite interagiert haben.
  • Probleme im Zusammenhang mit Änderungen an der Anzeige, z. B. das Schmalmachen des Fensters.

Eines dieser Themen ist das Spendenformular. Wenn Sie eine Maus verwenden, können Sie auf die verschiedenen Optionen klicken, um Geld zu spenden. Wenn Sie jedoch versuchen, über die Tastatur auf das Spendenformular zuzugreifen, geschieht nichts. Um dieses Problem zu beheben, müssen Sie das Inspect-Tool verwenden:

Das Spendenformular hochsichtig auf der Demoseite.

Verwenden des Inspect-Tools zum Erkennen von Barrierefreiheitsproblemen

Verwenden Sie das Inspect-Tool , um Barrierefreiheitsprobleme zu erkennen, indem Sie mit der Maus auf Teile der Webseite zeigen. Das Inspect-Tool (Inspect.) befindet sich in der oberen linken Ecke von DevTools. Aktivieren Sie das Inspect-Tool, indem Sie auf die Schaltfläche " Werkzeug prüfen " klicken:

Aktivieren Sie das Inspect-Tool, indem Sie auf die Schaltfläche "Werkzeug prüfen" klicken.

Nachdem Sie auf die Schaltfläche "Tool prüfen " geklickt haben, können Sie den Mauszeiger über ein beliebiges Element auf der gerenderten Seite bewegen. Das Inspect-Tool zeigt das Layout des Elements als mehrfarbige Flexboxüberlagerung und Elementdetails als Informationsüberlagerung ähnlich einer QuickInfo an:

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

Der Abschnitt "Barrierefreiheit prüfen" des Tools "Überprüfen" enthält ggf. eine Kontrastlinie :

Der Abschnitt "Barrierefreiheit prüfen" des Tools enthält ggf. eine Kontrastlinie.

Ausführliche exemplarische Schritte finden Sie unter Identifizieren geschachtelter Bereiche mithilfe von Farbhervorhebungen. Der Hauptartikel zum Inspect-Tool ist das Analysieren von HTML-Seiten mithilfe des Inspect-Tools.

Im oberen Abschnitt der Informationsüberlagerung des Inspect-Tools werden die folgenden Informationen angezeigt:

  • Layouttyp; wenn das Element mithilfe einer Flexbox oder eines Rasters positioniert wird, wird ein entsprechendes Symbol angezeigt (Rasterlayoutsymbol.).
  • Der Name des Elements, z. B. a, h1 oder div.
  • Die Abmessungen des Elements in Pixeln.
  • Die Farbe als Farbmuster (ein kleines, farbiges Quadrat) und als formatierter Wert (z #336699. B. ).
  • Schriftartinformationen (Schriftgrad und Schriftfamilien).
  • Rand und Abstand in Pixel.

Der Barrierefreiheitsteil der Inspect-Überlagerung wird im folgenden Abschnitt beschrieben.

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

Der Abschnitt "Barrierefreiheit " der Überlagerung "Inspect " enthält die folgenden Zeilen:

  • 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 zwischen Text- und Hintergrundfarben vorhanden ist. Ein grünes Häkchensymbol gibt an, dass genügend Kontrast vorhanden ist, und ein orangefarbenes Ausrufezeichensymbol gibt an, dass nicht genügend Kontrast vorhanden ist.
  • Name und Rolle geben an, welche Informationsunterstützungstechnologie, z. B. Bildschirmsprachausgaben, über das Element berichtet.

    • 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. Die Rolle ist normalerweise der Elementname, z article. B. , img , linkoder heading. Die div Elemente werden span als genericdargestellt.
  • Tastaturfokussierbar gibt an, ob Benutzer das Element mit anderen Eingabegeräten als einer Maus 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.

Ausführliche Schritte zur exemplarischen Vorgehensweise finden Sie unter Überprüfen einzelner Elemente auf Textkontrast, Bildschirmsprachausgabetext und Tastaturunterstützung.

Verwenden des Inspect-Tools zum Zeigen auf die Webseite zum Hervorheben von DOM und CSS

Wenn Sie das Inspect-Tool verwenden, wird durch Klicken auf ein Element auf der gerenderten Seite das Elementtool geöffnet. Die DOM-Struktur zeigt den HTML-Code des Elements, und "Styles " zeigt die CSS-Eigenschaften an, die auf das Element angewendet werden:

Details zum angeklickten Element, das im Elementtool angezeigt wird.

Wenn Sie mit dem Inspect-Tool auf verschiedene Teile der gerenderten Seite zeigen und elemente geöffnet sind, werden Sie feststellen, dass die DOM-Struktur automatisch aktualisiert wird.

Ausführliche Schritte zur exemplarischen Vorgehensweise finden Sie unter Verwenden des Inspect-Tools, um mit dem Mauszeiger auf die Webseite zu zeigen, um dom und CSS hervorzuheben. Der Hauptartikel zum Inspect-Tool ist das Analysieren von HTML-Seiten mithilfe des Inspect-Tools.

Überprüfen der Tastaturunterstützung mithilfe der TAB-TASTE und der EINGABETASTE

Nicht alle Personen verwenden Zeiger- oder Touchgeräte, und einige Personen haben möglicherweise Sehschwächen. Um diese Szenarien zu berücksichtigen, stellen Sie sicher, dass UIs mit Tastaturen funktionieren.

Sie können mithilfe einer Tastatur testen, um auf der Seite zu navigieren oder von Tab Shift+Tab Element zu Element zu springen. Wenn Sie auf der Demoseite drücken Tab , erhält als Erstes das Suchformular in der Kopfzeile der Seite den Fokus. Durch Drücken Enter können Sie sogar das Formular übermitteln, sodass dies trotz des Bezeichnungsproblems funktioniert, das wir zuvor bei Verwendung des Tools "Probleme " entdeckt haben.

Ausführliche Schritte zur exemplarischen Vorgehensweise finden Sie unter "Überprüfen auf Tastaturunterstützung mithilfe der TAB- und EINGABETASTE".For detailed walkthrough steps, see Check for keyboard support by using the TAB and ENTER keys.

Wenn Sie anstelle von EnterdrückenTab, ist das nächste Element, das den Fokus erhält, der erste Link "Mehr" im Inhaltsabschnitt der Seite, wie durch eine Gliederung angegeben:

Navigieren auf der Seite mithilfe der TAB-TASTE.  Der Fokus wird auf einem Link "Weitere" auf der Seite angezeigt.

Nachdem Sie über den letzten Link "Weitere " hinausgegangen sind, scrollt die Seite nach oben, und es ist unklar, welches Element den Fokus hat.

Wenn Sie unten links auf dem Bildschirm nachschauen oder eine Sprachausgabe verwenden, können Sie feststellen, dass der blaue Cats-Link im Navigationsmenü der Randleiste den Fokus hat, da im Browser die URL #catsangezeigt wird:

Fehlende Fokusformatierung macht es unmöglich zu wissen, wo Sie sich auf der Seite befinden.  Der einzige Hinweis ist das Linkziel unten links.

Durch erneutes Drücken Tab gelangen Sie zum Eingabetextfeld des Spendenformulars. Die Schaltflächen 50, 100 oder 200 über dem Eingabetextfeld können jedoch nicht erreicht werden.**** Wenn sich der Fokus auf diesem Eingabetextfeld befindet, wird das Formular nicht durch Drücken Enter übermittelt:

Das einzige tastaturfreundliche Element im Spendenformular ist das Eingabetextfeld.

Durch erneutes Drücken Tab wird der Fokus auf der oberen Navigationsleiste platziert, auf der Sie drücken Enter können, um zu einem anderen Abschnitt der Seite oder einer anderen Seite der Website zu wechseln. Sie wissen, auf welchem Element Sie sich befinden, da es eine Fokusgliederung gibt. Um auf einen Link in der oberen Navigationsleiste zu klicken, verwenden Tab Oder Shift+Tab setzen Sie den Fokus auf einen Link, und drücken Sie Enterdann:

Die obere Navigationsleiste weist eine Hervorhebung und eine Fokusgliederung auf und ist somit tastaturgängig.

Wir haben hier einige Probleme gefunden, um Folgendes zu beheben:

  • Im Navigationsmenü der Randleiste werden Benutzer nicht angezeigt, wo sich der Tab Fokus befindet, wenn Sie Tastaturen verwenden, um sich auf der Seite zu bewegen.
  • Auf dem Spendenformular funktionieren die Schaltflächen **50, 100, ** und 200 sowie die Formular-Übermittlungsfunktion bei Verwendung der Tastatur nicht.
  • Die Aktivierreihenfolge der Tastatur ist falsch. Die Tab Taste navigiert durch alle Links " Weitere " auf der Seite vor dem Navigationsmenü der Randleiste. Diese Tab Reihenfolge ist nicht hilfreich, da die Randleistennavigation Sie zu den verschiedenen Abschnitten dieser Seite führen soll.

Lassen Sie uns diese Probleme mithilfe von DevTools analysieren.

Analysieren von Barrierefreiheitsproblemen mithilfe von DevTools

Analysieren der fehlenden Anzeige des Tastaturfokus im Randleistenmenü

Um herauszufinden, warum die Randleistennavigation nicht wie erwartet für die Verwendung mit Tastaturen optimiert ist, beginnen Sie mit dem Inspect-Tool , um einen Link im Navigationsmenü der Randleiste hervorzuheben, und führen Sie dann einen Drilldown in der DOM-Struktur zum a Element aus:

Überprüfen des Quellcodes und der angewendeten Formatvorlagen eines Links im Navigationsmenü der Randleiste.

Auf der Registerkarte " Formatvorlagen " sehen Sie das CSS, das auf den Link angewendet wird, und wenn Sie auf den Link styles.cssklicken, wird die Datei im Tool "Quellen " geöffnet:

Die Formatvorlagen, die auf den Link angewendet werden, siehe Quellentool.

Im obigen Beispiel enthalten die Formatvorlagen der Seite einen hover Zustand im Menüelement, wenn Sie eine Maus verwenden, aber es gibt keinen focus Zustand im CSS für Tastaturbenutzer.

In diesem Beispiel verwenden outline: nonedie Links auch . Diese Formatvorlage wird verwendet, um die Gliederung zu entfernen, die von Browsern automatisch zu Elementen hinzugefügt wird, wenn sie den Fokus haben und Tastaturen verwendet werden. Um dieses Problem zu vermeiden, verwenden outline: noneSie nicht .

Ausführliche exemplarische Schritte finden Sie unter Analysieren des Mangels an Anzeige des Tastaturfokus in einem Randleistenmenü.

Analysieren des Mangels an Tastaturunterstützung im Spendenformular

Die Schaltflächen auf dem Spendenformular werden mithilfe des div Elements implementiert, das von automatisierten Testtools nicht als Steuerelement eines Formulars erkannt wird.

Um dies zu untersuchen, können Sie mit dem Inspect-Tool auf die Schaltflächen des Spendenformulars zeigen. Das Ergebnis ist, dass keiner von ihnen über die Tastatur zugänglich ist, wie durch den grauen Ring auf der Tastaturfokussierungslinie der Informationsüberlagerung angegeben. Wie in den Zeilen "Name " und " Rolle " der Informationsüberlagerung gezeigt, haben die Schaltflächen des Spendenformulars auch keinen Namen und eine Rolle von generic (Darstellen oder div span Elementen), was bedeutet, dass sie für Hilfstechnologien nicht zugänglich sind:

Wenn Sie die Schaltflächen des Formulars überprüfen, wird angezeigt, dass sie nicht über die Tastatur zugänglich sind.

Ausführliche exemplarische Schritte finden Sie unter Analysieren des Mangels an Tastaturunterstützung in einem Formular.

Wenn Sie auf die Schaltfläche "Spenden " klicken, gelangen Sie mit dem Tool "Überprüfen " zum Tool "Elemente " und zeigen den HTML-Code des Formulars an.

<div class="donationrow">
    <div class="donationbutton">50</div>
    <div class="donationbutton">100</div>
    <div class="donationbutton">200</div>
</div>
<div class="donationrow">
    <label for="freedonation">Other</label>
    <input id="freedonation" class="smallinput">
</div>
<div class="donationrow">
    <div class="submitbutton">Donate</div>
</div>

Die Verwendung der Elemente und input der label Elemente ist gültig, was dazu führt, dass die Beschriftung wie beabsichtigt funktioniert und auf das Textfeld über die input Tastatur zugegriffen werden kann. Der Rest des Formulars verwendet div Elemente, die leicht formatiert werden können, aber keine semantische Bedeutung haben.

Als Nächstes analysieren wir die JavaScript-Funktionalität des Formulars. Klicken Sie in "Elemente" auf die Registerkarte " Ereignislistener ", um das JavaScript des Formulars zu analysieren:

Die Registerkarte "Ereignislistener" mit einem Link zum JavaScript für das Formular.

Klicken Sie auf der Registerkarte " Ereignislistener " auf den buttons.js:18 Link, um das Tool "Quellen " zu öffnen, und prüfen Sie dann das JavaScript, das für die Funktionalität des Formulars verantwortlich ist:

JavaScript, das für die Funktionalität des Spendenformulars verantwortlich ist, wird im Quellentool angezeigt.

Die Verwendung von click Ereignissen mit Schaltflächen wird empfohlen, da click Ereignisse sowohl mit Mauszeigern als auch mit Tastaturen funktionieren. Da ein div Element jedoch nicht über die Tastatur zugänglich ist und die Schaltfläche "Spenden " als div Element implementiert ist, wird dieses JavaScript nur ausgeführt, wenn eine Maus verwendet wird.

Die Verwendung einer div Schaltfläche ist ein klassisches Beispiel, bei dem zusätzliches JavaScript zum Erstellen von Funktionen benötigt wird, die button von Elementen bereitgestellt werden. Dies führt zu einer Erfahrung, auf die nicht zugegriffen werden kann.

Überprüfen der Barrierefreiheitsstruktur auf Tastatur- und Sprachausgabeunterstützung

Das Verwenden des Inspect-Tools zum individuellen Überprüfen jedes Elements auf der Seite ist zeitaufwändig. Verwenden Sie stattdessen die Registerkarte "Barrierefreiheit ", um in der Barrierefreiheitsstruktur der Seite zu navigieren. Die Barrierefreiheitsstruktur gibt an, welche Informationen die Seite für Hilfstechnologien wie Bildschirmsprachausgaben bereitstellt:

Schaltfläche "Spendenformular" in der Barrierefreiheitsstruktur.

Jedes Element in der Struktur, das keinen Namen hat oder eine Rolle von generichat, ist ein Problem, da dieses Element für Tastaturbenutzer oder Personen, die Hilfstechnologien verwenden, nicht verfügbar ist.

Ausführliche exemplarische Schritte finden Sie unter "Überprüfen der Barrierefreiheitsstruktur für Tastatur- und Sprachausgabeunterstützung".

Analysieren der Reihenfolge des Tastaturzugriffs auf Abschnitte der Seite

Ein weiteres Problem ist die unklare Aktivierreihenfolge auf der Seite. Tastaturbenutzer erreichen das Navigationsmenü der Randleiste erst, nachdem sie alle Links " Weitere " auf der gesamten Seite durchlaufen haben. In diesem Beispiel soll das Navigationsmenü der Randleiste eine Verknüpfung zu verschiedenen Abschnitten dieser Seite sein. Diese Aktivierreihenfolge führt zu einer schlechten Benutzererfahrung.

Der Grund für die verwirrende Tab Reihenfolge ist, dass sie durch die Quellreihenfolge des Dokuments bestimmt wird. Die Aktivierreihenfolge kann auch mithilfe des tabindex Attributs für ein Element geändert werden, das dieses Element aus der Standardquellreihenfolge herausnimmt.

Im Quellcode des Dokuments wird das Navigationsmenü der Randleiste nach dem Hauptinhalt der Seite angezeigt. Das Navigationsmenü der Randleiste wird nur dann über dem Hauptinhalt der Seite angezeigt, weil das Navigationsmenü der Randleiste mit CSS positioniert wurde.

Die Quellreihenfolge eines Dokuments ist für Hilfstechnologien wichtig und kann sich von der Reihenfolge unterscheiden, in der Elemente auf der gerenderten Seite angezeigt werden. Mithilfe von CSS können Sie Seitenelemente visuell neu anordnen. Dies bedeutet jedoch nicht, dass Hilfstechnologien wie Bildschirmsprachausgaben Seitenelemente in derselben Reihenfolge wie css darstellen.

Sie können die Reihenfolge der Seitenelemente mithilfe der Quellreihenfolgenanzeige auf der Registerkarte "Barrierefreiheit " testen. Scrollen Sie ganz nach unten, und aktivieren Sie das Kontrollkästchen "Quellreihenfolge anzeigen ". Wenn Sie nun in der DOM-Struktur im Elementtool navigieren, z. B. auf das header Element klicken, werden numerische Überlagerungen in Abschnitten der gerenderten Seite angezeigt, die die Quellreihenfolge darstellen:

Wenn Sie den Source Order Viewer aktivieren, wird die Reihenfolge der Elemente im Quellcode als numerische Überlagerungen auf der Seite angezeigt.

Ausführliche exemplarische Schritte finden Sie unter "Testen der Tastaturunterstützung mithilfe des Source Order Viewer".

Testen des Kontrasts von Textfarben in verschiedenen Zuständen

Das Inspect-Tool meldet Barrierefreiheitsprobleme jeweils für einen Zustand. Zunächst beschreiben wir die Einschränkung der Verwendung des Inspect-Tools, um nur den statischen Zustand eines Seitenelements anzuzeigen. Anschließend erläutern wir, wie Sie andere Zustände eines Seitenelements untersuchen, indem Sie auf der Registerkarte "Formatvorlagen**" auf :hov (Elementzustand umschalten)** klicken, um den Abschnitt der Kontrollkästchen mit der Bezeichnung "Force"-Elementstatus anzuzeigen.

Überprüfen des Textfarbkontrasts im Standardzustand

Zusätzlich zu den automatischen Farbkontrasttests im Tool "Probleme " können Sie auch das Tool "Überprüfen " verwenden, um zu überprüfen, ob einzelne Seitenelemente genügend Kontrast aufweisen. Wenn Kontrastinformationen verfügbar sind, zeigt **** die Inspect-Überlagerung das Kontrastverhältnis und ein Kontrollkästchenelement an.

Ein grünes Häkchensymbol zeigt an, dass genügend Kontrast vorhanden ist, und ein orangefarbenes Warnsymbol zeigt an, dass nicht genügend Kontrast vorhanden ist. Beispielsweise weisen die Links im Navigationsmenü der Randleisten genügend Kontrast auf, wie durch ein grünes Häkchensymbol angegeben:

Die Links im Navigationsmenü der Randleiste weisen einen ausreichenden Kontrast auf, wie in der Überlagerung "Überprüfen" dargestellt.

Ein Element, das nicht über genügend Kontrast verfügt, wird durch eine Warnung in der Inspect-Überlagerung gekennzeichnet. Beispielsweise hat das grüne Listenelement "Hunde " im Abschnitt "Spendenstatus " nicht genügend Kontrast, wie in der Inspect-Überlagerung angegeben. Die Überlagerung zeigt ein orange umkreistes Ausrufezeichen:

Ein Element, das nicht über genügend Kontrast verfügt, wird durch eine Warnung in der Inspect-Überlagerung gekennzeichnet.

Wenn Sie das Inspect-Tool auf diese Weise verwenden, werden Ihre Elemente nicht vollständig getestet. Elemente auf der Seite weisen möglicherweise unterschiedliche Zustände auf, die alle getestet werden müssen. Wenn Sie z. B. mit der Maus auf das Navigationsmenü der Randleiste zeigen, beachten Sie die Animation, die die Farbe der Links ändert:

Das Menüelement mit unterschiedlichen Farben, wenn sich der Mauszeiger darüber befindet.

Überprüfen der Barrierefreiheit aller Zustände von Elementen, z. B. des Kontrasts beim Daraufzeigen

Wenn Sie DevTools verwenden, müssen Sie alle Zustände Ihres Elements simulieren, da das Inspect-Tool nicht gleichzeitig Informationen für alle Zustände anzeigt.

In diesem Beispiel können Sie bei Verwendung des Inspect-Tools den hover Status der Verknüpfung "Katzen " im Navigationsmenü der Randleiste nicht erreichen, um das Kontrastverhältnis in einem hover Zustand zu analysieren, da der hover Zustand in Ihren Formatvorlagen nicht ausgelöst wird. Stattdessen müssen Sie den Status des Cats-Menüelements simulieren, indem Sie die Zustandssimulation auf der Registerkarte " Formatvorlagen " verwenden.

Ausführliche exemplarische Schritte finden Sie unter Überprüfen der Barrierefreiheit aller Zustände von Elementen.

Aktivieren Sie das Inspect-Tool , und klicken Sie dann auf der gerenderten Seite im Navigationsmenü der Randleiste auf den blauen Cats-Link . Das Elementtool wird geöffnet, wobei das a Element in der DOM-Struktur ausgewählt ist. Navigieren Sie bei Bedarf in der DOM-Struktur zu dem Element, das einen hover Status in der CSS-Datei aufweist. In diesem Fall weist das a Element einen hover Zustand auf:

Überprüfen des Elements, das im Elementtool einen Hoverstatus aufweist.

Klicken Sie auf der Registerkarte "Formatvorlagen" auf die Schaltfläche :hov (Elementzustand umschalten). Aktivieren Sie dann mithilfe der Kontrollkästchen " Elementzustand erzwingen " den zu simulierenden Zustand:

Das Zustandssimulationsfeature mit allen Optionen.

Aktivieren Sie das Kontrollkästchen :hover . Neben dem DOM-Element wird nun ein gelber Punkt angezeigt, der angibt, dass das DOM-Element einen simulierten Zustand aufweist. Außerdem ist der Link "Katzen " im Navigationsmenü der Randleiste jetzt auf der Seite hervorgehoben, als würde der Mauszeiger darauf zeigen:

DevTools simuliert einen Hoverzustand.

Nachdem der simulierte Zustand angewendet wurde, können Sie das Inspect-Tool erneut verwenden, um den Kontrast des Elements zu überprüfen, wenn der Benutzer mit der Maus darauf bewegt. In diesem Fall ist der Kontrast nicht hoch genug:

Testen des Kontrasts eines Elements in einem simulierten Hoverzustand.

Die Zustandssimulation ist auch eine gute Möglichkeit, um zu überprüfen, ob Sie unterschiedliche Benutzeranforderungen berücksichtigt haben. Für das Navigationsmenü der Randleiste können Sie feststellen, dass der :focus Zustand ein Kontrastproblem aufweist.

Verwenden des Renderingtools zum Testen der Barrierefreiheit auf Sehbehinderungen

Überprüfen von Kontrastproblemen mit dunklen Designs und hellen Designs

Eine weitere Überlegung bei der Barrierefreiheit von Farben ist, dass es verschiedene Designs geben kann, die Sie auf Kontrastprobleme testen müssen. Die meisten Betriebssysteme verfügen über einen dunklen und einen hellen Modus. Ihre Webseite kann mithilfe von CSS-Medienabfragen auf diese unterschiedlichen Einstellungen reagieren.

Diese Demoseite hat ein helles und ein dunkles Design. Sie können beide Designs testen, ohne ihr Betriebssystem zu ändern, indem Sie die Simulation des dunklen oder hellen Farbschemas im Renderingtool verwenden. Bisher hat sich dieser Artikel die Demoseite mit einem Betriebssystem mit einer dunklen Designeinstellung angesehen. Wenn wir stattdessen ein helles Schema simulieren und dann die Seite aktualisieren, zeigt das Problemtool sechs Farbkontrastprobleme anstelle von zwei an.

Ausführliche Schritte zur exemplarischen Vorgehensweise finden Sie unter "Überprüfen auf Kontrastprobleme mit dunklem Design und hellem Design".

Beim Wechseln zu einem hellen Design im Renderingtool werden die folgenden Probleme gemeldet:

  • Aufgrund der Änderung des hellen Designs werden neue Kontrastprobleme erkannt:

    Neue Kontrastprobleme, die aufgrund der Änderung des hellen Designs erkannt wurden.

  • Der Abschnitt "Spendenstatus" der Seite ist aufgrund von Kontrastproblemen im Lichtmodus unlesbar:

    Die Spendenstatuselemente, die im Lichtmodus als Kontrastprobleme gekennzeichnet sind.

Stellen Sie sicher, dass die Webseite von Personen mit Farbenblindheit verwendet werden kann.

Die verschiedenen Spendenzustände verwenden Farbe (Rot, Grün, Gelb) als einzige Möglichkeit, um zwischen den Finanzierungszuständen zu unterscheiden. Sie können jedoch nicht erwarten, dass alle Ihre Benutzer diese Farben wie beabsichtigt erleben. Wenn Sie das Feature zur Emulation von Sehschwächen von DevTools verwenden, können Sie feststellen, dass dies nicht gut genug ist, indem Sie simulieren, wie Personen mit unterschiedlichen Sehvermögen Ihr Design wahrnehmen würden. Ausführliche exemplarische Schritte finden Sie unter Überprüfen, ob eine Seite von Personen mit Farbenblindheit verwendet werden kann:

Die Seite als jemand mit Protanopie (rote Farbenblindheit) anzuzeigen, würde es sehen.

Stellen Sie sicher, dass die Webseite mit unscharfem Sehen verwendet werden kann.

Ein weiteres interessantes Feature des Renderingtools ist, dass Sie verschwommene Sicht simulieren können. Wenn wir die Option "Verschwommene Sicht " aus der Dropdownliste " Emulieren von Sehschwächen " auswählen, können wir sehen, dass der Schlagschatten des Texts im oberen Menü das Lesen der Menüelemente erschwert. Ausführliche Exemplarische Vorgehensweisen finden Sie unter Überprüfen, ob eine Seite mit unscharfem Sehen verwendet werden kann:

Das Simulieren einer verschwommenen Seite kann Barrierefreiheitsprobleme anzeigen.

Stellen Sie sicher, dass die Seite mit deaktivierter UI-Animation (reduzierte Bewegung) verwendet werden kann.

Eine weitere Einstellung, die Betriebssysteme in diesen Tagen verwenden, ist eine Möglichkeit, Animationen zu deaktivieren. Animationen können der Nutzbarkeit eines Produkts helfen, können aber auch viele Probleme verursachen, von Verwirrung bis Übelkeit. Aus diesem Grund sollten Ihre Produkte Benutzern, die sie im Betriebssystem deaktiviert haben, keine Animationen anzeigen. Mithilfe einer CSS-Medienabfrage können Sie überprüfen, ob der Benutzer Animationen anzeigen möchte, und diese entsprechend deaktivieren. Und ähnlich wie im dunklen und hellen Modus gibt es eine Möglichkeit, die reduzierte Bewegung mitHilfe von DevTools zu simulieren.

Auf der Hier-Demoseite wird durch Deaktivieren von Animationen das reibungslose Scrollen der Seite beendet, wenn Sie auf verschiedene Teile des Navigationsmenüs der Randleiste klicken. Dies wird erreicht, indem die Einstellung für den reibungslosen Bildlauf in CSS in einer Medienabfrage umgebrochen wird:

Simulieren der reduzierten Bewegung und des CSS, die sicherstellen, dass ein reibungsloser Bildlauf nur erfolgt, wenn der Benutzer es möchte.

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

Diese CSS-Medienabfrage führt bedingt die Animation "Smooth Scrolling" aus. Die Animation der oberen Navigationsleiste, des Randleistennavigationsmenüs und weiterer Links wird jedoch weiterhin ausgeführt, auch wenn der Benutzer keine Animationen sehen möchte. Diese anderen Animationen müssen bedingt ausgeführt werden, z. B. durch Hinzufügen zusätzlicher Medienabfragen.

Ausführliche exemplarische Schritte finden Sie unter Überprüfen, ob eine Seite mit deaktivierter UI-Animation verwendet werden kann.

Wie geht es weiter?

Wir haben einige Tools behandelt, die Sie verwenden können, um sicherzustellen, dass Sie Probleme mit der Barrierefreiheit in Ihren Produkten erkennen. Diese Tools reichen von automatisierten Prüfungen und manuellen Detailprüfungen bis hin zur Simulation verschiedener Zustände und Umgebungen. Diese Tools werden in Denkfunktionen für Barrierefreiheitstests zusammengefasst. Automatisierte Tools können nicht alle Probleme in einem Produkt finden, da viele der Barrierefreiheitsbarrieren nur während der interaktiven Verwendung angezeigt werden.

Keines dieser Tools kann eine ordnungsgemäße Testrunde Ihrer Produkte durch Personen ersetzen, die Hilfstechnologien verwenden und einem Plan folgen, um alle erforderlichen Tests zu überprüfen. Sie können auch die Bewertungsfunktion der Barrierefreiheitsfunktion Insights verwenden. Möglicherweise müssen Sie zusätzliche Prüfungen durchführen, z. B.:

  • Testen beim Vergrößern.
  • Testen mit Sprachausgaben.
  • Testen mit Spracherkennung.
  • Testen im Modus mit hohem Kontrast.

Eine weitere Möglichkeit, herauszufinden, was Sie tun müssen, um Ihre Webseite zu verbessern, ist die Verwendung der Webhint-Erweiterung für Visual Studio Code. Diese Erweiterung kennzeichnet die leicht erkennbaren Barrierefreiheitsprobleme in Ihrem Quellcode und gibt Einblicke, wie sie behoben werden können:

Webhint in Visual Studio Code mit einem Barrierefreiheitsproblem, indem das HTML-Element unterstrichen und eine Erläuterung des Problems angezeigt wird.