Browser-Plugins zur Validierung

Zur technischen Überprüfung eines barrierefreien bzw. barrierearmen Webdesign stehen verschiedene Browser-Plugins zur Verfügung. Für den Microsoft Internet Explorer und verschiedene Mozilla-Browser gibt es im Web Programme und Erweiterungen, die nicht standardmäßig integriert sind, sich aber zur Überprüfung der Barrierefreiheit als hilfreich erweisen.
Stand 15.04.2010

Inhaltsübersicht:

  1. Internet Explorer Plugin
  2. Mozilla Plugins

Internet Explorer Plugin

Web Accessibility Toolbar

Die Web Accessibility Toolbar (externer Verweis: http://www.visionaustralia.org.au/ais/toolbar/) für den Internet Explorer, der nach wie vor am meisten verbreitete und genutzte Browser, ist mit elf Rubriken eine sehr umfangreiche Erweiterung.

Web Acceessibility Toolbar im Internet Explorer

Bildbeschreibung "Web Accessibility Toolbar im Internet Explorer": Bildschirmfoto der Browser-Navigationsleiste.

Über die Rubrik Test sind verschiedene W3C Validatoren und Prüfwerkzeuge angebunden. Die Rubrik Fenster ermöglicht das Testen von verschiedenen Bildschirmauflösungen und Plattformen. In der Rubrik CSS können Style Sheets (sowohl extern als auch intern) ein- und ausgeschaltet, eigene Style Sheet-Zuweisungen getestet und als veraltet geltende Elemente angezeigt werden. Die Rubrik Bilder beinhaltet ein Umschalten zwischen der Ansicht mit Grafiken und einer Ansicht mit Alternativtexten. In der Rubrik Farben sind ein Graustufen-Test, eine Auflistung der verwendeten Farben sowie der Verweis auf eine Farbkontrastanalyse zu finden.

Die Rubrik Struktur zeigt Strukturinformationen wie den Dokumenten-Titel, Überschriften-, Listen-, Formular-, Akronym- und Abkürzungs-Elemente, Attribute zur Tastatursteuerung, eine Tabellenanalyse und deren Linearisierbarkeit sowie Frame- und Container-Elemente. In der Rubrik Extras wird auf weitere Prüfprogramme verwiesen. Der Unterbereich Simulationen verschafft einen umfangreichen Überblick der Auswirkungen verschiedener Sehbeeinträchtigungen. Die Rubrik Seite zeigt Detailinformationen (Titel, Dateigröße, Erstelldatum, Zahl der Bilder, Verweise, Formulare, Skripte) über die betrachtete Seite und verschiedene Listen über verwendete Frames, Verweise oder Metadaten sowie die Download-Zeit des Dokumentes.

In der Rubrik Texte sind Verweise auf Webseiten mit Richtlinien zur Barrierefreiheit (WCAG und BITV), Usability-Quellen und Sprachreferenzen (HTML, XHTML, CSS) angeführt. Über die Rubrik Optionen können Bilder, Javascript, die CSS-Unterstützung des Internet Explorer und das Dialogfenster Eingabehilfen ein- und ausgeschaltet sowie die Textgröße geändert werden. In der Rubrik Vergrößern ist ein Skalieren des Inhaltes der aktuellen Seite von 25% bis 600% möglich.

Seitenanfang

Mozilla Plugins

Web Developer Toolbar

Das Äquivalent zur Web Accessibility Toolbar im Internet Explorer ist die Web Developer Toolbar (externer Verweis: https://addons.mozilla.org/de/firefox/addon/web-developer/) für den Browser Mozilla Firefox. Ebenso wie beim Internet Explorer-Plugin ermöglicht dieses Werkzeug u.a. das Simulieren verschiedener Bildschirmauflösungen, die Ausgabe einer Webseite bei abgeschalteten Formatzuweisungen und die explizite Anzeige bestimmter Elemente, z.B. Überschriften oder Listen.

Web Developer Toolbar im Mozilla Firefox

Bildbeschreibung "Web Developer Toolbar im Mozilla Firefox": Bildschirmfoto der Browser-Navigationsleiste.

Die Web Developer Toolbar ist in 12 Abschnitte unterteilt, die zusammengehörige Funktionen bündeln: Über Deaktivieren kann z.B. Javascript an- und ausgeschaltet werden, um zu überprüfen, ob auch bei deaktiviertem Javascript alle Inhalte zugänglich sind. Die Rubrik Cookies ermöglicht das Löschen, Hinzufügen und Deaktivieren selbiger. Im Abschnitt CSS können u.a. die ausgelagerten Formatierungsanweisungen zur Überprüfung der Linearisierbarkeit abgeschaltet oder nach unterschiedlichen Medientypen angezeigt werden. Die Rubrik Formulare enthält (neben weiteren Optionen) die Möglichkeit, verschiedene Informationen zu Eingabefeldern und Schaltflächen in der Browser-Ansicht einzublenden. Im Bereich Grafiken können alle Bilder umfangreich untersucht werden, z.B. in Hinblick auf Alternativtexte und ergänzende Bildbeschreibungen über den Bildtitel. Der Abschnitt Informationen gibt Auskunft über verschiedenste Strukturelemente wie Anker, Klassen, Zugriffstasten und Tabulator-Indizes sowie in den Kopfdaten hinterlegte Seiteninformationen.

Unter Verschiedenes können Hilfslinien, eine Lupe oder Maßwerkzeuge eingeblendet, aber auch alle Verweise auf den Status "bereits besucht" oder "noch nicht besucht" gesetzt werden. Über den Abschnitt Hervorheben können Strukturelemente wie Frames, Überschriften und Tabellen mit farblichen Konturen versehen und auf sinnvollen Einsatz hin überprüft werden. In der Rubrik Größe können verschiedene Bildschirmauflösungen hinterlegt und getestet werden. Unter Extras finden sich Verweise zu Validatoren, um die eingesetzten Technologien auf korrekte Verwendung zu überprüfen. Abgeschlossen wird die Web Developer Toolbar mit den Rubriken Quelltext, wo der zugrundeliegende Code der angezeigten Datei ausgegeben wird und Optionen für programminterne Einstellungen.

Firebug

Ein sehr hilfreiches Werkzeug bei der Bearbeitung von HTML- und CSS-Dateien ist das Firefox-Plugin Firebug (externer Verweis: http://getfirebug.com), welches ein schnelles Finden und Beheben von Fehlern ermöglicht.

Bildschirmfoto des Browser-Plugin Firebug

Bildbeschreibung "Bildschirmfoto des Browser-Plugin Firebug": Bildschirmfoto der Benutzeroberfläche mit Symbolleiste (oben), Quelltextansicht (links) und Formatzuordnungen (rechts).

Ist der Auswahlmodus aktiviert, kann jedes beliebige Element auf einer Webseite angeklickt werden und das Werkzeug gibt die zugehörigen Quelltext-Bestandteile aus - sowohl den entsprechenden HTML-Ausschnitt als auch die dafür geltenden Formatzuweisungen über CSS. Bestehende Formatzuweisungen können temporär deaktiviert, geändert oder neue hinzugefügt werden. Um die Übernahme der Anpassungen zu erleichtern werden die jeweils betroffenen Dateinamen und die zugehörigen Zeilennummern mit angezeigt. Ebenfalls integriert ist ein Bereich zur Ladezeiten-Ermittlung.

HTML-Validator

Ein weiteres Browser-Plugin ist der HTML-Validator (externer Verweis: http://html-validator.de/). Diese, ursprünglich in englischer Sprache von Marc Gueury (externer Verweis: http://html-validator.org/) entwickelte, Firefox- und Mozilla-Erweiterung überprüft den Quelltext auf syntaktische Fehler, optional zusätzlich auf barrierefreie Merkmale. Der Validator basiert auf HTML Tidy (externer Verweis: http://www.w3.org/People/Raggett/tidy/), einer Software des W3C.

Das HTML-Validator-Plugin wird in die Statuszeile des Browser integriert (siehe nachfolgendes Bild, rechts oben). Unterschiedliche Symbole (engl. Icon) verdeutlichen den Status der betrachteten Webseite (siehe nachfolgendes Bild, rechts unten, von links nach rechts): Fehler (Dokument enthält kritische Fehler), Warnung (Dokument enthält einfache Fehler), keine Fehler (Dokument ist fehlerfrei; sofern in den Einstellungen aktiviert, werden ergänzend Hinweise zur Barrierefreiheit ausgegeben), nur versteckte Fehler (Dokument enthält Fehler oder Warnungen, die in den Einstellungen jedoch deaktiviert wurden), Zeichensatz (Dokument enthält Zeichen, die nicht zum Zeichensatz des Dokuments passen; eine Überprüfung ist nur eingeschränkt möglich), keine Daten (Dokument enthält keine Daten oder ist noch nicht komplett geladen), ausgeschlossen (Überprüfung der Domain wurde in den Einstellungen ausgeschlossen) und inaktiv (Validator ist abgeschaltet). Über die Browser-Quelltext-Anzeige oder durch Klick auf das HTML-Validator-Icon lassen sich die einzelnen Warnungen und Fehlermeldungen sowie mögliche Ursachen, deren Wirkungen und potentielle Lösungsvorschläge anzeigen (siehe nachfolgendes Bild, links).

Bildschirmfotos des Browser-Plugin HTML-Validator

Bildbeschreibung "Bildschirmfotos des Browser-Plugin HTML-Validator": Bildschirmfotos der Benutzeroberfläche. Links: Anzeige der Warnungen und Fehlermeldungen sowie mögliche Ursachen, deren Wirkungen und potentielle Lösungsvorschläge. Rechts oben: Icon in der Statuszeile des Browser. Rechts unten: Icons, die den Status der betrachteten Webseite symbolisieren.

Weiterführende Literatur:

Vision Australia:
Symbol für 'Artikel im Web verfügbar'
Web Accessibility Toolbar,
http://www.visionaustralia.org.au/ais/toolbar/, Datei vom 19. Oktober 2007,
Stand 12.03.2007
Kregel, Ingo und Federhen, Ansgar und Wink, Mike:
Symbol für 'Artikel im Web verfügbar'
HTML-Validator,
http://html-validator.de/, Datei vom 30. Juli 2006,
Stand 27.04.2007

Seitenanfang