© nikocingaryuk / 123rf.com

Laut einer Untersuchung von Google und der Aktion Mensch aus dem Jahr 2024 sind rund zwei Drittel der geprüften Onlineshops nicht barrierefrei. Wir nehmen einige Werkzeuge unter die Lupe, mit deren Hilfe Sie Webseiten automatisiert auf ihre Barrierefreiheit testen.

Ab Juni 2025 sind Unternehmen durch das Barrierefreiheitsstärkungsgesetz (BFSG) [1] gesetzlich dazu verpflichtet, ihre Dienstleistungen und Produkte auf ihren Webseiten barrierefrei anzubieten. Statt auf den nächsten Relaunch der Webseite zu warten, sollten Online-Anbieter die entsprechenden Vorgaben alsbald erfüllen. Das Gesetz sieht vor, dass die Marktüberwachungsbehörden bei der Feststellung von Mängeln nach stichprobenartigen Prüfungen oder nach Beschwerden von Besuchern der Webseite die umgehende Behebung verlangen können. Geschieht das innerhalb der vorgegebenen Fristen nicht, droht sogar die Einstellung des Dienstes oder Angebots. Nur kleine Unternehmen mit weniger als zehn Mitarbeitern und einem Jahresumsatz von unter zwei Millionen Euro sowie Unternehmen, deren Angebot sich ausschließlich an andere Unternehmen richtet (B2B), betreffen die Regelungen des BFSG nicht.

Um die digitale Inklusion sachgerecht zu ermöglichen, legt man die seit dem Jahr 2008 eingeführten Web Content Accessibility Guidelines (WCAG) [2] zugrunde. Die dadurch definierten Standards schließen die gute Wahrnehmbarkeit der Inhalte, die einfache Bedienbarkeit einer Webseite, eine ausreichende Verständlichkeit der dargebotenen Informationen und die Kompatibilität mit Hilfsanwendungen ein. Ob eine Webseite den Kriterien entspricht, verraten zahlreiche Werkzeuge, die sich auf die einzelnen WCAG-Kriterien fokussieren und die jeweiligen Inhalte automatisiert und schnell überprüfen.

Unter Linux gibt es dazu einige native Anwendungen, Plugins für die gängigen Webbrowser bilden aber den Löwenanteil der Testwerkzeuge für die Barrierefreiheit. Sie lassen sich im Handumdrehen installieren, wollen aber sorgfältig ausgewählt sein. Viele Plugins sind nur für bestimmte Webbrowser erhältlich und unterstützen ältere WCAG-Spezifikationen.

ARC-Toolkit

Das von der TPGI-Gruppe mit Sitz in Florida und Niederlassungen in Irland sowie dem Vereinigten Königreich entwickelte ARC-Toolkit [3] nimmt im Webbrowser automatisierte Tests zur Gewährleistung der Barrierefreiheit vor. Als Browserextension für Chrome und Firefox und deren Derivate erhältlich, integrieren Sie das Werkzeug mit wenigen Mausklicks in den Browser. ARC-Toolkit überprüft wahlweise anhand der Regelwerke WCAG 2.0 bis WCAG 2.2. Darüber hinaus können Sie das Tool für Webseiten verwenden, die sich noch in der Entwicklung befinden und sich damit noch nicht online abrufen lassen.

Nachdem Sie ARC-Toolkit in den Browser integriert haben, rufen Sie die zu testende Webseite auf und navigieren ins Einstellungsmenü des Browsers. In Firefox wählen Sie die Option Weitere Werkzeuge. Im sich öffnenden Menü klicken Sie auf den Eintrag Werkzeuge für Web-Entwickler. Anschließend erscheint unten im Fenster eine horizontale Leiste mit Entwicklerwerkzeugen, in der Sie die Option ARC Toolkit auswählen. Im nun eingeblendeten Dialog klicken Sie auf den Schalter Run tests, um die automatischen Tests anzustoßen. Nach kurzer Zeit sehen Sie die Testergebnisse im Fenster.

