Tools zur Überprüfung der Barrierefreiheit – digibasics
Version 1.0
Prototyp zur Erprobung

Tools zur Überprüfung der Barrierefreiheit

Zur Überprüfung von Websites gibt es einige Tools. An dieser Stelle sollen zwei genannt werden, die beide ohne Installation auskommen.

123 – Accessibility HTML5 Outliner

Mit diesem Tool kann man die Überschriftenhierarchie einer Website überprüfen. Um das Tool benutzen zu können, muss man die Seite https://hinderlingvolkart.github.io/h123/#1 aufrufen und diese Seite zu den eigenen Lesezeichen / als Favorit hinzufügen.

Lesezeichen / Favorit hinzufügen

Wie man ein Lesezeichen erstellt, unterscheidet sich leicht von Browser zu Browser: 

Chrome

  1. Rechtsklick auf «h123» 
  2. Klicke auf «Adresse des Links kopieren» 
  3. Gehe auf die Webseite chrome://bookmarks oder öffne den Lesezeichen-Manager 
  4. Klicke auf die drei Punkte oben rechts 
  5. Füge ein neues Lesezeichen für den kopierten Link hinzu 
  6. Speichere

Safari

  1. Rechtsklick auf «h123» 
  2. Klicke auf «Link kopieren» 
  3. Gehe im Reiter «Lesezeichen» auf «Lesezeichen hinzufügen» und speichere 
  4. Gehe im Reiter «Lesezeichen» auf «Lesezeichen bearbeiten» 
  5. Ersetze in der Spalte «Adresse» die URL mit dem kopierten Link 

Firefox

  1. Rechtsklick auf «h123» 
  2. Klicke auf «Lesezeichen für Link hinzufügen…» 
  3. Speichere 

Edge

  1. Rechtsklick auf «h123» 
  2. Klicke auf «Link kopieren» 
  3. Gehe zu: edge://favorites/ 
  4. Füge den Link als Favorit hinzu

Nutzung des Tools

Sobald das Lesezeichen beziehungsweise der Favorit gesetzt ist, ruft man die Website auf, die geprüft werden soll. Bei Klick auf das Lesezeichen / den Favorit, erscheint rechts oben ein kleines Fenster mit allen auf dieser Website vorhandenen Überschriften:

Ausschnitt der Website Master Logopädie der HfH mit aktiviertem Lesezeichen h123. Weitere Information in der Bildbeschreibung unter der Abbildung
Website Master Logopädie mit aktiviertem Lesezeichen h123
Beschreibung der Abbildung «Website Master Logopädie mit aktiviertem Lesezeichen h123»

Abgebildet ist die Website Master Logopädie der Hochschule für Heilpädagogik. Das Tool h123 zeigt oben rechts die Übersicht aller Überschriften an. Drei verschiedene, in dieser Abbildung nicht angewählte Optionen, können angewählt werden.

  • Bei der obersten Option «Show hidden», zeigt die Nummer 3 an, dass sich drei versteckte Überschriften auf der Seite befinden. Welche diese sind, ist nicht ersichtlich, da diese Option hier nicht ausgewählt ist.
  • Unterhalb können visuell versteckte Überschriften «Mark visually hidden» markiert werden, in diesem Beispiel deren 10.
  • Als dritten und letzten Auswahlpunkt «Hover highlight» können entsprechende Stellen (Überschriften) hervorgehoben werden.

Unter diesen drei Optionen werden alle auf der Seite verwendeten (sichtbaren) Überschriften aufgelistet, in diesem Beispiel beginnend mit «Sprachumschalter» und endend mit «Akkreditierungen».

In diesem Fenster können ganz oben per «Show hidden» versteckte Überschriften zum Vorschein gebracht werden. Mit «Mark visually hidden» werden visuell versteckte Überschriften sichtbar gemacht. Ausserdem können über die Option «Hover-Highlight» entsprechende Stellen (Überschriften) hervorgehoben werden. 

WAVE: Web Accessibility Evaluation Tool

