Bookmarklets – kleine Helferlein zum Test auf Barrierefreiheit

Tobias Aubele

Dr. Tobias Aubele ist Professor für E-Commerce an der Hochschule für angewandte Wissenschaften Würzburg-Schweinfurt und Berater für Webcontrolling (u. a. „Deutschlands bester Conversion Optimierer 2018“ sowie „CRO Practitioner of the year 2020“). Er lehrt das Themenumfeld Conversion-Optimierung, Usability und Webanalytics im Studiengang E-Commerce. Zuvor war er viele Jahre in einem internationalen Multi-Channel-Unternehmen in diversen Führungspositionen tätig, zuletzt als Bereichsleiter E-Commerce.

Mehr von diesem Autor Artikel als PDF laden

+ www.websiteboosting.de bei der Google-Suche bevorzugen

Neben Browser-Plug-ins wie Silktide Accessibility Checker bieten kleine JavaScript-Anweisungen (Bookmarklets) die Möglichkeit, Aspekte der Barrierefreiheit einer Website live zu testen. Einmalig als Lesezeichen im Browser hinterlegt, können Tests live durchgeführt werden – sowohl auf Test- als auch auf Produktivseiten.

Ein Bookmarklet ist ein kompaktes JavaScript, das durch Anklicken (zum Beispiel als Lesezeichen) direkt auf der aktuellen Website im Browser ausgeführt wird, um bestimmte Aufgaben zu erledigen oder zusätzliche Funktionen bereitzustellen. Stellen Sie sich vor, Sie möchten überprüfen, ob die Tabellen auf Ihrer Website korrekt ausgezeichnet wurden. Eine Tabelle sollte von einem Screenreader sinnvoll vorgelesen werden, damit die Komplexität von Tabellen (Information ist eine Kombination aus Spalten und Zeilen) nicht noch anspruchsvoller oder gar zur Barriere wird. Damit eine Tabelle für Screenreader verständlich wird, müssen im HTML die Elemente einer Tabelle (caption,, th, tr. td etc.) ausgezeichnet werden. Die korrekte Kennzeichnung lässt sich direkt im Quellcode der Webseite prüfen oder bequem mit einem Bookmarklet anzeigen. Abbildung 1 zeigt die Darstellung einer Tabelle mit Ergänzung (in Gelb dargestellt) um die entsprechenden HTML-Elemente durch das Bookmarklet „Tables“.

Abbildung 1: Prüfung einer Tabelle mittels Bookmarklet (Quelle und weitere Informationen: einfach.st/ifbarr)

Unter einfach.st/tollwerk finden sich eine Vielzahl von Bookmarklets sowie Verlinkungen auf weitere Quellen (siehe Abbildung 2). Die jeweiligen Verlinkungen (wie „Tables“) sind JavaScript-Codes, die Sie dann auf jeder Webseite verwenden können.

Abbildung 2: Bookmarklets für Tests auf Barrierefreiheit (Quelle: einfach.st/tollwerk)

So wenden Sie das Bookmarklet an:

1. Bookmarklet hinzufügen: Ziehen Sie den Link des Bookmarklets per Drag and Drop in die Lesezeichenleiste. Alternativ erstellen Sie ein neues Lesezeichen über die Lesezeichenverwaltung Ihres Browsers und tragen dort den entsprechenden JavaScript-Code in das URL-Feld ein.

2. Bookmarklet verwenden: Rufen Sie die Website auf, die Sie auf Barrierefreiheit prüfen möchten, und klicken Sie auf das gespeicherte Lesezeichen. Dadurch wird der JavaScript-Code ausgeführt und die gewünschten Informationen werden angezeigt (wie in Abbildung 1).

In diesem Sinne: Erweitern Sie Ihren Browser um diverse Bookmarklets und prüfen Sie einfach Ihre Webseiten auf Barrierefreiheit. Im Idealfall bevor diese produktiv geschaltet werden.