In Chromium oder Chrome und deren Abkömmlingen klicken Sie im Konfigurationsmenü auf Weitere Tools und den Eintrag Entwicklertools. Am rechten Fensterrand springen Sie im vertikalen Segment für Entwickler in der Menüzeile zu ARC Toolkit und starten im neu geöffneten Testdialog über Run tests die Überprüfung. Die Übersicht der Ergebnisse gibt alle problematischen Einstellungen (Abbildung 1) in farbig hervorgehobenen Fehler- oder Alarmanzeigen tabellarisch untereinander aus.

Abbildung 1: Das ARC Toolkit listet alle problematischen Einstellungen der geöffneten Webseite tabellarisch auf.

Um den Überblick über die problematischen Einträge zu behalten, lassen sie sich filtern. Dazu klicken Sie vor dem Start der Tests auf das kleine, nach oben offene Dreieck neben der Option All topics. Im Auswahlmenü legen Sie daraufhin die zu prüfende Option fest und führen die Tests erneut durch.

Um problematische Bereiche der Codebasis im Detail angezeigt zu bekommen, genügt ein Mausklick auf den betreffenden Fehlereintrag in der Liste. Das Werkzeug blendet danach eine detaillierte Fehler- oder Alarmansicht des Codes ein. Dazu gehört auch eine kurze Beschreibung der entsprechenden WCAG-Version inklusive der passenden Kriterien. Über den Schalter Inspect element links neben der kleinen Codeansicht springen Sie direkt in Ihre Codebasis, um dort die einzelnen Elemente zu editieren.

AXE-DevTools

Hinter den AXE-DevTools [4] des in Virginia in den USA ansässigen Unternehmens Deque Systems Inc. steckt ebenfalls eine Plugin-Sammlung für Webbrowser, die HTML-Code auf ihre Barrierefreiheit hin untersucht. Die Werkzeugsammlung eignet sich für Mozillas Firefox, Googles Chrome und deren Derivate. Um die Einarbeitung zu erleichtern, stellt Deque Systems Inc. unterschiedliche Tutorials, teilweise auch kurze Videoanleitungen auf unterschiedlichen Plattformen zur Verfügung.

Analog zum ARC-Toolkit binden Sie AXE-DevTools bei der Installation in die Entwicklermenüs der jeweiligen Webbrowser ein und rufen sie in der Entwickleransicht ab. Der Werkzeugkasten führt Sie danach in ein kleines Begrüßungsfenster, in dem Sie beim ersten Aufruf Ihre Rolle für die Verwendung der Tools angeben und die Nutzungsbedingungen akzeptieren müssen. Mittels Mausklick auf den jeweiligen Button entscheiden Sie, ob ein vollständiger oder partieller Seiten-Scan ansteht.

Bitte beachten Sie jedoch, dass Sie zahlreiche Optionen der Werkzeugsammlung ausschließlich in der Pro-Variante nutzen können. Zeitlich begrenzt können Sie sie kostenfrei freischalten, nach Ablauf des Probezeitraums sind die Funktionen gebührenpflichtig. Der partielle Seiten-Scan ist ebenfalls nur in der Pro-Variante des Werkzeugs verfügbar. Die AXE-DevTools sind in der kostenfreien Variante des Plugins funktional arg beschnitten: Zum Beispiel lassen sich Testergebnisse weder speichern noch exportieren. Auch geführte, individuell zusammengestellte Testläufe lassen sich erst mit der kostenpflichtigen Pro-Version umsetzen.

Nach dem Start des vollständigen Seiten-Scans zeigt das Tool nach wenigen Sekunden die Ergebnisse (Abbildung 2) an. Dabei teilt es die erkannten Probleme in unterschiedliche Kategorien auf. So sehen Sie auf einen Blick, wie viele der erkannten problematischen Komponenten auf der Webseite kritisch, ernst oder lediglich mittelschwer einzustufen sind. Unterhalb der Gesamtanzeige finden Sie die einzelnen identifizierten Fehler kategorisiert aufgeschlüsselt. Ein Klick auf eine der gelisteten Fehlerkategorien öffnet eine Detailansicht mit einer Erklärung. Außerdem enthält die Ansicht den entsprechenden Code und einen Lösungsvorschlag.