Die WAVE-Browsererweiterung kann den Browsern Google Chrome, Mozilla Firefox oder Microsoft Edge hinzugefügt werden. Es ist kein Download erforderlich, die Extension läuft komplett im Browser. Achtung, diese ist nicht zu verwechseln mit dem Wave-Browser, der häufig als sicherheitskritisch eingestuft wird.

Nach Hinzufügen der Browsererweiterung kann eine URL eingegeben werden. Danach startet WAVE automatisch die Überprüfung dieser Website.

Im aktiven Modus der WAVE-Erweiterung erscheint links neben der geöffneten Website das WAVE-Fenster. Unterhalb des WAVE-Logos kann durch Hin- und Herschieben des Schalters «Styles» die Formatvorlage der besuchten Website ein- und ausgeblendet werden. In der folgenden Abbildung ist die WAVE-Browsererweiterung aktiv, die Formatvorlagen sind eingeschaltet:

Webseite mit aktivierter WAVE-Browsererweiterung. Weitere Informationen im Fliesstext.
Webseite mit aktivierter WAVE-Browsererweiterung
Beschreibung der Abbildung «Webseite mit aktivierter WAVE-Browsererweiterung»

Abgebildet ist ein Ausschnitt der Homepage der Hochschule für Heilpädagogik, HfH. In der linken Bildhälfte ist die WAVE-Browsererweiterung sichtbar. In diesem Kasten sind unterhalb des WAVE-Logos und des oben beschriebenen Schalters «Styles» mehrere Rubriken dargestellt. Diese sind von links nach rechts: «Summary», «Details», «Reference», «Order», «Structure» und «Contrast». In der Abbildung ist die «Summary» aktiv. Darin werden sechs verschiedene Kategorien dargestellt:

  • Oben links die Fehlermeldungen (Errors) und oben rechts die Kontrastprobleme (Contrast Errors). Beide sind rot dargestellt und weisen in diesem Beispiel die Zahl 0 auf.
  • Darunter folgen 6 Hinweise (Alerts) und 31 Features (Merkmale).
  • Zuunterst sind die Kategorien Structural Elements (Strukturelemente) mit 148 und ARIA mit 514 aufgeführt.

Unterhalb dieser sechs Kategorien befindet sich der Button View details.

In der hier aktiven Rubrik «Zusammenfassung» werden sechs verschiedene Kategorien dargestellt. Die rot dargestellten Fehlermeldungen und Kontrastprobleme sollten wo immer möglich überprüft und bei Bedarf korrigiert werden. Die Hinweise sind zu überprüfen. Die weiteren Punkte dienen der allgemeinen Information zum Aufbau der Webseite und stellen nicht grundsätzlich Barrierefreiheitsprobleme dar.

Unter der Rubrik «Details» sind mehr Informationen ersichtlich. Die einzelnen Fehlermeldungen werden als einzelne Icons dargestellt, wie die folgende Abbildung zeigt:

Webseite mit aktivierter WAVE-Browsererweiterung, Ansicht der Detail-Rubrik. Weitere Informationen im Fliesstext.
Webseite mit aktivierter WAVE-Browsererweiterung, Ansicht der Detail-Rubrik
Beschreibung der Abbildung «Webseite mit aktivierter WAVE-Browsererweiterung, Ansicht der Rubrik «Details»

Abgebildet ist ein Ausschnitt der Homepage der Hochschule für Heilpädagogik, HfH. In der linken Bildhälfte ist die aktivierte WAVE-Browsererweiterung sichtbar, hier mit der angewählten Kategorie «Details». Die aufgeführten 6 Hinweise werden als Icons dargestellt und in vier Kategorien gefasst.

  • Missing first level heading: Ein Icon
  • Possible heading: Ein Icon
  • Redundanter Link: Zwei Icons
  • Nonscript element: Zwei Icons

Mit Klick auf das Icon einer Fehlermeldung (Error), Warnung (Alert) etc. wird das Problem an der entsprechenden Stelle auf der Website angezeigt (das Icon blinkt). Durch Anwählen dieses blinkenden Icons erscheint eine detaillierte Problembeschreibung.

Weitere Informationen sowie eine Einführungsvideo sind unter WAVE Help zu finden.