Barrierefreiheitstools und unterstützende Technologien

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

Ihr Inhalt sollte in der Quellreihenfolge logisch sinnvoll sein — Sie können ihn später immer 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 Seite ausschalten und prüfen, 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 Browser-Features, zum Beispiel:

• Firefox: Wählen Sie Ansicht > Seitenstil > Kein Stil aus dem Hauptmenü.
• Safari: Wählen Sie Entwickeln > Stile deaktivieren aus dem Hauptmenü (um das Entwickeln-Menü zu aktivieren, wählen Sie Safari > Einstellungen > Erweitert > Entwicklermenü in der Menüleiste anzeigen).
• Chrome: Installieren Sie die Web Developer Toolbar-Erweiterung, starten Sie dann den Browser neu. Klicken Sie auf das Zahnrad-Symbol, das erscheint, und wählen Sie CSS > Alle Stile deaktivieren.
• Edge: Wählen Sie Ansicht > Stil > Kein Stil aus dem 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 nützt nichts, wenn Menschen mit Sehbehinderungen wie Farbenblindheit Ihren Inhalt nicht lesen können. Verwenden Sie ein Tool wie WebAIM's Color Contrast Checker, um zu überprüfen, ob Ihr Schema ausreichend kontrastiert.

Ein weiterer Tipp ist, nicht nur auf Farben für Schilder/Informationen zu setzen, da dies für diejenigen, die die Farbe nicht sehen können, keinen Nutzen hat. Markieren Sie zum Beispiel verpflichtende Formularfelder zusätzlich zu rot mit einem Sternchen.

Es gibt eine Reihe von Prüftools, in die Sie Ihre Webseiten einfügen können. Sie überprüfen diese und geben eine Liste der auf der Seite vorhandenen Barrierefreiheitsprobleme zurück. Schauen wir uns ein Beispiel an, die Verwendung von Wave, einem Online-Testtool für Barrierefreiheit, 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 Texteingabefeld oben auf 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 auf die Barrierefreiheitsprobleme antworten. Klicken Sie auf die angezeigten Symbole, um mehr Informationen zu jedem der von Wave's Bewertung identifizierten Probleme zu erhalten.

Andere Prüftools, die es wert sind, ausprobiert zu werden:

• 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 prüft es Seiten und gibt Barrierefreiheitsfehler zurück. In seiner unmittelbar nützlichsten Form ist es wahrscheinlich in den Browsererweiterungen erhältlich:

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

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

aXe kann auch mit npm installiert werden und lässt sich mit Task-Runnern wie Grunt und Gulp, Automatisierungs-Frameworks wie Selenium und Cucumber, Unit-Test-Frameworks wie Jasmine und vielen anderen integrieren (siehe erneut die Hauptseite von aXe für Details).

Es ist auf jeden Fall lohnenswert, ein Bildschirmlesegerät zu testen, um sich daran zu gewöhnen, wie stark sehbehinderte Menschen das Web nutzen. Es gibt mehrere Bildschirmlesegeräte:

• 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 in das Betriebssystem integriert, wie VoiceOver (macOS und iOS), ChromeVox (auf Chromebooks) und TalkBack (Android).

Im Allgemeinen sind Bildschirmlesegeräte 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 Browsererweiterung), aber normalerweise tendieren Bildschirmlesegeräte dazu, in leicht unterschiedlichen Arten zu agieren und unterschiedliche Steuerungen zu haben, sodass Sie die Dokumentation für Ihr ausgewähltes Bildschirmlesegerät konsultieren müssen, um alle Details zu erhalten — dennoch funktionieren sie alle im Grunde auf die gleiche Weise.

Lassen Sie uns einige Tests mit verschiedenen Bildschirmlesegeräten 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/Mobilgeräten, 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 nie verwendet haben, wird Ihnen ein Begrüßungsbildschirm angezeigt, auf dem Sie VO starten oder nicht starten können und ein sehr nützliches Tutorial durchführen können, um zu lernen, wie man es benutzt. Um VO wieder auszuschalten, drücken Sie erneut Cmd + F5.

Wenn VO eingeschaltet ist, sieht das Display größtenteils gleich aus, aber Sie sehen ein schwarzes Feld unten links auf dem Bildschirm, das Informationen über das enthält, was VO gerade ausgewählt hat. Die aktuelle Auswahl wird ebenfalls hervorgehoben, mit einem schwarzen Rand — diese Hervorhebung wird als VO-Cursor bezeichnet.

Um VO zu verwenden, nutzen Sie den "VO-Modifikator" — dies ist eine Taste oder Tastenkombination, die Sie zusätzlich zu den tatsächlichen VO-Tastenkombinationen drücken müssen, damit sie funktionieren. Die Verwendung eines Modifikators ist bei Bildschirmlesegeräten üblich, um zu verhindern, dass ihre Befehle mit anderen Befehlen kollidieren. Im Fall von VO kann der Modifikator entweder CapsLock oder Strg + Option sein.

VO hat viele Tastaturbefehle, und wir werden sie hier nicht alle auflisten. Die grundlegenden, die Sie für Webseitentests benötigen, sind in der folgenden Tabelle. In den Tastaturkürzeln steht "VO" für "den VoiceOver-Modifikator".

Das scheint eine Menge an Befehlen zu sein, aber es ist nicht so schlimm, wenn Sie sich daran gewöhnt haben, und VO gibt Ihnen regelmäßig Erinnerungen, welche Befehle Sie an bestimmten Stellen verwenden können. Spielen Sie jetzt mit VO; Sie können dann mit einigen unserer Beispiele im Abschnitt Bildschirmlesegeräte-Tests 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 sich entscheiden, 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 ist, 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. Sie sehen das NVDA Begrüßungsdialog, wenn Sie es starten. Hier können Sie aus einigen Optionen auswählen und dann auf die OK-Schaltfläche klicken, um loszulegen.

