Barrierefreiheitstools und unterstützende Technologien

Lassen Sie uns einen Blick auf die Tools werfen, die bei der Implementierung von barrierefreien Websites und der Behebung von Barrierefreiheitsproblemen verwendet werden können.

Ihr Inhalt sollte in seiner Quellreihenfolge logisch sinnvoll sein – Sie können ihn später jederzeit mit CSS an die gewünschte Stelle platzieren, aber Sie sollten die Quellreihenfolge von Anfang an richtig festlegen.

Als Test können Sie das CSS einer Website deaktivieren und sehen, wie verständlich sie ohne CSS ist. Sie könnten dies manuell tun, indem Sie einfach das CSS aus Ihrem Code entfernen, aber der einfachste Weg ist die Verwendung von Browserfunktionen, zum Beispiel:

• Firefox: Wählen Sie im Hauptmenü Ansicht > Seitenstil > Kein Stil.
• Safari: Wählen Sie im Hauptmenü Entwickeln > Stile deaktivieren (um das Menü Entwickeln zu aktivieren, wählen Sie Safari > Einstellungen > Erweitert > Menü „Entwickeln“ in der Menüleiste anzeigen).
• Chrome: Installieren Sie die Web Developer Toolbar-Erweiterung, starten Sie dann den Browser neu. Klicken Sie auf das Erscheinungsbild-Zahnrad, das angezeigt wird, und wählen Sie dann CSS > Alle Stile deaktivieren.
• Edge: Wählen Sie im Hauptmenü Ansicht > Stil > Kein Stil.

Bei der Auswahl eines Farbschemas für Ihre Website sollten Sie sicherstellen, dass sich die Textfarbe (Vordergrund) gut von der Hintergrundfarbe abhebt. Ihr Design mag cool aussehen, ist jedoch nutzlos, wenn Menschen mit Sehbehinderungen wie Farbenblindheit Ihren Inhalt nicht lesen können. Verwenden Sie ein Tool wie WebAIMs Color Contrast Checker, um zu überprüfen, ob Ihr Schema ausreichend kontrastiert.

Ein weiterer Tipp ist, sich nicht ausschließlich auf Farbe für Informationen oder Hinweise zu verlassen, da dies für diejenigen, die die Farbe nicht sehen können, nicht gut ist. Anstatt zum Beispiel benötigte Formularfelder rot zu markieren, kennzeichnen Sie sie zusätzlich mit einem Sternchen in Rot.

Es gibt eine Reihe von Prüfungswerkzeugen, in die Sie Ihre Webseiten einspeisen können. Sie werden sie überprüfen und eine Liste der auf der Seite vorhandenen Barrierefreiheitsprobleme zurückgeben. Schauen wir uns ein Beispiel an, indem wir Wave, ein Online-Accessibility-Testtool, verwenden, das eine Webadresse akzeptiert und eine annotierte Ansicht dieser Seite mit hervorgehobenen Barrierefreiheitsproblemen zurückgibt.

1. Gehen Sie zur Wave-Startseite.
2. Geben Sie die URL unseres bad-semantics.html Beispiels in das Textfeld ein, das sich in der Nähe des oberen Randes der Seite befindet. Drücken Sie dann die Eingabe- oder Klick/Tap-Taste auf dem Pfeil am rechten Ende des Eingabefeldes.
3. Die Seite sollte mit einer Beschreibung der Barrierefreiheitsprobleme antworten. Klicken Sie auf die angezeigten Symbole, um weitere Informationen zu jedem der von Wave identifizierten Probleme zu sehen.

Andere Prüfungswerkzeuge, die es sich lohnt, auszuprobieren:

• Firefox Accessibility Inspector
• ANDI Bookmarklet
• Google Lighthouse Accessibility Audits

Das Deque's aXe Tool geht ein bisschen weiter als die oben erwähnten Prüfungswerkzeuge. Wie die anderen überprüft es Seiten und gibt Barrierefreiheitsfehler zurück. Die nützlichste Form ist wahrscheinlich die Browsererweiterungen:

• aXe für Chrome
• aXe für Firefox

Diese fügen den Entwicklerwerkzeugen des Browsers einen Barrierefreiheits-Tab hinzu. Zum Beispiel haben wir die Firefox-Version installiert und dann genutzt, um unser bad-table.html Beispiel zu prüfen. Wir erhielten folgende Ergebnisse:

aXe kann auch mithilfe von npm installiert und mit Task-Runnern wie Grunt und Gulp, Automatisierungsframeworks wie Selenium und Cucumber, Testing-Frameworks wie Jasmine und mehr integriert werden (siehe erneut die Hauptseite von aXe für Details).

Es lohnt sich auf jeden Fall, mit einem Screenreader zu testen, um sich daran zu gewöhnen, wie stark sehbehinderte Menschen das Web nutzen. Es stehen mehrere Screenreader zur Verfügung:

• Einige sind kostenpflichtige kommerzielle Produkte, wie JAWS (Windows).
• Einige sind kostenlose Produkte, wie NVDA (Windows), ChromeVox (Chrome, Windows und macOS) und Orca (Linux).
• Einige sind im Betriebssystem integriert, wie VoiceOver (macOS und iOS), ChromeVox (auf Chromebooks) und TalkBack (Android).

Im Allgemeinen sind Screenreader separate Apps, die auf dem Host-Betriebssystem laufen und nicht nur Webseiten, sondern auch Texte in anderen Apps lesen können. Das ist nicht immer der Fall (ChromeVox ist eine Browser-Erweiterung), aber normalerweise neigen Screenreader dazu, auf etwas unterschiedliche Weise zu agieren und unterschiedliche Steuerungen zu haben, sodass Sie die Dokumentation für Ihren gewählten Screenreader konsultieren müssen, um alle Details zu erfahren – allerdings arbeiten sie im Wesentlichen auf dieselbe Art und Weise.

Gehen wir einige Tests mit ein paar unterschiedlichen Screenreadern durch, um Ihnen eine allgemeine Vorstellung davon zu geben, wie sie funktionieren und wie Sie mit ihnen testen können.

VoiceOver (VO) ist kostenlos in Ihrem Mac/iPhone/iPad enthalten, sodass es nützlich für Tests auf Desktop/Mobilgeräten ist, wenn Sie Apple-Produkte verwenden. Wir werden VO unter macOS auf einem MacBook Pro testen.

Um es zu aktivieren, drücken Sie Cmd + F5. Wenn Sie VO noch nie verwendet haben, wird ein Willkommensbildschirm angezeigt, auf dem Sie wählen können, ob Sie VO starten oder nicht und ein recht nützliches Tutorial durchlaufen können, um die Verwendung zu lernen. Um es zu deaktivieren, drücken Sie erneut Cmd + F5.

Wenn VO aktiviert ist, sieht die Anzeige größtenteils gleich aus, aber Sie sehen ein schwarzes Feld unten links auf dem Bildschirm, das Informationen über das derzeit von VO ausgewählte Element enthält. Die aktuelle Auswahl wird ebenfalls mit einem schwarzen Rahmen hervorgehoben – dieses Highlight wird als VO-Cursor bezeichnet.

Um VO zu verwenden, werden Sie viel Gebrauch vom „VO-Modifikator“ machen – dies ist eine Taste oder Tastenkombination, die Sie zusätzlich zu den tatsächlichen VO-Tastenkombinationen verwenden müssen, um sie zum Funktionieren zu bringen. Die Verwendung eines Modifikators wie dieser ist bei Screenreadern üblich, um zu verhindern, dass ihre Befehle mit anderen Befehlen in Konflikt geraten. Im Fall von VO kann der Modifikator entweder die Feststelltaste oder Strg + Option sein.

