Zweiter Blick: Validatoren Sammlung
Informationen


Validatoren zur Prüfung von Webseiten

Sie finden hier eine Sammlung von hilfreichen Tools auf externen Webseiten zur Verbesserung der Barrierefreiheit.

Bedeutung von maschinellen Prüfungsinstrumenten

Es gibt im Internet Angebote, die den Code einer Seite, Kontraste oder sogar semantische Elemente maschinell prüfen. Sie liefern als Ergebnis syntaktische Fehler, Warnungen oder Hinweise auf verdächtige Elemente oder mögliche Fehler. Sie sind für die Analyse von Webseiten hilfreich, auf keinen Fall ausreichend und vor allem nicht leicht verständlich.

Die Ergebnisse müssen manuell, also von Fachkräften, geprüft und interpretiert werden. Sie können auch nicht zu statistischen Zwecken verwendet werden, in der Art, dass die Anzahl von Meldungen zu Fehlern, Warnungen oder möglichen Problemen als Grad der Barrierefreiheit herangezogen werden. Maschinelle Meldungen können sich selbst als fehlerhaft herausstellen und gelegentlich genügt eine kleine Richtigstellung im HTML Code, um einen ganzen Wulst an Fehlermeldungen zu eliminieren.

Toolbars zur Prüfung in Browsern

Web Accessibility Toolbar für den Internet Explorer (IE WAT)

Die IE WAT wurde hochkarätig von der Paciello Group entwickelt. Dieses Projekt wird von den Betreibern mittlerweile nicht weiter verfolgt. Es gibt dafür auch eine deutschsprachige Benutzeroberfläche.

Ich habe selbst bislang noch keine effizienten Strategien gefunden, diesen Tool mit einem Screen Reader zu bedienen. Zudem waren mir nicht alle Funktionalitäten verfügbar oder es kam zu Abstürzen.

Für eine Vorevaluation wird diese Toolbar aber mit Stand 2019 weiterhin selbst von der Web Accessibility Initiative (WAI) empfohlen:

