Schnelle Barrierefreiheitstests mit Developer Tools in Microsoft Edge

Von Annett Farnetani, veröffentlicht am 21.01.2022

Farbkontrast

  1. Webseite, die Sie prüfen wollen, in Microsoft Edge aufrufen.
  2. Mit der Taste “F12” Developer Tools öffnen.
    Alternative: Rechte Maustaste drücken. Ganz unten im Menü "Untersuchen" auswählen.
  3. Es öffnet sich ein Fenster. Klicken Sie dort auf den Reiter “Elemente” und dann links auf das Icon mit dem Viereck und dem Pfeil.
  4. Mit der Maus über das Element fahren, dessen Kontrast sie prüfen wollen (wird hervorgehoben).
  5. Im sich nun öffnenden Kontextmenü finden Sie unter “Contrast” die Angabe.

Screenshot vom Kontextmenü. Ein Pfeil zeigt auf die Kontrastangabe.

Alternativtext

  1. Webseite, die Sie prüfen wollen, in Microsoft Edge aufrufen.
  2. Mit der Taste “F12” Developer Tools öffnen.
    Alternative: Rechte Maustaste drücken. Ganz unten im Menü "Untersuchen" auswählen.
  3. Es öffnet sich ein Fenster. Klicken Sie dort auf den Reiter “Elemente” und dann links auf das Icon mit dem Viereck und dem Pfeil.
  4. Mit der Maus anschließend auf das Bild klicken (wird hervorgehoben).
  5. Unten im Fenster (Developer Tools) in der hervorgehobenen Stelle nach alt=”...” suchen. 
    Zwischen den Anführungsstrichen finden Sie, wenn vorhanden, den Alternativtext.

Screenshot von den geöffneten Developer Tools. Ein Pfeil zeigt auf das Alt-Attribut.

Überschriftenstruktur

  1. Webseite, die Sie prüfen wollen, in Microsoft Edge aufrufen.
  2. Mit der Taste “F12” Developer Tools öffnen.
    Alternative: Rechte Maustaste drücken. Ganz unten im Menü "Untersuchen" auswählen.
  3. Es öffnet sich ein Fenster. Klicken Sie dort auf den Reiter “Elemente” und dann auf das Icon mit dem Viereck und dem Pfeil.
  4. Mit der Maus über die Überschrift fahren. Die Überschrift wird hervorgehoben.
  5. Im sich nun öffnenden Kontextmenü finden Sie oben die Angabe zum Überschriftenlevel.

Screenshot von einer markierten Überschrift mit Kontextmenü.

Alternative: HeadingsMap 

  1.  Microsoft Edge-Add-On installieren: HeadingsMap – Microsoft Edge Addons
  2. Webseite, die geprüft werden soll, aufrufen.
  3. Oben rechts auf das Icon für HeadingsMap klicken.
  4. Links erscheint ein neues Fenster mit der Überschriftenhierarchie der Seite.

Screenshot von einer Webseite auf der HeadinsgMap angewendet wird. Oben recht ist das Icon markiert. Ein Pfeil zeigt auf die Überschriftenstruktur.

Tastatursteuerung

Navigieren sie mit Tabulator-, Enter-, Space- und Pfeiltasten durch die interaktiven Elemente der Website.

Foto einer Tastatur. Markiert ist die Tabulator-Taste.

Testen Sie:

  • ob Sie alle interaktiven Elemente in einer logischen Reihenfolge erreichen.
  • ob Sie alle interaktiven Elemente auslösen können.
  • ob der Fokus (= visuelle Kennzeichnung des interaktiven Elements) sichtbar ist.

Vergrößerung des Layouts auf 400%

  1. Webseite, die Sie prüfen wollen, in Microsoft Edge aufrufen.
  2. Rechts oben im Browser auf das Icon mit den 3 Punkten klicken.
    Im Feld “Zoomen” auf “+” drücken bis die Zahl auf 400% steht.
  3. Für Standardgröße Zahl mit “-” auf 100% stellen.

Screenshort des Einstellungsmenüs in Microsoft Edge.

Testen Sie:

  • ob alle Inhalte weiterhin lesbar sind.
  • ob die Seite navigierbar ist.

Automatisierter Test (Lighthouse Audit)

  1. Webseite, die Sie prüfen wollen, in Microsoft Edge aufrufen.
  2. Mit der Taste “F12” Developer Tools öffnen.
    Alternative: Rechte Maustaste drücken. Ganz unten im Menü "Untersuchen" auswählen.
  3. Auf den Reiter “Lighthouse” gehen.
  4. Unter “Kategorien” die Checkbox “Barrierefreiheit” anklicken
  5. Test starten: Klicken Sie auf den Button “Bericht erstelle”.

Screenshot der Developer Tools in Microsoft Edge.

mindscreen ist spezialisiert auf digitale Barrierefreiheit

Sie wollen wissen, wie barrierefrei Ihre Website oder Web-Applikation ist? Benötigen Hilfe bei den Vorgaben der BITV? Oder Sie benötigen eine Digitalagentur mit langjähriger Erfahrung in der Umsetzung und Begleitung barrierefreier Webprojekte?

Wir bieten Fullservice zum Thema digitale Barrierefreiheit an:
Beratung, Schulungen, Workshops, Audits, Tests, Unterstützung & Umsetzung.

Erfahren Sie mehr über unsere Dienstleistungen zu digitaler Barrierefreiheit.

Schreiben Sie eine Mail oder rufen Sie an!

Ansprechpartner:in

Annett Farnetani
Telefon: 089-41 61 47 823
Mail: annett.farnetani@mindscreen.de