Automatisches Testen einer Webseite auf Barrierefreiheitsprobleme

Artikel
03/29/2023

Das Tool Probleme enthält einen Abschnitt Barrierefreiheit , in dem Probleme wie fehlender alternativer Text auf Bildern, fehlende Bezeichnungen in Formularfeldern und unzureichender Kontrast der Textfarben automatisch gemeldet werden. Das Tool Probleme befindet sich im Drawer am unteren Rand von DevTools. In diesem Artikel wird die Webseite zum Testen der Barrierefreiheit verwendet, um den Abschnitt "Barrierefreiheit" des Tools "Probleme" zu verwenden.

Es gibt mehrere Möglichkeiten, das Problemtool zu öffnen, z. B.:

Klicken Sie in der oberen rechten Ecke von DevTools auf den Leistungsindikator Issues ().
Drücken Sie im Tool Elemente in der DOM-Struktur umschalten , während Sie auf eine wellenförmige Unterstreichung eines Elements klicken.
Geben Sie im Befehlsmenüissues ein, wählen Sie Probleme anzeigen aus, und drücken Sie dann die EINGABETASTE.

Anzeigen des Abschnitts "Barrierefreiheit" des Tools "Probleme"

Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.
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.

In der oberen rechten Ecke wird der Problemindikator () angezeigt. Der Problemzähler ist ein Sprachblasensymbol zusammen mit der Anzahl automatisch erkannter Probleme.
Aktualisieren Sie die Seite, da einige Probleme basierend auf Netzwerkanforderungen gemeldet werden. Beachten Sie die aktualisierte Anzahl im Leistungsindikator Probleme.
Klicken Sie auf den Leistungsindikator Probleme. Das Tool Probleme wird in der Drawer am unteren Rand von DevTools geöffnet.
Erweitern Sie auf der Registerkarte Probleme den Abschnitt Barrierefreiheit .

Überprüfen, ob Eingabefelder Bezeichnungen aufweisen

Um zu überprüfen, ob Mit Eingabefeldern Bezeichnungen verbunden sind, verwenden Sie das Tool Probleme , das automatisch die gesamte Webseite überprüft und dieses Problem im Abschnitt Barrierefreiheit meldet.

Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.
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.
Klicken Sie oben rechts auf den Leistungsindikator Issues (). Das Tool Probleme wird in der Drawer am unteren Rand von DevTools geöffnet.
Erweitern Sie auf der Registerkarte Probleme den Abschnitt Barrierefreiheit .
Erweitern Sie die WarnungForm elements must have labels: Element has no title attribute Element has no placeholder attribute.
Klicken Sie auf den Link In Elementen öffnen .

Das Tool Elemente wird geöffnet, wobei das -Element in der DOM-Struktur hervorgehoben ist. Im Bereich Formatvorlagen werden die angewendeten CSS-Regeln für das Element angezeigt.

Der folgende Code wird jetzt angezeigt:
```
<label>Search</label>
<input type="search">
<input type="submit" value="go">
```
Im obigen Code wird das label Element falsch verwendet, da keine Verbindung zwischen dem label Element und einem bestimmten input Element besteht. Verwenden Sie eine der folgenden Optionen, um das label Element mit einem bestimmten input Element zu verbinden:
- Schachteln Sie das input Element innerhalb des label Elements.
- Fügen Sie im label -Element ein for Attribut hinzu, das mit einem id Attribut des input -Elements übereinstimmt.

Es gibt auch eine andere Möglichkeit, auf fehlende Verbindungen zwischen Elementen zu testen:

Wählen Sie im Tool Elemente das <label>Search</label> Element in der DOM-Struktur aus.

Beachten Sie auf der Webseite, dass der Fokus nur auf der Bezeichnung Suchen und nicht auf dem Eingabetextfeld angezeigt wird. Die richtige Implementierung würde den Fokus auf das search Eingabetextfeld und die Suchbezeichnung setzen.
Wählen Sie als Beispiel für eine korrekte Verbindung die Bezeichnung Sonstige auf dem Spendenformular aus.