Abbildung 2: Auch die AXE-DevTools liefern detaillierte Angaben zu gefundenen Fehlern im Code einer Webseite.

HeadingsMap

HeadingsMap [5] nimmt die Konsistenz der Überschriften- und Gliederungsstruktur einer Webseite unter die Lupe. Sie erhalten das Werkzeug als Plugin für die gängigen Webbrowser und deren Abkömmlinge. Aus den Addon-Stores binden Sie das Tool mit wenigen Mausklicks in die jeweilige Browserinstanz ein. Bitte denken Sie im Fall von Chrome und Chromium daran, HeadingsMap in den Konfigurationsmenüs für den Inkognito-Modus zu aktivieren, damit es auch auf im Inkognito-Modus geladenen Webseiten funktioniert. Firefox und seine Derivate fragen bei der Installation nach, ob Sie die Erweiterung auch im privaten Modus einschalten möchten. Um das Tool zu verwenden, empfiehlt es sich außerdem, es in die Symbolleiste zu integrieren.

Anschließend laden Sie eine beliebige Webseite, deren Struktur Sie auf Konsistenz abklopfen möchten, und klicken in der Symbolleiste auf das HeadingsMap-Icon. Im Webbrowser öffnet sich daraufhin links vertikal eine Leiste (Abbildung 3), die untereinander alle Überschriften auf der jeweiligen Webseite sowie deren Ebene anzeigt. Fehler bildet die Software rot hinterlegt ab.

Da das Werkzeug selbst in dieser Ansicht mit hellgrauen Zeichen auf dunklem Hintergrund sehr unergonomisch wirkt, ergibt es Sinn, zunächst in den Einstellungen auf einen ergonomischeren Modus umzuschalten. Dazu klicken Sie oben in der Titelleiste auf die drei vertikal angeordneten Punkte und wählen im geöffneten Kontextmenü den Punkt settings. Im danach eingeblendeten überlappenden Fenster entfernen Sie das Häkchen vor dem Eintrag Dark Mode. Nach dem Schließen des Fensters finden Sie die vertikale Seitenleiste links mit schwarzer Schrift auf weißem Hintergrund vor.

Abbildung 3: HeadingsMap prüft die Struktur einer Webseite auf ihre Konsistenz.

Per Mausklick gelangen Sie zu jeder der gelisteten Überschriften. Auf der Webseite wird die Überschrift daraufhin angesprungen und kurz mit einem blinkenden Rahmen hervorgehoben. Möchten Sie die einzelnen Überschriften inklusive ihrer Hierarchieebene auf der Webseite sehen, klicken Sie oben in der vertikalen Leiste auf das symbolisierte Auge. Jede gefundene Überschrift bekommt nun einen Rahmen. In dessen Ecke rechts oben erscheint ein kleines Quadrat mit der Angabe der Hierarchieebene. Fehlerhafte Einträge lassen sich allerdings nicht wie bei den beiden ersten Tools direkt aus HeadingsMap heraus korrigieren. Stattdessen müssen Sie die gefundenen Stellen im HTML-Code anpassen.

Landmark Navigator

Der Landmark Navigator [6] ist ein für Chrome und dessen Derivate erhältliches Plugin, um die Navigation auf einer Webseite zu vereinfachen. Das Werkzeug nutzt dazu die mit dem ARIA-1.0-Standard [7] (Akronym für Accessible Rich Internet Applications) eingeführten Landmark Roles. Damit wird eine Webseite in unterschiedliche Regionen eingeteilt, die sich einfacher mit Screenreadern ansteuern lassen. Landmark Navigator liest dazu die einzelnen Roles-Tags auf der Webseite aus und erlaubt anschließend das direkte Ansteuern der einzelnen Elemente per Popup-Menü und Tastenkombinationen.

