Barrierefreiheitstools und unterstützende Technologien

Lassen Sie uns einen Blick auf die Tools werfen, die Sie nutzen können, um barrierefreie Websites zu implementieren und Barrierefreiheitsprobleme zu beheben.

Ihr Inhalt sollte in seiner Quelltextordnung logisch sinnvoll sein — Sie können ihn später immer mit CSS an die gewünschte Stelle setzen, aber die Quelltextordnung sollte von Anfang an stimmen.

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

• Firefox: Wählen Sie Ansicht > Seitenstil > Kein Stil im Hauptmenü.
• Safari: Wählen Sie Entwickeln > Stile deaktivieren im Hauptmenü (um das Entwickeln-Menü zu aktivieren, wählen Sie Safari > Einstellungen > Erweitert > Entwicklermenü in der Menüleiste einblenden).
• Chrome: Installieren Sie die Web Developer Toolbar-Erweiterung, dann 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 Ansicht > Stil > Kein Stil im Hauptmenü.

Bei der Auswahl eines Farbschemas für Ihre Website sollten Sie sicherstellen, dass die Textfarbe (Vordergrund) gut mit der Hintergrundfarbe kontrastiert. Ihr Design mag cool aussehen, aber es ist nicht gut, 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 Farbschema genügend Kontrast bietet.

Ein weiterer Tipp ist, sich nicht allein auf Farben für Wegweiser/Informationen zu verlassen, da dies für diejenigen, die die Farbe nicht sehen können, nicht hilfreich ist. Anstelle von rot markierten Pflichtfeldern in einem Formular markieren Sie diese mit einem Sternchen und in Rot.

Es gibt eine Reihe von Auditing-Tools, in die Sie Ihre Webseiten eingeben können. Diese werden sie überprüfen und eine Liste von vorhandenen Barrierefreiheitsproblemen auf der Seite zurückgeben. Lassen Sie uns ein Beispiel ansehen, unter Verwendung von Wave, einem Online-Barrierefreiheitstest-Tool, das eine Webadresse akzeptiert und eine annotierte Ansicht dieser Seite zurückgibt, bei der Barrierefreiheitsprobleme hervorgehoben sind.

1. Gehen Sie zur Wave-Homepage.
2. Geben Sie die URL unseres bad-semantics.html Beispiels in das Textfeld oben auf der Seite ein. Drücken Sie dann Enter oder klicken/tippen Sie auf den Pfeil am äußersten rechten Rand des Eingabefelds.
3. Die Seite sollte mit einer Beschreibung der Barrierefreiheitsprobleme antworten. Klicken Sie auf die angezeigten Symbole, um mehr Informationen zu jedem der von Wave identifizierten Probleme zu sehen.

Weitere Auditing-Tools, die es wert sind, überprüft zu werden:

• Firefox Accessibility Inspector
• ANDI Bookmarklet
• Google Lighthouse Barrierefreiheitsaudits

Deque's aXe Tool geht etwas weiter als die oben erwähnten Auditing-Tools. Wie die anderen untersucht es Seiten und gibt Barrierefreiheitsfehler zurück. In seiner nützlichsten Form sind wahrscheinlich die Browser-Erweiterungen:

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

Diese fügen den Entwickler-Tools des Browsers einen Barrierefreiheits-Tab hinzu. Zum Beispiel installierten wir die Firefox-Version und benutzten sie, um unser bad-table.html Beispiel zu prüfen. Wir erhielten folgende Ergebnisse:

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

Es lohnt sich definitiv, einen Screenreader zu testen, um sich daran zu gewöhnen, wie stark sehbehinderte Menschen das Web nutzen. Es gibt eine Reihe von Screenreadern:

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

In der Regel sind Screenreader separate Apps, die auf dem 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 Browser-Erweiterung), aber normalerweise neigen Screenreader dazu, leicht unterschiedlich zu agieren und unterschiedliche Steuerung zu haben. Sie müssen die Dokumentation Ihres gewählten Screenreaders konsultieren, um alle Details zu erhalten – wobei gesagt, sie funktionieren alle im Wesentlichen auf die gleiche Weise.

Lassen Sie uns einige Tests mit mehreren verschiedenen Screenreadern durchführen, um Ihnen eine allgemeine Vorstellung davon zu geben, wie sie funktionieren und wie man mit ihnen testet.

