Ü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 durchgehen die Verwendung verschiedener Features von DevTools, um Barrierefreiheitsprobleme auf einer Demoseite zu erkennen, und wir besprechen, wie sie behoben werden können. Öffnen Sie die Demoseite auf einer neuen Registerkarte, um sie selbst auszuprobieren, und Testen Sie mit.

Die in diesem Artikel verwendete Demoseite mit einigen Barrierefreiheitsproblemen

Automatisierte Tests mithilfe des Tools "Probleme"

Wenn Sie die Demoseite im Browser öffnen und DevTools öffnen, beachten Sie, dass einige Probleme automatisch im Problemzählererkannt werden. Wählen Sie den Problemindikator (  Problemzähler ) aus, 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".

Warnungen zur Barrierefreiheit, die im Tool "Probleme" angezeigt werden

Für ausführliche exemplarische Vorgehensweisen navigieren Sie zum Abschnitt "Barrierefreiheit" des Tools "Probleme".

Automatische Überprüfung, ob Eingabefelder Bezeichnungen 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 den Link "In Elementen öffnen" auswählen, wird das Elementtool 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.

Für detaillierte exemplarische Vorgehensweisen navigieren Sie zu Überprüfen, ob Eingabefelder Beschriftungen aufweisen.

Elementtool, das den problematischen HTML-Code zeigt, nachdem der Link im Tool "Probleme" ausgewählt wurde

In diesem Fall weist der HTML-Code ein label Element auf, das nicht funktioniert.

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

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

Sie können dieses Problem beheben, indem Sie entweder das Element in einem Element verschachteln input label oder ein Attribut hinzufügen, das auf for ein Attribut des Elements id input verweist. Um eine korrekte Verbindung anzuzeigen, wählen Sie die Bezeichnung "Andere" auf dem Formular für die Gabe aus.

Sie können auch die erläuternden Links im Tool "Probleme" auswählen, um diese Informationen abzurufen.

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

Automatische Überprüfung, ob Bilder alternativtext aufweisen

Das andere automatisch erkannte Problem besteht darin, dass viele der Bilder auf der Seite keinen alternativen Text 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 Tool &quot;Probleme&quot;, das Bilder mit fehlendem alternativen Text meldet

Für ausführliche exemplarische Vorgehensweisen navigieren Sie zu Überprüfen, ob Bilder alternativ textaufweisen.

Automatische Überprüfung, ob Textfarben über genügend Kontrast verfügen

Das Tool "Probleme" meldet auch, wenn zwei Elemente auf der Seite nicht über genügend Kontrast verfügen.

Im Tool &quot;Probleme&quot; gemeldete Kontrastprobleme

Das Tool "Probleme" enthält ausführliche Erläuterungen zur Warnung. Wenn Sie einen Drilldown ausführen, erhalten Sie eine Liste der Elemente, die dieses Problem aufweisen. Wenn Sie im Tool "Probleme" einen Link auswählen, der auf ein Element zeigt, wird dieses Element auf der gerenderten Seite hervorgehoben.

Element auf der Seite, das nach der Auswahl des Links hervorgehoben wurde

Für ausführliche exemplarische Vorgehensweisen navigieren Sie zu Überprüfen, ob Textfarben genügend Kontrast aufweisen.

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

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

Indem Sie das Browserfenster eingrenzen und die Pfeiltasten zum Scrollen der Seite verwenden, können Sie sehen, dass die obere Navigationsleiste der Demoseite einige Probleme mit der Barrierefreiheit aufweist. Die obere Navigationsleiste überlappt das Suchformular, wie im vorherigen Bild dargestellt, und dieses Problem muss behoben werden.

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 jeder Website zu finden:

  • Ändern Sie die Größe des Browserfensters nicht, ändern Sie die Größe der Seite, und testen Sie, ob Ihre CSS-Medienabfragen eine Änderung des Layouts auslösen.
  • Suchen Sie nach Abhängigkeiten, die eine Maus verwenden. Standardmäßig wird bei der Geräteemulation von einem Touchgerät ausgegangen. Dies bedeutet, dass alle Funktionen Ihres Produkts, die auf Hoverinteraktion basieren, 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 Barrierefreiheitsüberlegung.