VO verfügt über viele Tastenkombinationen, und wir werden sie hier nicht alle auflisten. Die grundlegenden, die Sie für das Testen von Webseiten benötigen, sind in der folgenden Tabelle aufgeführt. In den Tastenkombinationen bedeutet „VO“ „der VoiceOver-Modifikator“.

Diese Menge an Befehlen scheint viel zu sein, aber es ist nicht so schlimm, wenn man sich daran gewöhnt, und VO gibt Ihnen regelmäßig Erinnerungen daran, welche Befehle an bestimmten Stellen zu verwenden sind. Probieren Sie VO jetzt aus; Sie können dann mit einigen unserer Beispiele im Abschnitt Screenreader-Testen weitermachen.

NVDA ist nur für Windows verfügbar und Sie müssen es installieren.

1. Laden Sie es von nvaccess.org herunter. Sie können wählen, ob Sie eine Spende machen oder es kostenlos herunterladen möchten; Sie müssen außerdem Ihre E-Mail-Adresse angeben, bevor Sie es herunterladen können.
2. Nach dem Herunterladen installieren Sie es – doppelklicken Sie auf die Installationsdatei, akzeptieren Sie die Lizenz und folgen Sie den Anweisungen.
3. Um NVDA zu starten, doppelklicken Sie auf die Programmdatei/Verknüpfung oder verwenden Sie die Tastenkombination Strg + Alt + N. Beim Start sehen Sie das NVDA-Willkommensdialogfeld. Hier können Sie aus ein paar Optionen auswählen und dann die Schaltfläche OK drücken, um loszulegen.

NVDA ist nun auf Ihrem Computer aktiv.

Um NVDA zu verwenden, werden Sie viel Gebrauch vom „NVDA-Modifikator“ machen – dies ist eine Taste, die Sie zusätzlich zu den tatsächlichen NVDA-Tastenkombinationen verwenden müssen. Die Verwendung eines Modifikators wie dieser ist bei Screenreadern üblich, um zu verhindern, dass ihre Befehle mit anderen Befehlen in Konflikt geraten. Im Fall von NVDA kann der Modifikator entweder Einfügen (Standard) oder Feststelltaste sein (kann durch Markieren des ersten Kontrollkästchens im NVDA-Willkommensdialog vor dem Drücken von OK ausgewählt werden).

NVDA verfügt über viele Tastenkombinationen, und wir werden sie hier nicht alle auflisten. Die grundlegenden, die Sie für das Testen von Webseiten benötigen, sind in der folgenden Tabelle aufgeführt. In den Tastenkombinationen bedeutet „NVDA“ „der NVDA-Modifikator“.

Nun, da Sie sich an die Verwendung eines Screenreaders gewöhnt haben, möchten wir, dass Sie ihn verwenden, um einige schnelle Barrierefreiheitstests durchzuführen, um eine Vorstellung davon zu bekommen, wie Screenreader mit guten und schlechten Webseitenmerkmalen umgehen:

• Schauen Sie sich good-semantics.html an, und beachten Sie, wie die Überschriften vom Screenreader gefunden werden und zur Navigation genutzt werden können. Schauen Sie sich nun bad-semantics.html an und beachten Sie, wie der Screenreader keine dieser Informationen erhält. Stellen Sie sich vor, wie ärgerlich dies bei dem Versuch wäre, eine wirklich lange Seite mit Text zu navigieren.
• Schauen Sie sich good-links.html an und beachten Sie, wie sie im Kontext sinnvoll sind. Dies ist nicht der Fall bei bad-links.html – sie sind alle einfach nur "hier klicken".
• Schauen Sie sich good-form.html an und beachten Sie, wie die Formulareingaben durch ihre Etiketten beschrieben werden, da wir <label>-Elemente ordnungsgemäß verwendet haben. In bad-form.html erhalten sie ein unhilfreiches Etikett wie "leer".
• Schauen Sie sich unser punk-bands-complete.html Beispiel an und sehen Sie, wie der Screenreader in der Lage ist, Spalten und Reihen von Inhalt zu assoziieren und sie alle zusammen zu lesen, da wir Kopfzeilen ordnungsgemäß definiert haben. In bad-table.html können keine der Zellen überhaupt assoziiert werden. Beachten Sie, dass sich NVDA etwas seltsam zu verhalten scheint, wenn Sie nur eine einzelne Tabelle auf einer Seite haben; Sie könnten stattdessen WebAIMs Tabellentestseite ausprobieren.
• Schauen Sie sich das WAI-ARIA Live-Regions-Beispiel an, das wir früher gesehen haben, und beachten Sie, wie der Screenreader den ständig aktualisierten Abschnitt weiterlesen wird, wenn er aktualisiert wird.