Ein Fokusindikatorfeld wird ordnungsgemäß im Eingabetextfeld neben der Bezeichnung Sonstige angezeigt, da übereinstimmende for und id Attributwerte vorhanden sind.
Klicken Sie im Tool Probleme auf Weitere Informationen , um mehr über das Problem zu erfahren. Um den Link auf einer neuen Registerkarte zu öffnen, drücken Sie STRG (Windows, Linux) oder Befehl (macOS), während Sie auf den Link klicken:

Überprüfen, ob Bilder Alternativtext enthalten

Grundlegende Barrierefreiheitstests müssen sicherstellen, dass alternativer Text (auch Alternativtext genannt) für Bilder bereitgestellt wird.

Um automatisch zu überprüfen, ob Alternativtext für Bilder bereitgestellt wird, verwenden Sie das Tool Probleme , das über einen Abschnitt Barrierefreiheit verfügt. Das Tool Probleme befindet sich im Drawer am unteren Rand von DevTools.

Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.
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.
Klicken Sie in der oberen rechten Ecke von DevTools auf den Leistungsindikator Probleme . Das Tool Probleme wird geöffnet.
Erweitern Sie auf der Registerkarte Probleme die Warnung Images must have alternate text: Element has no title attribute. Es gibt vier Instanzen von Bildern ohne Alternativtext:

Weitere Informationen finden Sie unter Images must have alternate text .See Images must have alternate text( Images must have alternate text

Vergewissern Sie sich, dass textfarben genügend Kontrast aufweisen.

Um automatisch zu überprüfen, ob Textfarben genügend Kontrast aufweisen, verwenden Sie das Tool Probleme , das über einen Abschnitt Barrierefreiheit verfügt. Das Tool Probleme befindet sich im Drawer am unteren Rand von DevTools.

Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.
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.
Klicken Sie in der oberen rechten Ecke von DevTools auf den Leistungsindikator Probleme . Das Tool Probleme wird geöffnet.

Möglicherweise gibt es Warnungen, dass zwei Elemente auf der Demowebseite nicht genügend Kontrast haben.
Abhängig von Ihren Einstellungen enthält die Registerkarte Probleme möglicherweise eine Warnung wie Benutzer haben möglicherweise Probleme beim Lesen von Textinhalten aufgrund eines unzureichenden Farbkontrasts. Sie können diese Warnung erweitern und dann Betroffene Ressourcen erweitern. Eine Liste von Elementen wird mit einer Liste von Elementen angezeigt, die nicht genügend Kontrast aufweisen.
Klicken Sie auf das li.high -Element. Auf der gerenderten Webseite ist der Link Hunde im Abschnitt Spenden hervorgehoben und zeigt eine kleine Informationsüberlagerung an. Dies ist die gleiche Überlagerung, die angezeigt wird, wenn Sie im Tool Elemente auf ein Element in der DOM-Struktur zeigen.

Wellenförmige Unterstreichungen in der DOM-Struktur zeigen automatisch erkannte Probleme an

Die DOM-Struktur im Tool Elemente kennzeichnet Probleme direkt im HTML-Code mit wellenförmigen Unterstreichungen. Diese Probleme werden vom Problemtool gemeldet. Wenn Sie umschalten und auf ein Element mit einer wellenförmigen Unterstreichung klicken, wird das Tool Probleme geöffnet.

Drücken Sie im Tool Elemente in der DOM-Struktur die UMSCHALTTASTE , während Sie auf das Element <input type="search">klicken, das eine wellenförmige Linie unter inputaufweist. Das Tool Probleme wird angezeigt und zeigt das Problem für dieses Element an.

Siehe auch

Suchen und Beheben von Problemen mit dem Tool "Probleme"

Freigeben über