Um mehr über das Geräteemulationstool zu erfahren, navigieren Sie zu Emulieren mobiler Geräte in Microsoft Edge DevTools.

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 mit wellenförmiger Unterstreichung verwenden, wird das Tool "Probleme" geöffnet.

Ein Element, das mit wellenförmiger Unterstreichung in der DOM-Struktur angezeigt wird, hat Probleme.  Umschalt+Klicken 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 Tool "Probleme" und die zugehörigen 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 "Barrierefreiheit" sind Tools, die automatisch einen Barrierefreiheitsbericht für eine Webseite generieren. Das Abrufen eines automatisierten Berichts aus diesen Tools ist nur der Anfang Ihrer Reise zum Testen der Barrierefreiheit.

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

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

  • Probleme, die nach der Interaktion mit der Seite auftreten.
  • Probleme im Zusammenhang mit Änderungen an der Anzeige, z. B. das Eingrenzen des Fensters.

Eines dieser Probleme ist das Schenkungsformular. Wenn Sie eine Maus verwenden, können Sie auf die verschiedenen Optionen klicken, um Geld zu verdienen. Wenn Sie jedoch versuchen, über die Tastatur auf das Gabeformular zuzugreifen, passiert nichts. Um dieses Problem zu lösen, müssen Sie das Inspect-Tool verwenden.

Das Schenkungsformular auf der Demoseite ist hervorgehoben

Verwenden des Inspect-Tools zum Erkennen von Barrierefreiheitsproblemen

Verwenden **** Sie das Inspect-Tool, um Barrierefreiheitsprobleme zu erkennen, indem Sie auf Teile der Webseite zeigen. Das Tool Inspect (  Inspect ) befindet sich in der oberen linken Ecke von DevTools. Aktivieren Sie das Tool "Überprüfen", indem Sie die Schaltfläche "Tool überprüfen" auswählen.

Aktivieren Sie das Tool &quot;Überprüfen&quot;, indem Sie auf die Schaltfläche &quot;Tool überprüfen&quot; klicken.

Nachdem Sie die Schaltfläche des Tools Inspect ausgewählt haben, können Sie den Zeiger über ein beliebiges Element auf der gerenderten Seite bewegen. Das Tool Inspect zeigt das Layout des Elements als mehrfarbige Flexboxüberlagerung und Elementdetails als Informationsüberlagerung ähnlich einer QuickInfo an.

Mehrfarbige Flexboxüberlagerung und Informationsüberlagerung bei Verwendung des Inspect-Tools

Der Abschnitt "Barrierefreiheit" des Tools "Inspect" enthält ggf. eine Kontrastlinie.

Der Abschnitt &quot;Barrierefreiheit&quot; des Tools &quot;Inspect&quot; enthält ggf. eine Kontrastlinie.

