Barrierefreiheitstools und unterstützende Technologien

Lassen Sie uns einen Blick auf die Werkzeuge werfen, die Sie bei der Implementierung barrierefreier Websites und der Behebung von Barrierefreiheitsproblemen nutzen können.

Ihr Inhalt sollte in seiner Quellreihenfolge logisch Sinn ergeben – Sie können ihn später immer noch mit CSS nach Belieben platzieren, aber Sie sollten die Quellreihenfolge von Anfang an richtig festlegen.

Als Test können Sie das CSS einer Website deaktivieren und prüfen, wie verständlich sie ohne CSS ist. Sie könnten dies manuell tun, indem Sie das CSS einfach aus Ihrem Code entfernen, aber der einfachste Weg ist die Verwendung von Browser-Funktionen, 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 > Entwicklermenü in Menüleiste anzeigen).
• Chrome: Installieren Sie die Erweiterung Web Developer Toolbar, starten Sie den Browser neu, klicken Sie auf das Zahnradsymbol und wählen Sie CSS > Alle Stile deaktivieren.
• Edge: Wählen Sie im Hauptmenü Ansicht > Stil > Kein Stil.

Wenn Sie ein Farbschema für Ihre Website wählen, sollten Sie sicherstellen, dass die Textfarbe (Vordergrund) gut mit der Hintergrundfarbe kontrastiert. Ihr Design mag cool aussehen, aber es nützt nichts, wenn Menschen mit Sehbehinderungen wie Farbenblindheit Ihre Inhalte nicht lesen können. Nutzen Sie ein Werkzeug wie WebAIM's Farbkontrastprüfer, um zu überprüfen, ob Ihr Schema ausreichend kontrastiert.

Ein weiterer Tipp ist, sich nicht nur auf Farbe für Wegweiser/Informationen zu verlassen, da dies für diejenigen, die keine Farbe sehen können, nicht hilfreich ist. Anstatt z.B. erforderliche Formularfelder rot zu markieren, markieren Sie sie mit einem Sternchen und in Rot.

Es gibt eine Reihe von Prüftools, in die Sie Ihre Webseiten einspeisen können. Sie analysieren die Seiten und geben eine Liste der vorhandenen Barrierefreiheitsprobleme auf der Seite zurück. Lassen Sie uns ein Beispiel ansehen, indem wir Wave, ein Online-Barrierefreiheitsprüfungstool, das eine Webadresse akzeptiert und eine annotierte Ansicht dieser Seite mit hervorgehobenen Barrierefreiheitsproblemen zurückgibt, verwenden.

1. Gehen Sie zur Wave-Startseite.
2. Geben Sie die URL unseres Beispiels bad-semantics.html in das Text-Eingabefeld nahe der Seite ein. Drücken Sie dann die Eingabetaste oder klicken/tippen Sie auf den Pfeil am rechten Rand des Eingabefeldes.
3. Die Seite sollte mit einer Beschreibung der Barrierefreiheitsprobleme antworten. Klicken Sie auf die angezeigten Symbole, um weitere Informationen zu den von Wave ermittelten Problemen zu erhalten.

Andere Prüftools, die sich lohnen, anzusehen:

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

Deque's aXe tool geht etwas weiter als die oben genannten Prüftools. Wie die anderen überprüft es Seiten und gibt Barrierefreiheitsfehler zurück. Seine nützlichste Form sind wahrscheinlich die Browser-Erweiterungen:

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

Diese fügen den Entwicklertools des Browsers einen Barrierefreiheitsreiter hinzu. Zum Beispiel installierten wir die Firefox-Version und verwendeten sie, um unser Beispiel bad-table.html zu prüfen. Wir erhielten die folgenden Ergebnisse:

aXe lässt sich auch mit npm installieren und kann in Task-Runner wie Grunt und Gulp, Automatisierungs-Frameworks wie Selenium und Cucumber, Unit-Testing-Frameworks wie Jasmine, und mehr integriert werden (siehe hierzu auch die Haupt-AXe-Seite für weitere 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 gibt eine Reihe von Screenreadern:

• 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).