Nach der Installation pinnen Sie das Plugin in der Steuerleiste an. Die passenden Einstellungsdialoge erreichen Sie durch einen Rechtsklick auf das Icon und Erweiterung verwalten im daraufhin geöffneten Kontextmenü. In der Gruppe Tastenkombinationen sehen Sie die vorgegebenen Tastenbelegungen ein. Bei Bedarf lassen sie sich jederzeit über den symbolisierten Bleistift hinter jeder Tastenkombination und Eingabe einer neuen modifizieren. Es empfiehlt sich außerdem, in den Einstellungsdialogen das Werkzeug im Inkognito-Modus zu aktivieren, um die Navigationsmöglichkeiten voll auszuschöpfen.

Nach dem Aufrufen einer Webseite erscheint oben in der Steuerleiste rechts am Icon des Plugins in einem blauen Quadrat die Anzahl der gefundenen Landmark-Elemente. Klicken Sie auf das Icon, listet die Software in einem Popup-Menü die einzelnen Navigations-Tags (Abbildung 4) auf der Webseite untereinander auf. Sobald Sie mit dem Mauszeiger in diesem Menü eines der aufgeführten Elemente berühren, wird es auf der Webseite mit einem rosafarbenen Rahmen versehen.

Ein Mausklick auf eines der Elemente dagegen führt Sie auf der Webseite direkt zu demselben. Mithilfe der festgelegten Tastenkombinationen können Sie ebenfalls schnell zu den einzelnen Elementen springen. Beachten Sie dabei jedoch bitte, dass die vorgegebenen Tastenbelegungen ausschließlich den Sprung zum vorherigen oder nächsten Element gestatten. Wahlfreies Springen innerhalb einer Webseite klappt nicht. Wenn die Webseite zahlreiche Navigationselemente implementiert hat, erweist es sich deswegen als effizienter, Landmark Navigator mithilfe des Popup-Menüs zu verwenden.

Abbildung 4: Die einzelnen Tags zeigt Landmark Navigator in einem kleinen Fenster an.

Da das sich das kleine Popup-Menü für Sehbehinderte zum Entziffern aller Inhalte wenig eignet und viel Konzentration erfordert, bietet die Erweiterung alternative Darstellungen. Um rechts im Browserfenster eine größere Ansicht in Form einer vertikalen Seitenleiste zu erhalten, klicken Sie mit der rechten Maustaste auf das Icon und wählen Seitenleiste öffnen aus. Daraufhin erscheinen die einzelnen Landmark-Elemente genauso wie im Popup-Menü untereinander tabellarisch aufgeführt. Das Navigieren funktioniert analog zum Popup-Menü. Bei geöffneter Seitenleiste funktionieren die Tastenkombinationen allerdings nicht mehr wie gewohnt. Die Seitenleistenansicht kommt daher nur für Anwender infrage, die sich mithilfe der Maus auf der Webseite bewegen.

Page Structure

Mit Page Structure [8] steht für Firefox und seine Derivate ein Plugin zur Verfügung, dessen Funktionen denen von Landmark Navigator für Chromium und Abkömmlinge ähneln. Sie beziehen das Tool aus dem Addon-Store von Mozilla. Achten Sie bei der Installation bitte darauf, dass sich das Werkzeug auch im privaten Modus verwenden lässt, indem Sie die passende Option durch Setzen eines Häkchens aktivieren.

Sobald die Installation abgeschlossen ist, starten Sie das Werkzeug über das Icon in der Plugin-Liste oder Sie heften das Icon an die Symbolleiste und klicken darauf. Anschließend blendet sich links im Browserfenster eine vertikale Steuerleiste ein. In ihr sehen Sie neben dem Seitentitel die einzelnen Überschriften im voreingestellt aktiven Reiter Headings.

