Für Web-Editor:innen
Nützliche Prüftools
Tools zur Überprüfung einiger Barrieren
Viele potenzielle Barrieren lassen sich nicht einfach per «Augenmass» aufdecken. Auf dieser Seite findet sich eine Übersicht einiger praktischer Tools zur Ermittlung häufiger Barrieren.
Überprüfung der Webseitenstruktur / Tags
Bookmarklet «Show content structure»
Dieses Bookmarklet dient dem Sichtbarmachen der semantischen Struktur auf einer Webseite (HTML-Tags). Wenn das Bookmarklet aktiviert ist, wird die sematische Auszeichnung einer Webseite so dargestellt:
Der Screenshot zeigt beispielhaft die Funktionsweise des Bookmarklets an der Seite Master Psychomotoriktherapie. Der erste Textbaustein «Auf einen Blick» ist mit <P> am Anfang des Textes und </P> am Ende des Textes als Paragraf gekennzeichnet. Die Titel sind in korrekter, aufeinanderfolgender Reihenfolge mit den Tags <h1> («Master Psychomotoriktherapie»), <h2> («Kontakt» und «Was macht den Masterstudiengang Psychomotoriktherapie an der HfH aus?») und <h3> («Olivia Gasser-Haas, Dr. phil.») zu erkennen. Links sind mit dem Tag <a> hinterlegt und als Liste aufgeführt.
Installation
- Gehe auf bookmarklet.html.
- Das Bookmarklet kann ganz einfach mittels Drag&Drop in die Favoritenleiste eingefügt werden:
Wenn das nicht geht:
- Gehe auf bookmarklet.html.
- Füge den Link unter «Show content structure» als Favorit / Lesezeichen hinzu. Hinweis: Das Lesezeichen sollte nicht auf die URL «https://www.accessibility-developer-guide.com/…» gesetzt werden, sondern auf «javascript:(function()%7Bjavascript%3A…»
Bei den gängigsten Browsern geht das so:
Chrome
- Rechtsklick auf «Show content structure»
- Klicke auf «Adresse des Links kopieren»
- Gehe auf die Webseite chrome://bookmarks oder öffne den Lesezeichen-Manager
- Gehe auf die drei Punkte rechts oben
- Füge ein neues Lesezeichen für den kopierten Link hinzu
- Speichere
Safari
- Rechtsklick auf «Show content structure»
- Klicke auf «Link kopieren»
- Gehe im Reiter «Lesezeichen» auf «Lesezeichen hinzufügen» und speichere
- Gehe im Reiter «Lesezeichen» auf «Lesezeichen bearbeiten»
- Ersetze in der Spalte «Adresse» die URL mit dem kopierten Link
Firefox
- Rechtsklick auf «Show content structure»
- Klicke auf «Lesezeichen für Link hinzufügen…»
- Speichere
Edge
- Rechtsklick auf «Show content structure»
- Klicke auf «Link kopieren»
- Gehe auf: edge://favorites/
- Füge den Link als Favorit hinzu
Anwendung
Nach dem Hinzufügen als Favorit / Lesezeichen erscheint das Bookmarklet in der Favoriten(leiste) / Lesezeichen(leiste).
- Gehe auf eine beliebige Seite.
- Klicke auf das Bookmarklet (den erstellten Favoriten / Lesezeichen). Es erscheinen die HTML-Tags der aufgerufenen Seite.
- Prüfe die semantische Logik. Hilfreich sind verschiedene umfangreiche Listen der HTML-Tags, welche im Netz zu finden sind. Zum Beispiel HTML Element Reference.
- Nach einem Refresh der Seite verschwinden die Tags.
Bookmarklet «h123»
Dieses Bookmarklet zeigt die Überschriftsstruktur neben der Webseite an. Dadurch sieht man leicht, welche Überschriften aktuell auf der gleichen Hierarchieebene sind. Zudem können z. B. versteckte Überschriften zum Vorschein gebracht werden.
Der Sreenshot zeigt beispielhaft die Funktionsweise des Bookmarklets an der Seite Master Logopädie. Durch Anwählen können versteckte Überschriften (Show hidden) und visuell versteckte Überschriften (Mark visually hidden) zum Vorschein gebracht werden. Ausserdem können über die Option «Hover-Highlight» entsprechende Stellen (Titel) hervorgehoben werden.
Installation
- Gehe auf hinderlingvolkart.github.io/h123
- Das Bookmarklet kann, wie oben (Show content strucure) gezeigt, ganz einfach mittels Drag&Drop in die Favoritenleiste eingefügt werden.
- Wenn das nicht geht: Kopiere den Link unter «h123» und füge ihn zu den Favoriten / Lesezeichen. Die Anleitung je nach Browser ist analog dem oben beschriebenen Bookmarklet «Show content structure».
Anwendung
Nach dem Hinzufügen als Favorit / Lesezeichen erscheint das Bookmarklet in der Favoriten(leiste) / Lesezeichen(leiste).
-
- Gehe auf eine beliebige Seite.
- Klicke auf das Bookmarklet (den erstellten Favoriten / Lesezeichen).
- Es werden die vom Screenreader gesehenen Überschriften angezeigt sowie versteckte aufgelistet. Beim Setzten eines Hakens auf den versteckten Überschriften erscheinen diese in der Liste.
- Nach einem Refresh der Seite verschwinden die Anzeige.
Überprüfung von Farbkontrasten
WebAIM
Nebst dem im Kapitel Kontraste beschriebenen Prüftool «CCA» kann die Kontraststärke auch ohne Installation über die Seite Contrast Checker von WebAIM beurteilt werden.
Installation
Keine. Gehe auf die Seite Contrast Checker von WebAIM. Benutze dabei nicht Firefox, da dieser Browser die Pipetten-Funktion nicht zur Verfügung stellt.
Anwendung
- Gehe auf die (Vordergrund-) Farbe (1). Klicke auf die Pipette (2). Fahre mit dem Cursor über die gewünschte Stelle um den genauen Farbcode zu ermitteln.
- Wiederhole Schritt 1 und 2 für die Hintergrundfarbe.
- Ausschlaggebend für eine ausreichende Kontraststärke ist ein «Pass» unter «AA» (3).
