Zweiter Blick: Validatoren Sammlung

BarrierefreiheitDarstellungsoptionen



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.

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

  • Die Sprache der Ausgabe kann durch Klicken auf das Link "German" geändert werden.
  • Die Accessibility Review, also das Prüfungsergebnis, kann auch in unterschiedlichen Dateiformaten und nach unterschiedlichen Kriterien gespeichert werden.

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 Web Accessibility Evaluation Tool

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.

W3C HTML Validator

Tipps für den W3C HTML Validator

  • Die Ergebnisse beginnen mit der Überschrift "Validation Output" der Ebene 3.
  • Ich arbeite gerne mit dem Quellcode der Ergebnisseite, weil dieser für mich lesbarer ist. Allerdings muss ich dazu erst über viel HTML-Müll stolpern, weil die Seite tatsächich noch mit Layouttabellen arbeitet!
    Ich beginne daher unter folgendem Code des Quellcodes:
    <li class="msg_err">

W3C CSS Validierungsdienst

Tipps zum CSS Validierungsdienst

  • Die Seiten sind durch Klicken auf das Link "Deutsch" auch auf Deutsch verfügbar.
  • In den Optionen lässt sich die Ausgabe von Warnungen deaktivieren.
  • Wenn Du den HTML-code direkt eingibst und prüfen lässt, können auf Deinem Rechner referenzierte Dateien natürlich nicht geprüft werden. Der Validator liefert als Fehlermeldung:
    Datei nicht gefunden: import file://localhost/styles/main.css: Operation not permitted

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.

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.

Ergänzende Farbcodekonverter

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

Farbkontrastberechnung auf GITHUB

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

Tipps zum Kontrastrechner auf GitHub

  • Die WCAG Konformität der Farbkombination wird mit einem HOVER-Effekt auf den Kreis zwischen den beiden Farben eingeblendet.
  • Die WCAG Konformität der Farbkombination wird nach dem Eingabefeld für die Schriftfarbe (Text Color) an den Screenreader weitergegeben.
  • Die WCAG Konformität der Farbkombination wird durch Drücken der Tabulatortaste angezeigt, wenn das zweite Formularfeld ausgefült, also aktiv ist.

Colorzilla Farbanalyse (für Firefox)

ColorZilla ist kein Validationstool, sondern ein vielfach sehr hilfreiches Analysetool. Es ist ein Plug-In für einige Browser 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!

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 Validation und Entwicklung

PDF Accessibility Checker (PAC)

Die Schweizer Stiftung Zugang für Alle entwickelt technische Prüfungswerkzeuge zur Prüfung der Barrierefreiheit von PDF-Dateien. Das Tool ist kostenfrei. Leider bestehen jedoch Mängel bei der Tastaturbedienbarkeit (Stand Juli 2018).