Für ausführliche exemplarische Vorgehensweisen navigieren Sie zur Identifizierung geschachtelter Regionen mithilfe der Farbhervorhebung.

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

  • Layouttyp; wenn das Element mit einem Flexbox- oder Raster positioniert wird, wird ein entsprechendes Symbol (Rasterlayoutsymbol).
  • Der Name des Elements, z. B. ein, h1oder div.
  • Die Abmessungen des Elements in Pixel.
  • Die Farbe als Farbmuster (kleines, farbiges Quadrat) und als formatierter Wert (z. B. #336699 ).
  • Schriftinformationen (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 Inspect-Überlagerung enthält die folgenden Zeilen:

  • Der Kontrast definiert, ob ein Element von Personen mit eingeschränkter Sehkraft 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 zeigt an, dass genügend Kontrast vorhanden ist, und ein orangefarbenes Ausrufezeichensymbol zeigt an, dass nicht genügend Kontrast vorhanden ist.
  • Name und Rolle geben an, welche Information assistive technology, z. B. Bildschirmleseprogramme, ü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 "Über uns".
    • Die Rolle des Elements. Die Rolle ist in der Regel der Elementname, z. article B. , oder img link heading . The div and elements are represented as span generic .
  • Tastaturfokussierbar gibt an, ob Benutzer das Element mit anderen Eingabegeräten als einer Maus erreichen können.

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

Für ausführliche exemplarische Vorgehensweisen navigieren Sie zu Check individual elements for text contrast, screen reader text, and keyboard support.

Verwenden des Inspect-Tools zum Bewegen des Mauszeigers über die Webseite, um das DOM und CSS hervorzuheben

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

Details zum ausgewählten Element, das im Elementtool angezeigt wird

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

Für ausführliche exemplarische Vorgehensweisen navigieren Sie zum Verwenden des Inspect-Tools, um mit dem Mauszeiger über die Webseite zu zeigen, um DOM und CSS hervorzuheben.

Überprüfen der Tastaturunterstützung mithilfe der Tabulator- und Eingabetasten

Nicht alle Personen verwenden Zeiger- oder Touchgeräte, und einige Personen haben möglicherweise eine sehschwächeren Blick. Um diese Szenarien zu unterstützen, stellen Sie sicher, dass Benutzeroberflächen mit Tastaturen funktionieren.

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

Für ausführliche exemplarische Vorgehensweisen navigieren Sie mithilfe der Tab- und Eingabetasten zu "Überprüfen auf Tastaturunterstützung".

Wenn Sie Tab stattdessen Enter drücken, ist das nächste Element, das den Fokus erhält, der erste Link "Mehr" im Inhaltsbereich der Seite, wie durch eine Gliederung angegeben.

Navigieren auf der Seite mithilfe der Tabulatortaste.  Der Fokus wird auf einem Link &quot;Mehr&quot; auf der Seite angezeigt.

Nachdem Sie den letzten Link "Mehr" eingefügt haben, wird der Bildlauf nach oben ausgeführt, und es ist unklar, welches Element den Fokus hat.

Wenn Sie links unten auf dem Bildschirm suchen oder eine Sprachausgabe verwenden, können Sie feststellen, dass der blaue Katzenlink im Navigationsmenü der Seitenleiste den Fokus hat, da der Browser die URL #cats anzeigt.

Eine fehlende Fokusformatierung macht es unmöglich, zu wissen, wo Sie sich derzeit auf der Seite befinden.  Der einzige Hinweis ist die Anzeige des Linkziels in der unteren linken Ecke des Fensters.

Wenn Tab Sie erneut auswählen, gelangen Sie in das Eingabetextfeld des Gabeformulars. Sie können jedoch nicht die Schaltflächen 50, 100 oder 200 über dem Eingabetextfeld erreichen. Wenn der Fokus auf diesem Eingabetextfeld liegt, sendet die Auswahl Enter das Formular nicht.

Das einzige Element, auf das über die Tastatur zugegriffen werden kann, im Gabeformular ist das Eingabetextfeld.

Wenn Sie Tab erneut auswählen, wird der Fokus auf der oberen Navigationsleiste platziert, in der Sie Enter zu einem anderen Abschnitt der Seite oder zu einer anderen Seite der Website wechseln können. Sie wissen, auf welchem Element Sie sich befinden, da es eine Fokusgliederung gibt. Um einen Link in der oberen Navigationsleiste auszuwählen, verwenden Tab Oder setzen Sie den Fokus auf einen Shift+Tab Link, und wählen Sie dann Enter aus.

Die obere Navigationsleiste weist eine Hervorhebung und eine Fokusgliederung auf und ist daher über die Tastatur zugänglich.

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

  • Das Navigationsmenü auf der Seitenleiste zeigt benutzern nicht an, wo der Tab Fokus liegt, wenn sie Tastaturen verwenden, um sich auf der Seite zu bewegen.
  • Auf dem Schenkungsformular funktionieren die Schaltflächen **50, 100, ** und 200 sowie die Funktion zum Übermitteln des Formulars bei Verwendung der Tastatur nicht.
  • Die Aktivierreihenfolge der Tastatur ist falsch. Die Tab Taste navigiert durch alle "Mehr"-Links auf der Seite vor dem Navigationsmenü in der Seitenleiste. Diese Tab Reihenfolge ist nicht hilfreich, da sie mit der Seitenleistennavigation zu den verschiedenen Abschnitten dieser Seite führen soll.

Lassen Sie uns diese Probleme mit DevTools analysieren.

Analysieren von Problemen bei der Barrierefreiheit von Tastaturen mit DevTools

Analysieren der fehlenden Anzeige des Tastaturfokus im Randleistenmenü

Um herauszufinden, warum die Seitenleistennavigation nicht wie erwartet für die Verwendung mit Tastaturen optimiert ist, verwenden Sie zunächst das Tool Inspect, um einen Link im Navigationsmenü der Seitenleiste hervorzuheben, und führen Sie dann einen Drilldown in der DOM-Struktur zum a Element durch.

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

Auf der Registerkarte "Formatvorlagen" können Sie das CSS sehen, das auf den Link angewendet wird, und wenn Sie den Link styles.css auswählen, wird die Datei im Tool "Quellen" geöffnet.

Die Formatvorlagen, die auf die Verknüpfung angewendet werden, die im Tool &quot;Quellen&quot; angezeigt werden

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

Außerdem verwenden die Links in diesem Beispiel outline: none . Dieser Stil 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 Sie nicht outline: none .

Für ausführliche exemplarische Vorgehensweisen navigieren Sie zu Analysieren der fehlenden Anzeige des Tastaturfokus in einem Randleistenmenü.

Analysieren der fehlenden Tastaturunterstützung im Gabeformular

Die Schaltflächen auf dem Schenkungsformular 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 Schenkungsformulars zeigen. Das Ergebnis ist, dass keine davon über die Tastatur zugänglich ist, wie durch den grauen Ring auf der tastaturfokussierbaren Zeile der Informationsüberlagerung angegeben. Wie in den Zeilen "Name" und "Rolle" der Informationsüberlagerung gezeigt, haben die Schaltflächen des Schenkungsformulars auch keinen Namen und eine Rolle generic von (Darstellen oder div span Elemente), was bedeutet, dass sie für Hilfstechnologien nicht zugänglich sind.

Die Überprüfung der Schaltflächen des Formulars zeigt, dass auf sie nicht über die Tastatur zugegriffen werden kann.

Ausführliche Exemplarische Vorgehensweisen finden Sie unter Analysieren der fehlenden Tastaturunterstützung in einem Formular.

Wenn Sie auf die Schaltfläche "Überprüfen" 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 der label input Elemente ist gültig, was dazu führt, dass die Bezeichnung wie beabsichtigt funktioniert und auf das Textfeld über die input Tastatur zugegriffen werden kann. Der Rest des Formulars verwendet div Elemente, die einfach zu formatieren sind, aber keine semantische Bedeutung haben.

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

Registerkarte &quot;Ereignislistener&quot; mit einem Link zum JavaScript für das Formular

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

Das JavaScript, das für die Funktionalität des Schenkungsformulars verantwortlich ist, das im Tool &quot;Quellen&quot; angezeigt wird

Die Verwendung von click Ereignissen mit Schaltflächen wird empfohlen, da click Ereignisse sowohl mit Mauszeigern als auch mit Tastaturen funktionieren. Da auf ein div Element jedoch nicht über die Tastatur zugegriffen werden kann und die Schaltfläche Abwendung als Element implementiert div ist, wird dieser JavaScript-Code nur ausgeführt, wenn eine Maus verwendet wird.

Die Verwendung div von "as a button" ist ein klassisches Beispiel, bei dem zusätzliches JavaScript erforderlich ist, um Funktionen zu erstellen, 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

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

Schaltfläche &quot;Schenkungsformular&quot; in der Barrierefreiheitsstruktur

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

Navigieren Sie für ausführliche exemplarische Vorgehensweisen zur Überprüfung der Barrierefreiheitsstruktur für die Unterstützung von Tastatur und Sprachausgabe.

Analysieren der Reihenfolge des Tastaturzugriffs auf Abschnitte der Seite

Ein weiteres Problem ist die unklare Aktivierreihenfolge auf der Seite. Tastaturbenutzer erreichen das Navigationsmenü in der Seitenleiste erst, nachdem sie alle "Mehr"-Links auf der gesamten Seite durchlaufen haben. In diesem Beispiel soll das Navigationsmenü auf der Seitenleiste eine Verknüpfung mit 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 Attributs für ein Element geändert tabindex werden, das dieses Element aus der Standardquellreihenfolge herausnimmt.

Im Quellcode des Dokuments wird das Seitennavigationsmenü hinter dem Hauptinhalt der Seite angezeigt. Das Navigationsmenü der Seitenleiste wird nur oberhalb des Hauptinhalts der Seite angezeigt, da das Navigationsmenü der Seitenleiste mitHILFE von CSS positioniert wurde.

Die Quellreihenfolge eines Dokuments ist für die Hilfstechnologie wichtig und kann sich von der Reihenfolge unterscheiden, in der Elemente auf der gerenderten Seite angezeigt werden. MitHILFE von CSS können Sie Seitenelemente auf visuelle Weise neu anordnen, was jedoch nicht bedeutet, dass Hilfstechnologien wie Sprachausgabe Seitenelemente in der gleichen Reihenfolge wie diese CSS darstellen.

Sie können die Reihenfolge der Seitenelemente mithilfe der Quellreihenfolgeanzeige auf der Barrierefreiheitsregisterkarte 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. beim Auswählen des header Elements, werden numerische Überlagerungen in Abschnitten der gerenderten Seite angezeigt, die die Quellreihenfolge darstellen.

Durch Aktivieren des Viewers für die Quellreihenfolge wird die Reihenfolge der Elemente im Quellcode als numerische Überlagerungen auf der Seite angezeigt.

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

Testen des Kontrasts von Textfarben in verschiedenen Zuständen

Das Tool Inspect meldet Barrierefreiheitsprobleme für jeweils einen Status. Zunächst beschreiben wir die Einschränkung der Verwendung des Inspect-Tools, um nur den statischen Zustand eines Seitenelements anzuzeigen. Anschließend wird erläutert, wie andere Zustände eines Seitenelements überprüft werden, indem auf der Registerkarte "Formatvorlagen" die Option :hov (Toggle Element State) ausgewählt wird.

Überprüfen des Textfarbkontrasts im Standardzustand

Zusätzlich zu den automatischen Farbkontrasttests im Tool "Probleme" können Sie auch das Tool Inspect verwenden, um zu überprüfen, ob einzelne Seitenelemente über genügend Kontrast verfügen. 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 gelbes Warnsymbol zeigt an, dass nicht genügend Kontrast vorhanden ist.

Beispielsweise haben die Links im Navigationsmenü der Seitenleiste genügend Kontrast, das grüne Listenelement "Hunde" im Abschnitt "Schenkungsstatus" jedoch nicht. Ein Element, das nicht über genügend Kontrast verfügt, **** wird durch eine Warnung in der Inspect-Überlagerung gekennzeichnet.

Die Verwendung des Inspect-Tools auf diese Weise testet Ihre Elemente nicht vollständig. Elemente auf der Seite können unterschiedliche Zustände aufweisen, die alle getestet werden müssen. Wenn Sie z. B. mit der Maus auf das Navigationsmenü in der Seitenleiste 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 Daraufzeigern

Bei Verwendung der DevTools müssen Sie alle Zustände Ihres Elements simulieren, da das Tool Inspect nicht gleichzeitig Informationen für alle Zustände anzeigt. In diesem Beispiel können Sie bei Verwendung des Inspect-Tools den hover Status des Katzenlinks im Navigationsmenü der Seitenleiste nicht erreichen, um das Kontrastverhältnis in einem Zustand zu **** hover analysieren, da der Status in Ihren hover Formatvorlagen nicht ausgelöst wird. Stattdessen müssen Sie den Status des Menüelements "Katzen" mithilfe der Zustandssimulation auf der Registerkarte "Formatvorlagen" simulieren.

Für ausführliche exemplarische Vorgehensweisen navigieren Sie zu Überprüfen der Barrierefreiheit aller Zustände von Elementen.

Aktivieren Sie das Tool Inspect, und wählen Sie dann auf der gerenderten Seite den blauen Katzenlink im Navigationsmenü der Seitenleiste aus. 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 im CSS aufweist. In diesem Fall weist das a Element einen hover Status auf.

Überprüfen des Elements mit einem Hoverstatus im Elementtool

Wählen Sie auf der Registerkarte "Formatvorlagen" die Schaltfläche :hov (Toggle Element State) aus. Verwenden Sie dann die Kontrollkästchen zum Erzwingen des Elementstatus, um auszuwählen, welcher Zustand simuliert werden soll.

Das Statussimulationsfeature 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 wird der Katzenlink im Navigationsmenü der Seitenleiste jetzt auf der Seite hervorgehoben, als würde der Mauszeiger darauf zeigen.

DevTools simulieren einen Hoverzustand

Nachdem der simulierte Zustand angewendet wurde, können Sie das Tool Inspect erneut verwenden, um den Kontrast des Elements zu überprüfen, wenn der Benutzer mit dem Mauszeiger darauf zeigt. 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. Im Navigationsmenü der Seitenleiste können Sie feststellen, dass der :focus Zustand ein Kontrastproblem aufweist.

Verwenden des Renderingtools zum Testen der Barrierefreiheit für Sehschwächen

Überprüfen von Kontrastproblemen mit dunklem Design und hellen Designs

Eine weitere Überlegung in Bezug auf die Barrierefreiheit von Farben besteht darin, dass es möglicherweise unterschiedliche Designs gibt, 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 dunkles Design. Sie können beide Designs testen, ohne das Betriebssystem zu ändern, indem Sie im Rendering-Tool die Simulation des dunklen oder hellen Farbschemas verwenden. Bisher wurde in diesem Artikel die Demoseite mit einem Betriebssystem mit einer dunklen Designeinstellung betrachtet. Wenn wir stattdessen ein Lichtschema simulieren und dann die Seite aktualisieren, zeigt das Tool Probleme sechs Farbkontrastprobleme anstelle von zwei an.

Für ausführliche exemplarische Vorgehensweisen navigieren Sie zu "Auf Kontrastprobleme mit dunklem Design und hellem Designprüfen".

Beachten Sie beim Wechsel zu einem hellen Design im Renderingtool die folgenden Elemente.

  • Neue Kontrastprobleme werden aufgrund der Änderung des hellen Designs erkannt.
  • Der gesamte Abschnitt "Schenkungsstatus" der Seite kann im Lichtmodus nicht gelesen werden.

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

Die verschiedenen Schenkungszustände verwenden Farbe (Rot, Grün, Gelb) als einzige Methode, um zwischen den Zuständen der Bereitstellung zu unterscheiden. Sie können jedoch nicht erwarten, dass alle Ihre Benutzer diese Farben wie beabsichtigt sehen. Wenn Sie die Emulationsfunktion für Sehschwächen von DevTools verwenden, können Sie feststellen, dass dies nicht gut genug ist, indem Sie simulieren, wie Personen mit einer anderen Vision Ihr Design wahrnehmen würden. Für ausführliche exemplarische Vorgehensweisen navigieren Sie zu Überprüfen, ob die Seite von Personen mit Farbenblindheit verwendet werden kann.

Das Anzeigen der Seite als Person mit Protanopie (roter Farbenblindheit) würde sie sehen.

Überprüfen, ob die Webseite mit verschwommener Sehkraft verwendet werden kann

Ein weiteres interessantes Feature des Renderingtools ist, dass Sie verschwommenes Sehen simulieren können. Wenn wir die Option "Verschwommenes Sehen" aus der Dropdownliste "Sehschwächen emulieren" auswählen, können wir sehen, dass der Schlagschatten im Text im oberen Menü das Lesen der Menüelemente erschwert. Für ausführliche exemplarische Vorgehensweisen navigieren Sie zu Überprüfen, ob die Seite mit verschwommener Vision verwendet werden kann.

Das Simulieren einer verschwommenen Seite kann Barrierefreiheitsprobleme aufdecken.

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

Eine weitere Einstellung, die in diesen Tagen für Betriebssysteme verfügbar ist, ist eine Möglichkeit, Animationen zu deaktivieren. Animationen können zur Benutzerfreundlichkeit eines Produkts beitragen, können aber auch viele Probleme verursachen, von Verwirrung bis hin zu Verwirrung. 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, reduzierte Bewegungen mit DevToolszu simulieren.

Auf der Demoseite hier verhindert das Deaktivieren von Animationen den reibungslosen Bildlauf der Seite, wenn Sie verschiedene Teile des Navigationsmenüs auf der Seitenleiste auswählen. Dies wird erreicht, indem die Einstellung für den reibungslosen Bildlauf in CSS in einer Medienabfrage umgebrochen wird:

Simulieren von reduzierter Bewegung und css, die sicherstellen, dass ein gleichmäßiger Bildlauf nur erfolgt, wenn der Benutzer dies möchte

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

Diese CSS-Medienabfrage führt die Animation für einen gleichmäßigen Bildlauf bedingt aus. Die Animation der oberen Navigationsleiste, des Seitenleisten-Navigationsmenü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.

Für detaillierte exemplarische Vorgehensweisen navigieren Sie zu Überprüfen, ob die Seite mit deaktivierter BENUTZERoberflächenanimation verwendet werden kann.

Wie geht es weiter?

Wir haben einige Tools behandelt, mit denen Sie sicherstellen können, dass Sie Barrierefreiheitsprobleme in Ihren Produkten abfangen. Diese Tools reichen von automatisierten Prüfungen und manuellen Detailprüfungen bis hin zur Simulation verschiedener Zustände und Umgebungen. Diese Tools werden in Features zum Testen der Barrierefreiheit in DevToolszusammengefasst. Automatisierte Tools können nicht alle Probleme in einem Produkt finden, da viele der Barrierefreiheitsbarrieren nur bei der interaktiven Verwendung auftreten.

Keines dieser Tools kann eine ordnungsgemäße Testphase Ihrer Produkte durch Personen ersetzen, die Hilfstechnologien verwenden, und einen Plan befolgen, um alle erforderlichen Tests zu überprüfen. Sie können auch das Bewertungsfeature der Barrierefreiheit Insightsverwenden. Möglicherweise müssen Sie zusätzliche Prüfungen durchführen, z. B.:

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

Eine weitere Möglichkeit, herauszufinden, was Sie tun müssen, um Ihr Webprodukt zu verbessern, besteht darin, die Webhint-Erweiterung für Visual Studio Codezu verwenden. Diese Erweiterung kennzeichnet die leicht erkennbaren Barrierefreiheitsprobleme in Ihrem Quellcode und gibt Einblicke, wie sie behoben werden können.

Webhint in Visual Studio Code, zeigt ein Problem mit der Barrierefreiheit an, indem das HTML-Element und eine Erläuterung des Problems erläutert werden