Ein Mausklick auf Landmarks öffnet die Navigationsansicht mit den Landmark-Elementen (Abbildung 5). Daraufhin können Sie wahlfrei auf der Webseite navigieren: Klicken Sie unter Headings eine der gelisteten Überschriften an, navigiert das Plugin auf der Webseite bis zu dieser Überschrift und kennzeichnet sie mit einem orangefarbenen Rahmen, in dem sich auch die Hierarchieebene der Überschrift findet. Im Reiter Landmarks geht Page Structure genauso vor, mit dem Unterschied, dass die Navigationselemente einen blauen Rahmen bekommen.

Abbildung 5: Mit Page Structure können Sie in Firefox zwischen Titeln und Landmark-Elementen navigieren.

Silktide Accessibility Checker

Der Silktide Accessibility Checker [9] ist eine Browsererweiterung für Chrome und Derivate. Nachdem Sie das Werkzeug aus dem Chrome Web Store bezogen und aktiviert haben, erscheint beim Aufruf einer neuen Webseite rechts am Bildschirmrand mittig ein kleines Icon. Ein Mausklick darauf liefert eine vertikale Seitenleiste mit mehr als einem Dutzend unterschiedlicher Prüfkriterien für die Barrierefreiheit der Webseite.

Anders als die bisherigen Tools versteht sich der Silktide Accessibility Checker (Abbildung 6) nicht als Anwendung für bestimmte Einzeltests zur Barrierefreiheit, sondern als universelles Werkzeug, das die unterschiedlichen Prüfstandards der WCAG-Spezifikationen und der US-amerikanischen ADA-Normen berücksichtigt. Bei den WCAG-Spezifikationen bezieht die Software alle drei Kategorien A, AA und AAA ein. Das Tool lässt sich sowohl für Live-Webseiten als auch für noch im Offline-Stadium befindliche Seiten nutzen.

Bedienergonomie

Nach dem Aufklappen der Werkzeugleiste am rechten Rand des Browserfensters wählen Sie eine der Kategorien aus. Während sich dabei Kategorien wie Color contrast und Landmarks oder auch Headings auf die Anzeige der jeweiligen vorhandenen Elemente beschränken, führt der Accessibility checker eine Prüfung der gesamten Webseite nach den gängigen WCAG-Standards durch.

Problematische Einstellungen zeigt anschließend die Steuerleiste untereinander aufgelistet. Mithilfe des rechts darüber in der Leiste angeordneten Auswahlfelds legen Sie zusätzlich fest, nach welcher Spezifikation und mit welchem Level Sie die jeweilige Seite testen möchten. Außerdem lässt sich die Darstellungsform auf unterschiedlichen Endgeräten angeben. Die gefundenen Mängel erfasst das Plugin quantitativ nach ihren jeweiligen Kategorien. Ein Klick auf eine der Kategorien gibt untereinander die problematischen Codeschnipsel aus.

Abbildung 6: Silktide Accessibility Checker ist ein universelles Werkzeug für Prüfungen der Barrierefreiheit.

Handelt es sich bei den bemängelten Bereichen um optische Elemente oder Links, führt die Tabelle sie jeweils mit einer kurzen Erklärung und der passenden Stelle auf der Webseite auf. Bei Codeschnipseln zieht die Software auf der Webseite einen roten Rahmen um die problematischen Elemente, sodass Sie sie auch bei umfangreichen Inhalten schnell finden können. Aufgrund vieler Hinweise zu Verbesserungen und der klaren Benennung problematischer Elemente eignet sich Silktide Accessibility Checker ausgezeichnet dafür, Webentwicklern beim Umsetzen eines inklusiven Designs unter die Arme zu greifen.

Siteimprove Accessibility Checker

Der Siteimprove Accessibility Checker [10] des in Dänemark ansässigen Unternehmens Siteimprove ist ein Plugin für alle gängigen Webbrowser. Dementsprechend erhalten Sie das Werkzeug in den jeweiligen Addon-Stores. Beim ersten Aufruf nach der Installation fällt das Tool allerdings negativ auf: In einem gesondert im Webbrowser geöffneten Dialog möchte das Herstellerunternehmen persönliche Daten des jeweiligen Nutzers abfragen. Doch durch einen Klick auf Skip können Sie der Neugier einen Riegel vorschieben und den entsprechenden Browser-Tab schließen.