Wie oben erwähnt, können Sie sich nicht allein auf automatisierte Tools verlassen, um Barrierefreiheitsprobleme auf Ihrer Website zu bestimmen. Es wird empfohlen, dass Sie bei der Erstellung Ihres Testplans, wenn möglich, einige Barrierefreiheits-Benutzergruppen einbeziehen. Versuchen Sie, einige Screenreader-Benutzer, einige reine Tastaturnutzer, einige nicht-hörende Benutzer und vielleicht andere Gruppen einzubeziehen, die Ihren Anforderungen entsprechen.

Es gibt viele andere Arten von unterstützenden Technologien, wie zum Beispiel:

• Große Text- oder Brailletastaturen.
• Alternative Zeigegeräte wie Trackballs, Joysticks und Touchpads.
• Bildschirmvergrößerer.
• Spracherkennungssoftware.
• Schaltersteuerungen.

Die folgende Liste bietet Ihnen eine Checkliste, der Sie folgen können, um sicherzustellen, dass Sie das empfohlene Barrierefreiheitstesting für Ihr Projekt durchgeführt haben:

1. Stellen Sie sicher, dass Ihr HTML so semantisch korrekt wie möglich ist. Validieren es ist ein guter Anfang, ebenso wie die Verwendung eines Prüfungstools.
2. Überprüfen Sie, ob Ihr Inhalt Sinn ergibt, wenn das CSS deaktiviert ist.
3. Stellen Sie sicher, dass Ihre Funktionalität mit der Tastatur zugänglich ist (siehe Verwenden Sie nach Möglichkeit semantische UI-Steuerelemente für weitere Details). Testen Sie die Verwendung von Tab, Return/Enter usw.
4. Stellen Sie sicher, dass Ihr nicht-textlicher Inhalt Textalternativen hat. Ein Prüfungstool ist gut, um solche Probleme zu erkennen.
5. Stellen Sie sicher, dass der Farbkontrast Ihrer Website akzeptabel ist, durch die Verwendung eines geeigneten Prüfungstools.
6. Stellen Sie sicher, dass versteckter Inhalt von Screenreadern sichtbar ist.
7. Stellen Sie sicher, dass die Funktionalität, soweit möglich, auch ohne JavaScript nutzbar ist.
8. Verwenden Sie ARIA, um die Barrierefreiheit dort zu verbessern, wo es angemessen ist.
9. Lassen Sie Ihre Website durch ein Prüfungstool laufen.
10. Testen Sie es mit einem Screenreader.
11. Schließen Sie eine Barrierefreiheitspolitik/-erklärung irgendwo auf Ihrer Website ein, um zu erklären, was Sie getan haben.

Hoffentlich hat Ihnen dieser Artikel eine Vorstellung davon gegeben, welche Tools Sie verwenden können, um Barrierefreiheitsprobleme zu beheben, sowie über die unterstützenden Technologien, die von Menschen mit Behinderungen genutzt werden, um auf das Internet zuzugreifen.

Im nächsten Artikel schauen wir, wie man barrierefreies HTML schreibt.

• Zurück
• Übersicht: Barrierefreiheit im Web
• Weiter