Screenreader sind im Allgemeinen eigenständige Apps, die im Host-Betriebssystem laufen und nicht nur Webseiten, sondern auch Text in anderen Apps lesen können. Dies ist nicht immer der Fall (ChromeVox ist eine Browsererweiterung), aber normalerweise neigen Screenreader dazu, sich auf leicht unterschiedliche Weise zu verhalten und andere Steuerungen zu haben, sodass Sie die Dokumentation Ihres gewählten Screenreaders konsultieren müssen, um alle Details zu erfahren – sie funktionieren im Grunde alle ähnlich.

Lassen Sie uns einige Tests mit ein paar verschiedenen Screenreadern durchgehen, um Ihnen eine allgemeine Vorstellung davon zu geben, wie sie funktionieren und wie man mit ihnen testet.

VoiceOver (VO) ist kostenlos mit Ihrem Mac/iPhone/iPad erhältlich und nützlich für Tests auf Desktop und Mobilgerät, wenn Sie Apple-Produkte verwenden. Wir werden es auf macOS auf einem MacBook Pro testen.

Um es zu aktivieren, drücken Sie Cmd + F5. Wenn Sie VO noch nicht verwendet haben, wird Ihnen ein Begrüßungsbildschirm angezeigt, bei dem Sie auswählen können, ob Sie VO starten oder nicht, und ein sehr nützliches Tutorial durchlaufen können, um zu lernen, wie man es benutzt. Um es wieder auszuschalten, drücken Sie erneut Cmd + F5.

Wenn VO aktiviert ist, sieht die Anzeige im Wesentlichen gleich aus, aber Sie sehen einen schwarzen Kasten unten links auf dem Bildschirm mit Informationen darüber, was VO derzeit ausgewählt hat. Die aktuelle Auswahl wird auch hervorgehoben, mit einem schwarzen Rahmen – diese Hervorhebung ist als VO-Cursor bekannt.

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-Tastaturkürzeln drücken müssen, damit sie funktionieren. Die Verwendung eines solchen Modifikators ist bei Screenreadern üblich, um ihre Befehle davor zu bewahren, mit anderen Befehlen zu kollidieren. Im Fall von VO kann der Modifikator entweder CapsLock oder Strg + Option sein.

VO hat viele Tastaturbefehle, und wir werden nicht alle hier auflisten. Die grundlegendsten Befehle, die Sie für Websitetests benötigen, sind in der folgenden Tabelle aufgeführt. In den Tastaturkürzeln bedeutet "VO" "der VoiceOver-Modifikator".

Das klingt nach vielen Befehlen, ist aber nicht so schlimm, wenn Sie sich daran gewöhnt haben, und VO gibt Ihnen regelmäßig Erinnerungen, welche Befehle an bestimmten Stellen verwendet werden sollen. Probieren Sie VO jetzt aus; Sie können dann einige unserer Beispiele im Abschnitt Screenreader-Tests ausprobieren.

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 ihnen auch Ihre E-Mail-Adresse geben, bevor Sie es herunterladen können.
2. Sobald es heruntergeladen wurde, 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 das Tastaturkürzel Strg + Alt + N. Sie sehen den NvDA-Begrüßungsdialog beim Start. Hier können Sie aus ein paar Optionen auswählen und dann auf die Schaltfläche OK klicken, um fortzufahren.

NVDA ist jetzt 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-Tastaturkürzeln drücken müssen, damit sie funktionieren. Die Verwendung eines solchen Modifikators ist bei Screenreadern üblich, um ihre Befehle davor zu bewahren, mit anderen Befehlen zu kollidieren. Im Fall von NVDA kann der Modifikator entweder Einfügen (der Standard) oder CapsLock (kann durch Aktivieren der ersten Checkbox im NVDA-Begrüßungsdialog vor dem Drücken von OK gewählt werden).

NVDA hat viele Tastaturbefehle, und wir werden nicht alle hier auflisten. Die grundlegenden Befehle, die Sie für Websitetests benötigen, sind in der folgenden Tabelle aufgeführt. In den Tastaturkürzeln bedeutet "NVDA" "der NVDA-Modifikator".

Jetzt, da Sie sich mit der Verwendung eines Screenreaders vertraut gemacht haben, möchten wir, dass Sie ihn verwenden, um einige kurze Barrierefreiheitsprüfungen durchzuführen, um eine Vorstellung davon zu bekommen, wie Screenreader mit guten und schlechten Webseitenmerkmalen umgehen:

• Schauen Sie sich good-semantics.html an und achten Sie darauf, wie die Überschriften vom Screenreader gefunden werden und zur Navigation genutzt werden können. Nun schauen Sie sich bad-semantics.html an und beachten Sie, wie der Screenreader all diese Informationen nicht erhält. Stellen Sie sich vor, wie ärgerlich dies wäre, wenn man versucht, eine wirklich lange Seite mit Text zu navigieren.
• Schauen Sie sich good-links.html an und beachten Sie, wie sie auch aus dem Kontext heraus Sinn machen. Dies ist bei bad-links.html nicht der Fall – sie alle sind nur "hier klicken".
• Schauen Sie sich good-form.html an und beachten Sie, wie die Formulareingaben mit ihren Labels beschrieben werden, weil wir <label>-Elemente richtig verwendet haben. In bad-form.html erhalten sie ein unhilfreiches Label wie "leer".
• Schauen Sie sich unser Beispiel punk-bands-complete.html an und sehen Sie, wie der Screenreader in der Lage ist, Spalten und Zeilen von Inhalten zuzuordnen und sie alle zusammenzulesen, weil wir die Kopfzeilen richtig definiert haben. In bad-table.html können keine der Zellen zugeordnet werden. Beachten Sie, dass NVDA etwas seltsam scheint, wenn Sie nur eine einzige Tabelle auf einer Seite haben; Sie könnten versuchen, WebAIMs Tabelle-Testseite stattdessen zu testen.
• Sehen Sie sich das frühere WAI-ARIA Live-Regionen-Beispiel an und beachten Sie, wie der Screenreader kontinuierlich den ständig aktualisierten Abschnitt liest, während er aktualisiert wird.

Wie oben erwähnt, können Sie sich nicht auf automatisierte Werkzeuge allein verlassen, um Barrierefreiheitsprobleme auf Ihrer Website zu bestimmen. Es wird empfohlen, dass Sie bei der Erstellung Ihres Testplans, sofern möglich, einige Barrierefreiheitsanwendergruppen einbeziehen. Versuchen Sie, einige Screenreader-Benutzer, einige reine Tastaturbenutzer, einige nicht hörende Benutzer und vielleicht auch andere Gruppen einzubeziehen, je nach Ihren Anforderungen.

Es gibt viele andere Arten von unterstützender Technologie, wie z.B.:

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

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

1. Stellen Sie sicher, dass Ihr HTML so semantisch korrekt wie möglich ist. Die Validierung ist ein guter Anfang, ebenso wie die Verwendung eines Prüftools.
2. Überprüfen Sie, ob Ihr Inhalt Sinn macht, wenn das CSS deaktiviert ist.
3. Stellen Sie sicher, dass Ihre Funktionalität tastaturzugänglich ist (siehe UI-Steuerelemente für mehr Details). Testen Sie das mit Tabulator, Return/Enter usw.
4. Stellen Sie sicher, dass Ihre nicht-textuellen Inhalte Textalternativen haben. Ein Prüftool ist gut geeignet, um solche Probleme zu erkennen.
5. Stellen Sie sicher, dass der Farbkontrast Ihrer Website akzeptabel ist, unter Verwendung eines geeigneten Prüfwerkzeugs.
6. Stellen Sie sicher, dass versteckter Inhalt für Screenreader sichtbar ist.
7. Stellen Sie sicher, dass die Funktionalität nach Möglichkeit ohne JavaScript nutzbar ist.
8. Verwenden Sie ARIA, um die Barrierefreiheit dort zu verbessern, wo es angemessen ist.
9. Lassen Sie Ihre Seite durch ein Prüftool laufen.
10. Testen Sie sie mit einem Screenreader.
11. Fügen Sie irgendwo auffindbar auf Ihrer Website eine Erklärung zur Barrierefreiheit hinzu, um zu beschreiben, was Sie unternommen haben.

Hoffentlich hat Ihnen dieser Artikel eine Vorstellung davon gegeben, welche Arten von Werkzeugen Sie zur Lösung von Barrierefreiheitsproblemen nutzen können und welche unterstützenden Technologien von Menschen mit Behinderungen zur Nutzung des Internets verwendet werden.

Im nächsten Artikel werden wir uns ansehen, wie man barrierefreies HTML schreibt.

• Zurück
• Übersicht: Barrierefreiheit
• Weiter