Danach ist das Plugin einsatzbereit. Es empfiehlt sich, je nach Webbrowser das Öffnen des Werkzeugs im privaten oder Inkognito-Modus zu gestatten. Auch der Zugriff auf lokale Datei-URLs sollte erlaubt sein, sofern Sie Webseiten überprüfen möchten, die noch nicht online abrufbar sind. Darüber hinaus sollten Sie das Icon in der Symbolleiste des Browsers anheften, wenn Sie das Plugin häufiger nutzen möchten.

Anschließend starten Sie den Accessibility Checker durch einen Klick auf das Icon. Ohne weiteres Zutun läuft in einem kleineren Extrafenster eine Prüfung an. Die Ergebnisse erscheinen kurze Zeit später tabellarisch und nach Kategorien sortiert untereinander angeordnet. Dabei prüft das Werkzeug unterschiedliche Parameter: Beispielsweise nimmt es sich den verfügbaren Kontrast auf der Webseite ebenso vor wie die verwendeten Schriftgrößen oder die Größe interaktiver Elemente.

Für jede Kategorie nennt die Erweiterung zudem die Anzahl der gefundenen problematischen Elemente sowie den jeweiligen WCAG-Level. Durch einen Klick auf eine der Kategorien erhalten Sie alle betreffenden Einträge untereinander aufgeführt. Ein weiterer Mausklick bringt umfangreiche Informationen und Lösungsvorschläge zutage, wie Sie das beanstandete Element nach den Richtlinien barrierefrei gestalten können.

Zur schnelleren Orientierung markiert ein roter Rahmen das jeweilige Element auf der Webseite. Handelt es sich um Kontrast- oder Farbmängel, versorgt Sie das Tool zusätzlich mit genauen Angaben zum bestehenden Kontrastverhältnis und den verwendeten Farben sowie Vorschlägen (Abbildung 7) zur Verbesserung der entsprechenden Einstellung. Schließlich werden auch Beispiele von Codeschnipseln angezeigt, mit denen sich der Mangel beheben lässt. Die Codeschnipsel können Sie in die Zwischenablage kopieren und so auf den direkten Einsatz im Quellcode vorbereiten.

Abbildung 7: Der Siteimprove Accessibility Checker prüft nicht nur Webseiten, sondern liefert zusätzlich umfangreiche Verbesserungsvorschläge.

Hinter dem Reiter Explorer im Fenster des Plugins verbirgt sich eine weitere Ansicht, mit deren Hilfe Sie speziell farbenblinde Nutzer betreffenden Verbesserungsbedarf auf der aktuellen Webseite aufdecken. Dabei handelt es sich um Simulationsroutinen. Sie verändern und zeigen die Webseite farblich so an, wie farbenblinde Menschen sie wahrnehmen (Abbildung 8). Sie haben die Wahl zwischen der Simulation einer kompletten Farbenblindheit, einer Rot-Grün- oder einer Blau-Gelb-Farbenblindheit. Nach einem Klick auf eine dieser Optionen erhalten Sie einige grundlegende Informationen zum Krankheitsbild und modifizieren die aktuelle Webseite temporär jeweils mithilfe des blauen Schalters Apply filter. Deactivate filter versetzt die Webseite in ihren Ursprungszustand zurück.

Abbildung 8: Der Siteimprove Accessibility Checker simuliert auch die Ansicht der Webseite, wie sie farbenblinde Nutzer wahrnehmen.

WAVE Accessibility Extension

Die WAVE Accessibility Extension ist als Erweiterung für die Webbrowser Firefox und Chrome sowie deren Derivate konzipiert [11]. Nach der Installation aktivieren Sie das Werkzeug durch einen Klick auf das entsprechende Icon in der Symbolleiste oder durch Auswahl des dazugehörigen Eintrags im Plugin-Menü. Die Anwendung öffnet daraufhin eine vertikale Leiste links im Webbrowser. Darin tauchen gefundene problematische Elemente auf der Webseite zunächst unter Summary auf.

