Schnelle Barrierefreiheitstests in Firefox

Von Annett Farnetani, veröffentlicht am 15.11.2020

Farbkontrast

  1. Webseite in Firefox aufrufen.
  2. Mit der Taste “F12” die Developer Tools in Firefox öffnen.
    Es öffnet sich ein Fenster.
  3. Den Reiter "Barrierefreiheit" auswählen.
    Sollte der Reiter nicht angezeigt werden. Klicken Sie in den Developer-Tools ganz rechts auf das Icon mit den drei Punkten (Entwicklerwerkzeuge anpassen und Hilfe erhalten). Gehen Sie dann auf "Einstellungen".  Aktivieren Sie unter "Standard-Entwicklerwerkzeuge" die Checkbox "Barrierefreiheit".
  4. Der Reiter Barrierefreiheit ist ausgewählt. 
    In der oberen Leiste des Fensters links auf das Icon "Wählen Sie ein barrierefreies Objekt der Seite aus" (Figur in einem Quadrat) klicken.
  5. Mit der Maus anschließend auf den zu prüfenden Text fahren (wird hervorgehoben). Es erscheint es Tooltip mit  den Kontrastinformationen.
    Sie können den zu prüfenden Text anklicken. Die Kontrastangabe erscheint ebenfalls in den Developer-Tools.

Screenshot einer Website mit offenen Developer Tools. Ein schwarzer Text auf weißem Hintergrund ist markiert. Der Tooltip zeigt den Kontrast (12.63 AA). Markiert ist die Reihenfolge: 1 Reiter Barrierefreiheit, 2 Icon Auswahl, 3 Tooltip und Hinweis im den Developer Tools.

Alternativtext

  1. Webseite mit dem Bild, das Sie prüfen wollen, in Firefox aufrufen.
  2. Mit der Taste “F12” die Developer Tools im Firefox-Browser öffnen.
    Es öffnet sich ein Fenster.
  3. In der oberen Leiste des Fensters links auf das Icon "Element der Seite auswählen" (Pfeil der auf ein Quadrat zeigt) klicken.
  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 einer Webseite. Ein Bild ist umrandet und ein Pfeil zeigt auf den Alternativtext in den Developer Tools.

Überschriftenstruktur

  1. Rufen Sie folgenden Link auf: http://pauljadam.com/bookmarklets.
  2. Suchen Sie in der Tabelle in der rechten Spalte den Begriff  “Headings”.
  3. Gehen Sie mit der Maustaste über “Headings”, halten Sie die Taste gedrückt und ziehen sie den Link in die Lesezeichen. Lassen Sie anschließend die Maustaste los.
  4. Webseite, die Sie prüfen wollen, in Firefox aufrufen.
  5. Auf “Headings” in den Lesezeichen drücken. 
    Um die Markierung zu entfernen, laden Sie die Seite neu.

Alternative:

Browsererweiterung "HeadingsMap" für Firefox

Tastatursteuerung

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

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 Firefox aufrufen.
  2. Drücke Sie mehrfach die Tastenkombination Strg + “+”.
    Oben im Browser wird der Vergrößerungsfaktor angezeigt.

Testen Sie:

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

Automatisierter Test

axe-core von deque als Firefox-Plugin: github.com/dequelabs/axe-core

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