Accessibility Evaluation Toolbar für Firefox (Installationsseite der Toolbar

Diese Toolbar verfügt über Funktionalitäten verschiedener Validationstools. Nach der Installation des Add-Ons erscheint eine neue Symbolleiste im Firefox.

Web Accessibility Checker AChecker

Der AChecker ist ein äußerst hilfreiches Werkzeug zur Prüfung der Barrierefreiheit einer Websiete ... für Menschen, die sich schon sehr gut im Barrierefreien Webdesign auskennen. Und selbst diese werden bei der Auswertung der Meldungen des ACheckers oft zum Grübeln kommen. Also kein Tool für den schnellen Gebrauch, sondern eine gute Basis für eine fachkundige Evaluation.

Tipps zum AChecker

A-Checker Gütesiegel

Wer mit dem A-Checker eine Seite erfolgreich validiert hat, kann auf der Seite auch ein Gütesiegel platzieren:

WCAG 2.0 (Level AA) maschinell mit dem A-Checker validiert

Ich würde dieses Gütesiegel jedoch nicht verwenden, weil es nur aussagt, dass maschinell kein Fehler gefunden wurde. Damit ist noch lange keine Barrierefreiheit nachgewiesen.

WAVE Logo

[WebAIM]Web Accessibility Evaluation Tool (WAVE)

WAVE ist ein für sehende Webfachkräfte sehr gut aufbereiteter Validator. Leider haben wir noch keine Tricks gefunden, wie die Ergebnisse mit Vergrößerungssoftware oder Screenreader effizient auch von Sehbehinderten ausgewertet werden können. Mit einer Vergrößerungssoftware verliert man zu rasch den Überblick. Mit Screen Reader kann man die Funktionalitäten nur sehr mühsam nutzen.

Wave Intro Video | YouTube
WebAIM Video zum zwanzigjährigen Jubiläum von WAVE.
In der englischsprachigen Einführung werden die Grundfunktionen verständlich und mit Beispielen erläutert. Das Video dauert ca. 11 Minuten und ist mit englischen Untertiteln versehen.
WAVE Edge Extension | Microsoft Addons
Die Browsererweiterung steht seit August 2021 zur Verfügung.
Start über das Icon in der Browserleiste rechts oben.

Koa11y

Koa11y ist eine Desktop Anwendung zur maschinellen Prüfung nach den WCAG 2.0. Zur Installation stehen zip-Dateien für unterschiedliche Betriebssysteme zur Verfügung.

Das Ergebnis kann in linearer Form auch schlicht als HTML-Datei gespeichert werden. Dies erleichtert die Bearbeitung des Berichts bei der Verwendung eines Screen Reader.

Die erkannten Fehler werden jeweils einem WCAG Erfolgskriterium zugeordnet. Diese Zuordnung sollte natürlich anhand des Quellcodes und des Kontexts reflektiert werden. Fehlende Beschriftungen von interaktiven Komponenten verursachen etwa Probleme in Bezug auf Wahrnehmbarkeit, Bedienbarkeit, Verstehbarkeit und Robustheit.

W3C HTML Validator

Tipps für den W3C HTML Validator

W3C CSS Validierungsdienst

Tipps zum CSS Validierungsdienst

Anmerkungen:

Wenn ich es recht sehe, prüft dieser Validator nur den Code. Ob etwa die Konraste ausreichen, bin ich mir nicht sicher.

Ich habe auch noch keine Fehlermeldungen außerhalb der zentralen CSS-Dateien entdeckt. Style-Anweisungen in einer HTML-Datei werden also möglicherweise gar nicht geprüft.

Kontrastprüfung mit maschinellen Werkzeugen

Kontrastberechnung mit dem WebAIM Color Contrast Checker

Dieser Kontrastrechner ist äußerst hilfreich, um den Einsatz von Schriftfarben und Hintergrundfarben zu prüfen oder zu entwickeln. Er liefert gleich eine Auswertung im Bezug auf die Richtlinien der WCAG 2.0 zu Farbkontrasten. Zudem erlaubt er, Farben heller oder dunkler zu gestalten, um Werte für ausreichende Kontraste zu liefern.

Tipps zum WebAIM Color Contrast Checker

Die Farben können nur im hexadezimalen Format eingegeben werden, also z.B. #A0B983. Andere Formate, also z.B. rgb(0,255,37), müssen erst konvertiert werden.

Tipp

Man kann in folgender Weise die Farbcodes auch gleich an die URL anhängen:

?fcolor=0000ff&bcolor=ff0000

Der fcolor–Wert ist dabei die Schriftfarbe und der bcolor–Wert die Hintergrundfarbe.

Contrast-Ratio.com

Ein sehr übersichtlicher Rechner für die Ermittlung von Kontrasten auch für RGBA-Codes.

Der RGB-Wert einer Farbe kann folgendermaßen eingegeben werden: (Die Farbe der Seitenhälfte wechselt bei Änderungen automatisch.)

rgb(1, 11, 111)

Tipps zum Kontrastrechner auf GitHub

Colorzilla Farbanalyse (für Firefox)

ColorZilla ist kein Validationstool, sondern ein vielfach sehr hilfreiches Analysetool. Es ist ein Plug-In für Firefox und Chrome mit Funktionalitäten zur Analyse und Entwicklung des Farbdesigns auf Webseiten. Ich verwende es mit Mozilla Firefox.

Mit ColorZilla lässt sich beispielsweise der RGB- oder HEX-Wert der Farbe unter dem Cursor ermitteln. Dies geht natürlich bei den meisten Seitenelementen auch durch Analyse des Quellcodes und der CSS-Anweisungen. Für Bilder und Grafiken kann diese Funktionalität jedoch für die Kontrastermittlung erforderlich sein.

Barrierefreiheit von ColorZilla

Natürlich ist ColorZilla für sehende Menschen gedacht, die mit der Maus einen bestimmten Seitenbereich analysieren wollen. Trotzdem wäre es fein, wenn Funktionalitäten auch mit der Tastatur oder einer Vergrößerungssoftware zugänglich wären. Als hilfreiche Tastenkombination habe ich bislang nur den Start für ColorZilla entdeckt:

Tastenkombinationen für ColorZilla
Aktion Tastenkombination
ColorZilla starten SHIFT + ESCAPE

Bedienung von ColorZilla mit Zoomtext

ColorZilla zeigt am Bildschirm den Code einer Farbe unter dem Cursor an. Sehbehinderte, die auf eine Vergrößerungssoftware wie Zoomtext angewiesen sind, verfügen jedoch in der Regel nur über einen Bildschirmausschnitt mit dem Cursor über dem zu analysierenden Element. Sobald sie den Bildschirmausschnitt mittels Mausbewegung auf die Ausgabe von ColorZilla verschieben, bewegen sie den Cursor von der zu analysierenden Stelle weg.

Ich habe in Zoomtext noch keine wirklich befriedigende Strategie gefunden, um mir die ColorZilla-Ausgabe in einem separaten Bereich vergrößert anzusehen, während ich mit der Maus über Seitenelemente streiche und deren Farbcodes zu ermitteln versuche. Folgendes Verfahren verwende ich als Hilfskonstruktion, zwar mühsam, aber effizient:

  1. ColorZilla in Firefox starten (SHIFT + ESCAPE)
  2. Zoomtext Interface Starten (ALT + EINFÜGEN)
  3. Menü VERGRÖSSERUNG - EINFRIEREN wählen (ALT + V, E)
  4. Schaltfläche NEUES EINFRIERFENSTER wählen und mit der Maus den Ausschnitt festlegen.
  5. Mit der rechten Maustaste bestätigen (!?).
  6. Mauscursor auf den zu untersuchenden Bereich bewegen.
  7. Einfrierfenster wieder schließen mit SHIFT + STRG + E.

Anmerkung: Verbesserungsvorschläge für diese Strategie sind herzlich willkommen!

Ergänzende Farbcodekonverter

Die folgenden Farbkonverter verfügen leider nicht über barrierefreie Eingabeformulare! Wer einen barrierefreien Konverter kennt, soll sich bitte melden!

Visual ARIA Bookmarklet

Dieses Tool macht vorhandene ARIA-Anweisungen auf einer Webseite sichtbar. Es ist so hilfreich für die Entwicklung und den Test von Webauftritten, aber auch für Schulungen, sofern die Beteiligten sehend sind.

Ressourcen zu Visual ARIA

PDF Accessibility Checker (PAC)

Die Schweizer Stiftung Zugang für Alle hat dieses kostenlose Tool zur Prüfung der Barrierefreiheit von PDF-Dateien entwickelt. Seit 2018 steht die Version PAC3 zur Verfügung.

Leider werden von dem Tool keine Anleitungen zum Beheben des Problems mitgeliefert. Für viele liegt es daher nahe, zur Erstellung barrierefreier PDF-Dokumente auf kostenpflichtige Tools zurückzugreifen.

Beim automatischen Exportieren der Ergebnisse in einen Report werden lediglich statistische Angaben dokumentiert. Ich bin dabei auf rätselhafte Abweichungen der angegebenen Fehleranzahl im Report im Vergleich zu den Fehlern gestoßen, die aus dem Detailangaben zu entnehmen sind. Im Report werden etwa vier Fehler in den Metadaten angegeben, wo tatsächlich nur zwei im Detailbericht dokumentiert wurden.

Probleme in der Barrierefreiheit des PAC3