Gleichzeitig ändert sich das Aussehen der geladenen Webseite signifikant, da die Erweiterung durch zahlreiche Symbole und farbige Kästen auf die bemängelten Elemente hinweist (Abbildung 9). Neben fehlenden Elementen zur Barrierefreiheit hebt das Tool auch positive Gestaltungsmerkmale hervor.

L:Alle kategorisierten Elemente werden nach einem Klick auf den Button View details unterhalb der Gruppenansicht oder auf den Reiter Details einzeln tabellarisch angezeigt. Dabei berücksichtigen die Kategorien jedwede Art von Mangel: beispielsweise zu kleine Schriften, fehlende alternative Texte zu Abbildungen, zu geringe Kontraste oder auch eine unvollständige Seitenstruktur.

Abbildung 9: Die WAVE-Erweiterung markiert auf der geprüften Webseite alle auffallenden Elemente.

Sobald Sie in der Detailansicht auf eines der Symbole klicken, springt die Ansicht auf der Webseite zu der Stelle mit dem betreffenden Element. Das dort vorhandene korrelierende Symbol blinkt dann dreimal kurz auf. In Bereichen mit vielen Symbolen leidet dadurch allerdings die Übersichtlichkeit, da das blinkende Symbol dort mitunter nicht auf Anhieb zu erkennen ist und Sie mehrfach links auf das Icon in der Steuerleiste klicken müssen.

Untersuchung

Um ein Element genauer zu inspizieren, klicken Sie mit der rechten Maustaste auf das dazugehörige Symbol und wählen im sich öffnenden Kontextmenü die Option Barrierefreiheit-Eigenschaften untersuchen aus. Im Browser erscheint nun die Entwickleransicht mit der entsprechenden Stelle des HTML-Codes. Darüber hinaus erhalten Sie in der Ansicht Vorschläge, wie das Manko zu beheben ist.

Ein Linksklick auf eines der Icons auf der Webseite dagegen führt in ein kleines überlappendes Fenster mit einem Hinweis auf das gefundene Problem. Reference blendet links in der Seitenleiste nähere Referenzinformationen ein. Hinter Code rechts unten im Erläuterungsfenster im Webbrowser finden Sie die entsprechenden Codeschnipsel in einem grau hinterlegten Kasten.

Um die Struktur der geladenen Webseite nachzuvollziehen, nutzen Sie den Reiter Structure in der linken Steuerleiste. Durch einen Klick auf eines der daraufhin angezeigten Symbole navigieren Sie auf der Webseite zu den einzelnen Überschriften oder Strukturelementen. Wenn Sie zuvor die Code-Option in einer der kleinen Erläuterungen zu einem Element aufgerufen haben, bleibt das Codesegment am unteren Rand des Browserfensters geöffnet. Die Anzeige wechselt jeweils zu den betreffenden Codeschnipseln, sodass sie sich einfacher lokalisieren und modifizieren lassen.

Fazit

Die besprochenen Browser-Plugins leisten allesamt wertvolle Hilfe beim Aufdecken von Schwächen auf Webseiten, die einem barrierefreien Zugang im Weg stehen. Während sich Werkzeuge wie HeadingsMap oder Landmark Navigator auf einzelne Bereiche konzentrieren, decken WAVE, das ARC-Toolkit oder die AXE-DevTools ein breiteres Spektrum von Kriterien ab.

Bitte behalten Sie im Hinterkopf, dass die Werkzeuge nach dem Prüfen einer Webseite zu deutlich unterschiedlichen Ergebnissen kommen. Trotz Regelkonformität ist es deswegen unbedingt zu empfehlen, mehrere Tools simultan eine Webseite unter die Lupe nehmen zu lassen. Dadurch lassen sich die einzelnen Kriterien hinsichtlich der Barrierefreiheit wirklich weitgehend vollständig berücksichtigen. (csi)