Accessibility-Tools und unterstützende Technologien

Werfen wir einen Blick auf die Tools, die bei der Implementierung barrierefreier Websites und der Behebung von Barrierefreiheitsproblemen eingesetzt werden können.

Ihr Inhalt sollte in seiner Quellreihenfolge logisch sinnvoll sein – Sie können ihn später mittels CSS an die gewünschte Stelle setzen, aber Sie sollten zunächst die Quellreihenfolge richtig gestalten.

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

• Firefox: Wählen Sie im Hauptmenü Ansicht > Seitenstil > Kein Stil.
• Safari: Wählen Sie im Hauptmenü Entwickler > Stile deaktivieren (um das Menü Entwickler zu aktivieren, wählen Sie Safari > Einstellungen > Erweitert > Menü Entwickler in Menüleiste anzeigen).
• Chrome: Installieren Sie die Webentwickler-Toolbar-Erweiterung und starten Sie den Browser neu. Klicken Sie auf das Zahnradsymbol, das erscheint, 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 die Text- (Vordergrund-) Farbe gut mit der Hintergrundfarbe kontrastiert. Ihr Design mag cool aussehen, doch ist es nicht gut, wenn Menschen mit Sehbeeinträchtigungen wie Farbenblindheit Ihre Inhalte nicht lesen können. Verwenden Sie ein Tool wie den Color Contrast Checker von WebAIM, um zu überprüfen, ob Ihr Schema ausreichend kontrastiert.

Ein weiterer Tipp ist, sich nicht allein auf Farbe für Wegweiser/Informationen zu verlassen, da dies für diejenigen, die die Farben nicht sehen können, nutzlos ist. Statt erforderliche Formularfelder beispielsweise rot zu kennzeichnen, markieren Sie sie mit einem Sternchen und in Rot.

Es gibt eine Reihe von Prüfwerkzeugen, in die Sie Ihre Webseiten einfügen können. Sie werden sie analysieren und eine Liste der auf der Seite vorhandenen Barrierefreiheitsprobleme zurückgeben. Lassen Sie uns ein Beispiel betrachten, das Wave, ein Online-Accessibility-Testwerkzeug, verwendet, das eine Webadresse akzeptiert und eine annotierte Ansicht dieser Seite mit hervorgehobenen Barrierefreiheitsproblemen zurückgibt.

1. Besuchen Sie die Wave-Homepage.
2. Geben Sie im Eingabefeld in der Nähe der oberen Seite die URL unseres Beispiels bad-semantics.html ein. Drücken Sie dann die Eingabetaste oder klicken/tippen Sie den Pfeil am rechten Rand des Eingabefeldes.
3. Die Seite sollte mit einer Beschreibung der Barrierefreiheitsprobleme antworten. Klicken Sie die angezeigten Symbole an, um weitere Informationen zu den jeweiligen Problemen, die von Waves Bewertung hervorgehoben wurden, zu sehen.

Weitere Prüfungswerkzeuge, die es sich zu überprüfen lohnt:

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

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

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

Diese fügen den Entwicklerwerkzeugen des Browsers einen Barrierefreiheitstab hinzu. Zum Beispiel haben wir die Firefox-Version installiert und sie dann verwendet, um unser Beispiel bad-table.html zu überprüfen. Wir erhielten die folgenden Ergebnisse:

aXe kann auch mit npm installiert werden und in Aufgabenausführungsprogramme wie Grunt und Gulp, Automatisierungsrahmen wie Selenium und Cucumber, Unit-Testing-Frameworks wie Jasmine und andere integriert werden (sehen Sie sich für Details die Hauptseite von aXe an).

Es lohnt sich auf jeden Fall, mit einem Bildschirmleser zu testen, um sich daran zu gewöhnen, wie stark sehbehinderte Menschen das Internet nutzen. Es gibt eine Reihe von Bildschirmlesern:

• Einige sind bezahlte 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 Bildschirmleser separate Anwendungen, die auf dem Hostbetriebssystem laufen und nicht nur Webseiten, sondern auch Texte in anderen Apps lesen können. Dies ist nicht immer der Fall (ChromeVox ist eine Browser-Erweiterung), aber normalerweise neigen Bildschirmleser dazu, auf leicht unterschiedliche Weise zu handeln und haben unterschiedliche Steuerungen, sodass Sie die Dokumentation des von Ihnen gewählten Bildschirmlesers konsultieren müssen, um alle Details zu erfahren – dennoch funktionieren sie im Wesentlichen auf die gleiche Art und Weise.

