Zum Inhalt springen
Pandus

Barrierefreiheit im Browser prüfen (WCAG 2.2, EAA, BFSG)

Pandus Browser-Erweiterung 1.0.0

Kostenlos. Chrome, Edge, Brave, Opera und Firefox. In den Erweiterungs-Stores: bald verfügbar.

Die Pandus-Erweiterung prüft die Seite, auf der Sie gerade sind, nach WCAG 2.2 AA — dem Niveau, auf das sich der European Accessibility Act, das deutsche BFSG und der ADA stützen — und erklärt jedes Problem in einfachen Worten, auf Deutsch, Englisch, Ukrainisch, Polnisch, Tschechisch, Rumänisch oder Russisch. Sie läuft in Ihrem Browser und prüft deshalb auch Seiten hinter einem Login: den Warenkorb mit Produkten, den Checkout, das Kundenkonto, eine Staging-Website.

Was sie macht

  • Diese Seite mit einem Klick prüfen. Mehr als 90 automatische Regeln, dieselben wie bei der wöchentlichen Pandus-Prüfung. Die Probleme sind nach Regel gruppiert, die schwersten zuerst, mit einer Erklärung, warum es für Ihre Kunden wichtig ist und wie man es behebt.
  • Das Element zeigen. Klicken Sie auf „Zeigen“, und die Seite scrollt zum Element und umrahmt es.
  • Pflicht getrennt von Empfehlungen. Probleme nach WCAG 2.2 A/AA kommen zuerst; AAA und Best Practices werden getrennt als Empfehlungen gezeigt.
  • Für Entwickler kopieren. Die ganze Liste als Markdown für ein Ticket in Jira, Trello oder eine Nachricht.

Werkzeuge für die manuelle Prüfung

Die Automatik findet nur einen Teil der Probleme. Die Werkzeuge helfen beim Rest:

Werkzeug Was es zeigt WCAG
Tab-Reihenfolge Nummern und eine Linie in der Reihenfolge, in der sich der Tastaturfokus bewegt 2.4.3, 2.1.1
Überschriften Die Gliederung, durch die Screenreader-Nutzer springen, übersprungene Ebenen in Rot 1.3.1, 2.4.6
Landmarks Kopfbereich, Navigation, Hauptinhalt, Fußbereich 1.3.1
Bilder und Alt-Text Der Text, der für jedes Bild vorgelesen wird, fehlende in Rot 1.1.1
Textabstände Größere Zeilen-, Buchstaben- und Wortabstände 1.4.12
Zoom 200% Die Seite auf das Doppelte vergrößert 1.4.4
Schmaler Bildschirm (320 px) Die Seite in einem 320 px breiten Fenster 1.4.10
Farbsehen Protanopie, Deuteranopie, Tritanopie, keine Farbe, Unschärfe 1.4.1
Kontrast Verhältnis zweier Farben, direkt von der Seite gewählt 1.4.3, 1.4.11

Mit einem Pandus-Konto

Verbinden Sie die Erweiterung mit einem Klick mit Ihrem Konto (Sie bestätigen das im Konto; die Erweiterung kann nur Ergebnisse lesen und Prüfungen speichern):

  • sehen Sie, was die wöchentliche Prüfung auf der aktuellen Seite gefunden hat, mit einem Link zum Bericht;
  • speichern Sie eine Prüfung einer Seite hinter einem Login zur Website — sie erscheint auf der Seite der Website unter „Prüfungen aus dem Browser“;
  • fügen Sie eine Website, die Sie gerade ansehen, zu Pandus hinzu.

Kostenloses Konto erstellen oder sehen Sie, wie Pandus funktioniert.

Installation

Bis die Erweiterung im Chrome Web Store und auf addons.mozilla.org gelistet ist, installieren Sie sie aus dem ZIP-Archiv oben:

  1. Chrome, Edge, Brave, Opera: Entpacken Sie das ZIP, öffnen Sie chrome://extensions, schalten Sie Developer mode (Entwicklermodus) ein, klicken Sie auf Load unpacked (Entpackte Erweiterung laden) und wählen Sie den Ordner.
  2. Firefox: Öffnen Sie about:debugging#/runtime/this-firefox, klicken Sie auf Load Temporary Add-on (Temporäres Add-on laden) und wählen Sie manifest.json im entpackten Ordner. Ein temporäres Add-on wird beim Neustart von Firefox entfernt; die Listung auf addons.mozilla.org macht diesen Schritt überflüssig.
  3. Heften Sie das Pandus-Symbol an die Symbolleiste. Klicken Sie darauf oder drücken Sie Alt+Shift+A auf jeder beliebigen Seite.

Datenschutz

Kein Tracking, keine Analyse, keine Cookies. Die Erweiterung fragt nur nach dem aktiven Tab, wenn Sie sie anklicken, und nach Zugriff auf pandus.online, um mit Ihrem Konto zu kommunizieren. Prüfungen bleiben in Ihrem Browser, bis Sie sie speichern.

Siehe auch unser WordPress-Plugin, den Code für jede Website und die kostenlosen Werkzeuge.