NVDA ist jetzt auf Ihrem Computer aktiv.

Um NVDA zu verwenden, nutzen Sie den "NVDA-Modifikator" — dies ist eine Taste, die Sie zusätzlich zu den tatsächlichen NVDA-Tastenkombinationen drücken müssen, damit sie funktionieren. Die Verwendung eines Modifikators ist bei Bildschirmlesegeräten üblich, um zu verhindern, dass ihre Befehle mit anderen Befehlen kollidieren. Im Fall von NVDA kann der Modifikator entweder Einfg (Standard) oder CapsLock (kann durch Markieren des ersten Kontrollkästchens im NVDA-Begrüßungsdialog ausgewählt werden, bevor Sie auf OK klicken) sein.

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

Nachdem Sie sich an die Verwendung eines Bildschirmlesegeräts gewöhnt haben, möchten wir, dass Sie es für einige schnelle Barrierefreiheitstests verwenden, um eine Vorstellung davon zu bekommen, wie Bildschirmlesegeräte mit guten und schlechten Webseitenmerkmalen umgehen:

• Sehen Sie sich good-semantics.html an und bemerken Sie, wie die Überschriften vom Bildschirmlesegerät gefunden und zur Navigation verwendbar sind. Sehen Sie sich dann bad-semantics.html an und bemerken Sie, wie das Bildschirmlesegerät keinerlei dieser Informationen erhält. Stellen Sie sich vor, wie nervig dies beim Versuch, eine wirklich lange Textseite zu navigieren, wäre.
• Sehen Sie sich good-links.html an und bemerken Sie, wie sie aus dem Kontext heraus Sinn machen. Dies ist nicht der Fall bei bad-links.html — alle lauten nur "hier klicken".
• Sehen Sie sich good-form.html an und bemerken Sie, wie die Formulareingaben mit ihren Labels beschrieben werden, da wir <label>-Elemente ordnungsgemäß verwendet haben. In bad-form.html erhalten sie ein unhilfreiches Label wie "leer".
• Sehen Sie sich unser punk-bands-complete.html-Beispiel an und sehen Sie, wie Bildschirmlesegeräte in der Lage sind, Spalten und Zeilen von Inhalten zuzuordnen und sie alle zusammen vorzulesen, da wir die Header richtig definiert haben. In bad-table.html können keine der Zellen zugeordnet werden. Beachten Sie, dass NVDA etwas seltsam agiert, wenn Sie nur eine einzige Tabelle auf einer Seite haben; Sie könnten stattdessen WebAIMs Tabellentestseite ausprobieren.
• Schauen Sie sich das WAI-ARIA Live Regionen Beispiel an, das wir bereits gesehen haben, und bemerken Sie, wie das Bildschirmlesegerät den ständig aktualisierten Abschnitt mitliest, sobald er aktualisiert wird.

Wie bereits erwähnt, können Sie sich nicht allein auf automatisierte Tools verlassen, um Barrierefreiheitsprobleme auf Ihrer Seite zu bestimmen. Es wird empfohlen, bei der Erstellung Ihres Testplans, wenn möglich, einige Gruppen von Benutzern mit Behinderungen einzubeziehen. Versuchen Sie, einige Bildschirmleser-Benutzer, einige nur mit der Tastatur arbeitende Benutzer, einige nicht hörende Benutzer und vielleicht andere Gruppen einzubeziehen, je nach Ihren Anforderungen.

Es gibt viele andere Arten von assistiver Technologie, wie:

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

Die folgende Liste bietet Ihnen eine Prüfliste, die Sie befolgen können, um sicherzustellen, dass Sie die empfohlenen Barrierefreiheitstests für Ihr Projekt durchgeführt haben:

1. Stellen Sie sicher, dass Ihr HTML so semantisch korrekt wie möglich ist. Es zu validieren ist ein guter Anfang, ebenso wie die Verwendung eines Prüftools.
2. Überprüfen Sie, dass Ihr Inhalt Sinn ergibt, wenn das CSS deaktiviert ist.
3. Stellen Sie sicher, dass Ihre Funktionen über die Tastatur zugänglich sind (siehe UI-Steuerelemente für weitere Details). Testen Sie mit Tab, Eingabetaste etc.
4. Stellen Sie sicher, dass Ihre Nicht-Text-Inhalte Textalternativen haben. Ein Prüftool eignet sich gut, um solche Probleme zu erkennen.
5. Stellen Sie sicher, dass der Farbkontrast Ihrer Website akzeptabel ist, indem ein geeignetes Prüfwerkzeug verwendet wird.
6. Stellen Sie sicher, dass versteckter Inhalt von Bildschirmlesern erkannt wird.
7. Stellen Sie sicher, dass die Funktionalität, wo immer möglich, 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üftool laufen.
10. Testen Sie sie mit einem Bildschirmlesegerät.
11. Fügen Sie eine Barrierefreiheitspolitik/Erklärung irgendwo auffindbar auf Ihrer Webseite ein, um zu erklären, was Sie getan haben.

Hoffentlich hat dieser Artikel Ihnen eine Vorstellung davon gegeben, welche Arten von Tools Sie zur Behebung von Barrierefreiheitsproblemen verwenden können, und welche assistiven Technologien von Menschen mit Behinderungen verwendet werden, um das Internet zu nutzen.

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

• Zurück
• Übersicht: Barrierefreiheit
• Weiter