Lassen Sie uns einige Tests mit ein paar unterschiedlichen Bildschirmlesern durchführen, um Ihnen einen allgemeinen Eindruck davon zu vermitteln, wie sie arbeiten und wie man mit ihnen testet.

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

Um es einzuschalten, drücken Sie Cmd + F5. Wenn Sie VO noch nie genutzt haben, erhalten Sie einen Willkommensbildschirm, auf dem Sie wählen können, ob Sie VO starten und ein wirklich nützliches Tutorial durchlaufen möchten, um zu lernen, wie man es benutzt. Um es wieder auszuschalten, drücken Sie erneut Cmd + F5.

Wenn VO eingeschaltet ist, sieht der Bildschirm weitgehend identisch aus, aber Sie sehen ein schwarzes Feld unten links auf dem Bildschirm mit Informationen darüber, was VO derzeit ausgewählt hat. Die aktuelle Auswahl wird ebenfalls hervorgehoben, mit einem schwarzen Rahmen – diese Hervorhebung wird als VO-Cursor bezeichnet.

Um VO zu verwenden, wird man den „VO-Modifikator“ häufig verwenden – dies ist eine Taste oder Tastenkombination, die zusätzlich zu den tatsächlichen VO-Tastenkombinationen gedrückt werden muss, um diese zu aktivieren. Die Verwendung eines Modifikators wie dieses ist bei Bildschirmlesern üblich, um ihre Befehle davon abzuhalten, mit anderen Befehlen in Konflikt zu geraten. Bei VO kann der Modifikator entweder CapsLock oder Strg + Option sein.

VO hat viele Tastaturbefehle, und wir werden hier nicht alle auflisten. Die Grundlegenden, die Sie für Webseitentests benötigen, sind in der folgenden Tabelle aufgeführt. In den Tastaturkurzbefehlen bedeutet „VO“ „der VoiceOver-Modifikator“.

Es scheint, dass es viele Befehle sind, aber es ist nicht so schlimm, wenn Sie sich daran gewöhnen, und VO gibt Ihnen regelmäßig Erinnerungen an die zu verwendenden Befehle an bestimmten Stellen. Spielen Sie jetzt mit VO herum; Sie können dann zu einigen unserer Beispiele im Abschnitt Bildschirmlesertest übergehen.

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 auch Ihre E-Mail-Adresse eingeben, bevor Sie es herunterladen können.
2. Nach dem Download installieren Sie es – doppelklicken Sie auf das Installationsprogramm, 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 von NVDA wird das Begrüßungsdialogfeld angezeigt. Hier können Sie einige Optionen auswählen und dann die OK-Taste drücken, um loszulegen.

NVDA ist nun auf Ihrem Computer aktiv.

Um NVDA zu benutzen, werden Sie den „NVDA-Modifikator“ häufig verwenden – dies ist eine Taste, die in Kombination mit den tatsächlichen NVDA-Tastenkombinationen gedrückt werden muss, um diese zu aktivieren. Die Nutzung eines Modifikators wie dieser ist bei Bildschirmlesern üblich, um deren Befehle davon abzuhalten, mit anderen Befehlen in Konflikt zu geraten. Bei NVDA kann der Modifikator entweder die Einfügetaste (Standard) oder CapsLock sein (kann ausgewählt werden, indem das erste Kontrollkästchen im NVDA-Begrüßungsdialog aktiviert wird, bevor Sie OK drücken).

NVDA hat viele Tastaturbefehle, und wir listen hier nicht alle auf. Die grundlegenden, die Sie für Webseitentests benötigen, sind in der folgenden Tabelle aufgeführt. In den Tastaturkürzeln bedeutet „NVDA“ „der NVDA-Modifikator“.

Nun, da Sie sich daran gewöhnt haben, einen Bildschirmleser zu verwenden, möchten wir, dass Sie ihn für schnelle Barrierefreiheitsprüfungen verwenden, um eine Vorstellung davon zu bekommen, wie Bildschirmleser mit guten und schlechten Webseiteneigenschaften umgehen:

• Schauen Sie sich good-semantics.html an und beachten Sie, wie die Überschriften vom Bildschirmleser gefunden werden und zur Navigation verwendet werden können. Schauen Sie sich nun bad-semantics.html an und beachten Sie, wie der Bildschirmleser keine dieser Informationen erhält. Stellen Sie sich vor, wie ärgerlich das wäre, wenn Sie versuchen würden, eine wirklich lange Seite voller Text zu navigieren.
• Schauen Sie sich good-links.html an und beachten Sie, wie sie aus dem Kontext heraus Sinn ergeben. Dies ist bei bad-links.html nicht der Fall – sie sind alle nur „hier klicken“.
• Schauen Sie sich good-form.html an und beachten Sie, wie die Formulareingaben durch ihre Labels beschrieben werden, da wir <label>-Elemente korrekt verwendet haben. In bad-form.html erhalten sie ein unbrauchbares Label in der Art von „leer“.
• Schauen Sie sich unser Beispiel punk-bands-complete.html an und sehen Sie, wie der Bildschirmleser in der Lage ist, Spalten und Zeilen von Inhalten zu verknüpfen und diese insgesamt vorzulesen, weil wir die Kopfzeilen korrekt definiert haben. In bad-table.html können keine der Zellen zugeordnet werden. Beachten Sie, dass NVDA etwas seltsam zu verhalten scheint, wenn Sie nur eine einzelne Tabelle auf einer Seite haben; Sie könnten stattdessen WebAIMs Tabellentestseite versuchen.
• Schauen Sie sich das bereits erwähnte Beispiel für WAI-ARIA-Live-Regionen an und beachten Sie, wie der Bildschirmleser den ständig aktualisierten Abschnitt ständig vorliest, während er sich aktualisiert.

Wie oben erwähnt, können Sie sich bei der Ermittlung von Barrierefreiheitsproblemen auf Ihrer Site nicht nur auf automatisierte Tools verlassen. Es wird empfohlen, dass Sie, wenn Sie Ihren Testplan erstellen, versuchsweise einige Benutzergruppen mit Barrierefreiheitsanforderungen einbeziehen. Versuchen Sie, einige Bildschirmleser-Nutzer, einige nur Tastatur-Nutzer, einige nicht hörende Nutzer und vielleicht auch andere Gruppen einzubeziehen, die Ihren Anforderungen entsprechen.

Viele andere Arten von unterstützender Technologie existieren, wie z.B.:

• 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 sollten, um sicherzustellen, dass Sie die empfohlenen Barrierefreiheitsprüfungen für Ihr Projekt durchgeführt haben:

1. Stellen Sie sicher, dass Ihr HTML so semantisch korrekt wie möglich ist. Validierung ist ein guter Anfang, ebenso die Verwendung eines Prüfungswerkzeugs.
2. Prüfen Sie, ob Ihre Inhalte verständlich sind, wenn das CSS deaktiviert ist.
3. Stellen Sie sicher, dass Ihre Funktionalität tastaturzugänglich ist (siehe UI-Kontrollen für weitere Details). Testen Sie mit Tab, Return/Enter usw.
4. Stellen Sie sicher, dass Ihre nicht-textlichen Inhalte Textalternativen haben. Ein Prüfungswerkzeug ist gut, um solche Probleme zu erkennen.
5. Stellen Sie sicher, dass der Farbkontrast Ihrer Website akzeptabel ist und verwenden Sie ein entsprechendes Überprüfungstool.
6. Stellen Sie sicher, dass versteckte Inhalte für Bildschirmleser zugänglich sind.
7. Stellen Sie sicher, dass die Funktionalität, soweit möglich, ohne JavaScript nutzbar ist.
8. Verwenden Sie ARIA, um die Barrierefreiheit dort zu verbessern, wo es angebracht ist.
9. Lassen Sie Ihre Website durch ein Prüfungswerkzeug laufen.
10. Testen Sie sie mit einem Bildschirmleser.
11. Fügen Sie eine Barrierefreiheitsrichtlinie/-erklärung an einem auffindbaren Ort auf Ihrer Website hinzu, um zu erklären, was Sie unternommen haben.

Hoffentlich hat Ihnen dieser Artikel eine Vorstellung von den Arten von Werkzeugen gegeben, die Sie verwenden können, um Barrierefreiheitsprobleme zu beheben und der unterstützenden Technologien, die von Menschen mit Behinderungen verwendet werden, um auf das Web zuzugreifen.

Im nächsten Artikel werden wir uns anschauen, wie man zugängliches HTML schreibt.

• Zurück
• Übersicht: Barrierefreiheit
• Weiter