VoiceOver (VO) wird kostenlos mit Ihrem Mac/iPhone/iPad geliefert, daher ist es nützlich für Tests auf Desktop/Mobil, wenn Sie Apple-Produkte nutzen. Wir werden es auf macOS auf einem MacBook Pro testen.

Um es zu aktivieren, drücken Sie Cmd + F5. Falls Sie VO vorher nicht genutzt haben, wird Ihnen sich ein Willkommensbildschirm präsentieren, auf dem Sie wählen können, ob Sie VO starten oder nicht und eine recht nützliche Einführung durchlaufen können, um zu lernen, wie man es verwendet. Um es wieder auszuschalten, drücken Sie erneut Cmd + F5.

Wenn VO eingeschaltet ist, sieht das Display im Wesentlichen gleich aus, aber Sie sehen ein schwarzes Feld unten links auf dem Bildschirm, das Informationen darüber enthält, was VO derzeit ausgewählt hat. Die aktuelle Auswahl wird ebenfalls hervorgehoben, mit einem schwarzen Rahmen – diese Hervorhebung ist als VO-Cursor bekannt.

Um VoiceOver zu nutzen, werden Sie häufig den "VO-Modifier" verwenden müssen — dies ist eine Taste oder Tastenkombination, die Sie zusätzlich zu den eigentlichen VO-Tastaturkürzeln drücken müssen, um diese zum Laufen zu bringen. Die Verwendung eines solchen Modifiers ist bei Screenreadern üblich, um deren Befehle davor zu schützen, mit anderen Befehlen in Konflikt zu geraten. Bei VoiceOver kann der Modifier entweder CapsLock oder Strg + Wahl sein.

VO hat viele Tastaturbefehle, und wir werden hier nicht alle auflisten. Die grundlegenden, die Sie für die Testung von Webseiten benötigen, finden Sie in der folgenden Tabelle. In den Tastenkombinationen steht "VO" für "den VoiceOver-Modifier".

Das scheint eine Menge Befehle zu sein, aber es ist nicht so schlecht, wenn man sich daran gewöhnt, und VO erinnert einen regelmäßig daran, welche Befehle in bestimmten Situationen zu verwenden sind. Spielen Sie jetzt mit VO herum; Sie können dann weiter mit einigen unserer Beispiele im Abschnitt Screenreader-Tests experimentieren.

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 mitteilen, bevor Sie es herunterladen können.
2. Einmal heruntergeladen, installieren Sie es – Sie doppelklicken auf das Installationsprogramm, akzeptieren die Lizenz und befolgen die Anweisungen.
3. Um NVDA zu starten, doppelklicken Sie auf die Programmdatei/Verknüpfung oder verwenden Sie die Tastenkombination Strg + Alt + N. Sie sehen den NVDA-Willkommensdialog, wenn Sie es starten. Hier können Sie einige Optionen auswählen und dann auf die Schaltfläche OK drücken, um loszulegen.

NVDA wird jetzt auf Ihrem Computer aktiv sein.

Um NVDA zu nutzen, werden Sie häufig den "NVDA-Modifier" verwenden – dies ist eine Taste, die Sie zusätzlich zu den eigentlichen NVDA-Tastaturkürzeln drücken müssen, damit sie funktionieren. Die Verwendung eines solchen Modifiers ist bei Screenreadern üblich, um deren Befehle davor zu schützen, mit anderen Befehlen in Konflikt zu geraten. Bei NVDA kann der Modifier entweder Insert (die Standardeinstellung) oder CapsLock sein (kann durch Markieren des ersten Kontrollkästchens im NVDA-Willkommensdialog gewählt werden, bevor OK gedrückt wird).

NVDA hat viele Tastaturbefehle, und wir werden hier nicht alle auflisten. Die grundlegenden, die Sie für die Testung von Webseiten benötigen, finden Sie in der folgenden Tabelle. In den Tastenkombinationen steht "NVDA" für "den NVDA-Modifier".

Jetzt, da Sie sich an die Nutzung eines Screenreaders gewöhnt haben, möchten wir, dass Sie ihn für einige schnelle Barrierefreiheits-Tests nutzen, um ein Gefühl dafür zu bekommen, wie Screenreader mit guten und schlechten Webseiten-Funktionen umgehen:

• Sehen Sie sich good-semantics.html an und achten Sie darauf, wie die Überschriften vom Screenreader gefunden werden und für die Navigation genutzt werden können. Dies ist bei bad-semantics.html nicht der Fall – der Screenreader erhält keine dieser Informationen. Stellen Sie sich vor, wie ärgerlich dies beim Navigieren durch eine wirklich lange Textseite wäre.
• Sehen Sie sich good-links.html an und achten Sie darauf, wie sie außerhalb des Kontexts Sinn machen. Dies ist bei bad-links.html nicht der Fall – sie sind alle einfach nur „hier klicken“.
• Sehen Sie sich good-form.html an und achten Sie darauf, wie die Formulareingabefelder mithilfe ihrer Labels beschrieben werden, weil wir die <label>-Elemente richtig genutzt haben. Bei bad-form.html erhalten sie ein unpräzises Label wie „leer“.
• Sehen Sie sich unser punk-bands-complete.html Beispiel an und feststellen, wie der Screenreader in der Lage ist, Spalten und Zeilen von Inhalten zu verknüpfen und sie alle zusammen vorzulesen, weil wir Kopfzeilen richtig definiert haben. In bad-table.html können keine der Zellen verknüpft werden. Beachten Sie, dass NVDA etwas seltsam verhält, wenn Sie nur eine einzelne Tabelle auf einer Seite haben; Sie könnten stattdessen WebAIMs Tabellen-Testseite ausprobieren.
• Werfen Sie einen Blick auf das WAI-ARIA Live-Bereiche Beispiel, das wir zuvor gesehen haben, und beachten Sie, wie der Screenreader den ständig aktualisierten Abschnitt liest, während er sich aktualisiert.

Wie bereits erwähnt, können Sie sich nicht allein auf automatisierte Tools verlassen, um Barrierefreiheitsprobleme auf Ihrer Website zu bestimmen. Es wird empfohlen, dass Sie, während Sie Ihren Testplan erstellen, nach Möglichkeit einige Barrierefreiheits-Benutzergruppen einbeziehen. Versuchen Sie, einige Screenreader-Nutzer zu beteiligen, einige Tastaturnutzer, einige nicht hörende Nutzer und vielleicht auch andere Gruppen, je nach Ihren Anforderungen.

Viele andere Arten von assistiver Technologie existieren, wie z.B.:

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

Die folgende Liste bietet eine Checkliste, der Sie folgen können, um sicherzustellen, dass Sie die empfohlenen Barrierefreiheits-Tests 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 wie die Verwendung eines Auditing-Tools.
2. Überprüfen, ob Ihr Inhalt Sinn macht, wenn das CSS ausgeschaltet ist.
3. Stellen Sie sicher, dass Ihre Funktionalität mit der Tastatur zugänglich ist (siehe UI-Steuerelemente für weitere Details). Testen mit Tab, Return/Enter usw.
4. Stellen Sie sicher, dass Ihre nichttextlichen Inhalte Textalternativen haben. Ein Auditing-Tool ist gut geeignet, um solche Probleme zu erfassen.
5. Stellen Sie sicher, dass der Farbkontrast Ihrer Website akzeptabel ist, indem Sie ein geeignetes Prüfwerkzeug verwenden.
6. Stellen Sie sicher, dass versteckter Inhalt von Screenreadern sichtbar ist.
7. Stellen Sie sicher, dass die Funktionalität ohne JavaScript so weit wie möglich nutzbar ist.
8. Nutzen Sie ARIA, um die Barrierefreiheit dort zu verbessern, wo es angemessen ist.
9. Führen Sie Ihre Site durch ein Auditing-Tool.
10. Testen Sie es mit einem Screenreader.
11. Fügen Sie irgendwo auf Ihrer Website eine barrierefreie Erklärung/Politik hinzu, die auffindbar ist und beschreibt, was Sie getan haben.

Hoffentlich hat Ihnen dieser Artikel eine Vorstellung von den Arten von Tools gegeben, die Sie verwenden können, um Barrierefreiheitsprobleme zu lösen, und wie die unterstützende Technologie verwendet wird, die von Menschen mit Behinderungen genutzt wird, um im Web zu navigieren.

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

• Zurück
• Übersicht: Barrierefreiheit
• Weiter