Barrierefreiheitswerkzeuge und unterstützende Technologien

Barrierefreiheitswerkzeuge

Sehen wir uns die Werkzeuge und Techniken an, die Sie verwenden können, um die Barrierefreiheit von Websites zu testen und die aufgedeckten Probleme zu beheben.

Testen der Quellreihenfolge

Ihr Inhalt sollte in seiner Quellreihenfolge logisch sinnvoll sein – Sie können ihn später immer noch mit CSS anders darstellen, aber Sie sollten die zugrunde liegende Struktur von Anfang an korrekt haben. Dies liegt daran, dass assistive Technologien Webinhalte basierend auf der Reihenfolge der Quelle lesen, und Menschen mit Behinderungen häufig Teile des CSS ändern oder ausschalten, um Inhalte lesbarer zu machen (übliche Beispiele sind das Erhöhen der Schriftgröße und das Anwenden von Farbkontrastschemata mit hohem Kontrast).

Um die Quellreihenfolge zu testen, können Sie das CSS einer Site 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, Browserfunktionen zu verwenden, zum Beispiel:

• Firefox: Ansicht > Seitenstil > Kein Stil aus dem Hauptmenü auswählen.
• Safari: Öffnen Sie die Entwicklerwerkzeuge des Browsers, klicken Sie auf die Schaltfläche Geräteeinstellungen in der Nähe der oberen linken Ecke des Entwicklerwerkzeug-Fensters (sieht aus wie ein Computermonitor), und aktivieren Sie das Kontrollkästchen "CSS deaktivieren".
• Chrome/Edge: Installieren Sie die Web Developer Toolbar Erweiterung, starten Sie dann den Browser neu. Klicken Sie auf das "Web Developer" Zahnrad-Symbol, das jetzt im Erweiterungsmenü verfügbar sein sollte, und wählen Sie CSS > Alle Stile deaktivieren.

Farbkontrast-Checker

Bei der Auswahl eines Farbschemas für Ihre Website sollten Sie sicherstellen, dass die Textfarbe (Vordergrund) gut mit der Hintergrundfarbe kontrastiert. Das Design könnte cool aussehen, aber es nützt nichts, wenn die Leute Ihren Inhalt nicht lesen können. Verwenden Sie ein Werkzeug wie das Farbkontrast-Checker von WebAIM, um zu überprüfen, ob Ihr Schema ausreichend Kontraste aufweist.

Ein weiterer Tipp ist, es zu vermeiden, nur Farbe für Wegweiser oder um wichtige Informationen hervorzuheben zu verwenden, da dies von Menschen mit Sehbehinderungen wie Farbenblindheit übersehen werden könnte. Anstatt beispielsweise erforderliche Formularfelder rot zu markieren, markieren Sie sie mit einem Sternchen und in Rot.

Auditing-Tools

Es gibt mehrere Auditing-Tools, in die Sie Ihre Webseiten einspeisen können. Sie überblicken diese und geben eine Liste der Barrierefreiheitsprobleme zurück, die auf der Seite vorhanden sind. Sehen wir uns zum Beispiel Wave an, ein Online-Tool zur Barrierefreiheitstestung, das eine Webadresse annimmt und eine annotierte Ansicht dieser Seite mit hervorgehobenen Barrierefreiheitsproblemen zurückgibt.

1. Gehen Sie zur Wave-Homepage.
2. Geben Sie die URL unseres bad-form.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 Site sollte die vorhandenen Barrierefreiheitsprobleme hervorheben. Klicken Sie auf die angezeigten Symbole, um weitere Informationen zu jedem der von Waves Bewertung identifizierten Probleme zu erhalten.

Andere Audit-Tools, die einen Blick wert sind:

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

Deques aXe-Werkzeug geht etwas weiter als die oben genannten Auditing-Tools. Wie die anderen überprüft es Seiten und gibt Barrierefreiheitsfehler zurück. Seine wahrscheinlich direkt nützlichste Form sind die Browsererweiterungen:

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

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

aXe kann auch mit npm installiert werden und lässt sich in Task-Runner wie Grunt und Gulp, Automatisierungsframeworks wie Selenium und Cucumber, Unit-Testing-Frameworks wie Jasmine und mehr integrieren (weitere Details finden Sie auf der Hauptseite von aXe).

Screen-Reader

Eine der häufigsten Arten von assistiver Technologie (AT), die von Menschen mit Behinderungen verwendet wird – und eine der häufigsten, die Sie zum Testen der Barrierefreiheit Ihrer Webseiten verwenden werden – sind Screen-Reader. Diese sind Softwarestücke, die Webseiteninhalte oder Inhalte aus anderen auf dem Betriebssystem installierten Apps vorlesen. Screen-Reader ermöglichen es Menschen, Computer zu nutzen, ohne visuellen Inhalt sehen zu müssen.

Webbrowser stellen Informationen über den Inhalt der Seite für Screen-Reader (und andere AT) zur Verfügung, um sie dem Nutzer durch eine Darstellung namens Accessibility Tree zu kommunizieren. Dieser bietet semantische Informationen wie Namen und Beschreibungen von Elementen, welchen Zweck oder welche Rolle sie haben (ist es ein Button oder ein Eingabefeld?) und ob sie in einem bestimmten Zustand sind (z.B. ist ein Dialogfeld geöffnet oder geschlossen?).

Diese Informationen mögen im Fall eines Textabschnitts banal erscheinen, der sich so gut wie in geschriebener Form anhört, aber es kann kompliziert werden, wenn es um Benutzeroberflächenfunktionen wie ein Dropdown-Menü oder einen Videoplayer geht. Deshalb ist es sehr wichtig, semantisches HTML korrekt zu verwenden, was Sie im nächsten Artikel dieses Moduls detailliert behandeln werden. Wenn Sie Inhalte mit dem falschen Element markieren, kann dies für Screen-Reader-Nutzer verwirrend sein.

Stellen Sie sicher, dass Sie einen oder zwei Screen-Reader auf Ihrer Entwicklungsmaschine installiert haben, und versuchen Sie, Ihre Lieblingswebsites über einen Screen-Reader zu nutzen, wie unten beschrieben. Zu verstehen, wie sehbehinderte Menschen das Web nutzen, ist der Schlüssel zur Gestaltung von Produkten, die besser für alle funktionieren.

Welche Screen-Reader sind verfügbar?

Es gibt mehrere Screen-Reader:

• 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 Screen-Reader eigenständige Anwendungen, die auf dem Host-Betriebssystem laufen und Webseiten sowie Inhalte in anderen Anwendungen lesen können (das ist nicht immer der Fall; ChromeVox zum Beispiel ist eine Browser-Erweiterung). Screen-Reader weisen tendenziell einige Unterschiede im genauen Verhalten und in den Steuerungsmöglichkeiten auf, daher sollten Sie die Dokumentation Ihres gewählten Screen-Readers konsultieren, um alle Details zu erfahren. Dennoch funktionieren sie alle grundsätzlich auf dieselbe Weise.

In den nächsten Abschnitten gehen wir auf einige Tests mit ein paar verschiedenen Screen-Readern ein, um Ihnen eine allgemeine Vorstellung davon zu geben, wie sie funktionieren und wie man mit ihnen testet.

VoiceOver

VoiceOver (VO) wird kostenlos mit Apple Mac/iPhone/iPad geliefert, daher ist es nützlich zum Testen auf Desktop/Mobilgeräten, wenn Sie Apple-Produkte verwenden. Wir haben es auf macOS auf einem MacBook Pro getestet.

Um es zu aktivieren, drücken Sie Cmd + F5. Wenn Sie VO noch nie benutzt haben, wird Ihnen ein Willkommensbildschirm angezeigt, auf dem Sie wählen können, ob Sie VO starten möchten oder nicht. Sie können auch ein wirklich nützliches Tutorial durchlaufen, um zu lernen, wie man es benutzt. Um es zu deaktivieren, drücken Sie Cmd + F5 erneut.

Wenn VO aktiviert ist, sieht das Display größtenteils gleich aus, aber Sie sehen ein schwarzes Feld unten links auf dem Bildschirm, das Informationen darüber 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, werden Sie die "VO-Modifikatortaste" häufig verwenden, dies ist eine Taste oder Tastenkombination, die Sie zusätzlich zu den eigentlichen VO-Tastenkürzeln drücken müssen, um sie funktionieren zu lassen. Die Verwendung eines Modifikators wie diesem ist bei Screen-Readern üblich, um ihre Befehle davon abzuhalten, mit anderen Befehlen zu kollidieren. Im Fall von VO kann der Modifikator entweder CapsLock oder Ctrl + Option sein.

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

Dies 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 daran, welche Befehle an bestimmten Stellen verwendet werden sollen. Spielen Sie jetzt ein wenig mit VO herum; dann können Sie mit einigen unserer Beispiele in dem Abschnitt Screen-Reader-Tests weitermachen.

NVDA

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

1. Laden Sie NVDA von nvaccess.org herunter und installieren Sie es. Sie können wählen, ob Sie eine Spende machen oder es kostenlos herunterladen möchten; Sie müssen auch Ihre E-Mail-Adresse angeben, bevor Sie es herunterladen können.
2. Um NVDA nach der Installation zu starten, doppelklicken Sie auf die Programmdatei/das Verknüpfungssymbol oder verwenden Sie das Tastenkürzel Ctrl + Alt + N. Wenn Sie starten, wird das NVDA-Willkommensdialogfeld angezeigt. Hier können Sie einige Optionen wählen und dann die OK-Taste drücken, um loszulegen.

NVDA wird jetzt auf Ihrem Computer aktiv sein.

Um NVDA zu verwenden, werden Sie die "NVDA-Modifikatortaste" häufig verwenden – die Taste, die Sie zusätzlich zu den eigentlichen NVDA-Tastenkürzeln drücken müssen, damit sie funktionieren. Der NVDA-Modifikator kann entweder Einfügen (Standard) oder CapsLock (kann durch das erste Kontrollkästchen im NVDA-Willkommensdialog ausgewählt werden, bevor Sie OK drücken) sein.

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

Screen-Reader-Tests

Jetzt, da Sie sich an die Verwendung eines Screen-Readers gewöhnt haben, möchten wir, dass Sie ihn verwenden, um einige schnelle Barrierefreiheitstests durchzuführen, um eine Vorstellung davon zu bekommen, wie Screen-Reader mit guten und schlechten Webseitenfunktionen umgehen:

• Sehen Sie sich good-semantics.html an und stellen Sie fest, wie die Überschriften vom Screen-Reader gefunden werden und für die Navigation verfügbar sind. Schauen Sie sich nun bad-semantics.html an und stellen Sie fest, wie der Screen-Reader keines dieser Informationen erhält. Stellen Sie sich vor, wie ärgerlich das wäre, wenn Sie versuchen, sich durch eine wirklich lange Seite mit Text zu navigieren.
• Sehen Sie sich good-links.html an und stellen Sie fest, dass sie, wenn sie aus dem Kontext betrachtet werden, im VoiceOver-Rotor Sinn ergeben. Dies ist nicht der Fall bei bad-links.html – sie alle sind nur "klicken Sie hier".
• Sehen Sie sich good-form.html an und stellen Sie fest, dass die Formulareingaben durch ihre Beschriftungen beschrieben werden, weil wir angemessene <label>-Elemente hinzugefügt haben. In bad-form.html erhalten sie eine unhilfreiche Bezeichnung wie "leer".
• Schauen Sie sich unser punk-bands-complete.html Beispiel an und sehen Sie, wie der Screen-Reader in der Lage ist, Spalten und Zeilen von Inhalten zuzuordnen und zusammenhängend vorzulesen, weil wir die Tabellenüberschriften richtig definiert haben. In bad-table.html können keine der Zellen zugeordnet werden. Beachten Sie, dass NVDA sich ein wenig seltsam verhält, wenn Sie nur eine einzelne Tabelle auf einer Seite haben; Sie könnten stattdessen die WebAIM Tabelle-Testseite ausprobieren.
• Sehen Sie sich das WAI-ARIA Live Regions Beispiel an und stellen Sie fest, dass der Screen-Reader den ständig aktualisierten Abschnitt liest, während er aktualisiert wird.

Weitere Werkzeuge

Screen-Reader sind eine der häufigsten Arten von assistiver Technologie, denen Sie als Webentwickler begegnen werden, aber es gibt andere Arten von AT, und es ist nützlich, sich mit dem vertraut zu machen, was Benutzer möglicherweise verwenden, um auf Ihren Inhalt zuzugreifen. Dieser Abschnitt fasst einige davon zusammen.

Große Text- oder Braille-Tastaturen

Es ist möglich, große Text-Tastaturen zu bekommen, die für Sehbehinderte oder ältere Nutzer konzipiert sind, sowie Braille-Tastaturen, die von blinden und stark sehbehinderten Menschen verwendet werden können.

Alternative Zeigegeräte

Wenn Sie an Zeigegeräte denken, sind Mäuse das offensichtliche Beispiel, aber es gibt andere Zeigegeräte, die entwickelt wurden, um Benutzern mit unterschiedlichen Mobilitätsbeeinträchtigungen die Navigation in Benutzeroberflächen zu erleichtern:

• Trackballs: Eine Art umgedrehte Maus, Trackballs bestehen aus einer befestigten Kugel, die auf Ihrem Schreibtisch bleibt, die Sie rollen können, um den Zeiger zu bewegen. Sie werden als präziser und einfacher zu bedienen als Mäuse angesehen, besonders für Menschen mit eingeschränkter Handbewegung.
• Joysticks: Ein Steuerknüppel, der bewegt werden kann, um den Zeiger zu bewegen. Joysticks sind weniger präzise als Trackballs, aber von Menschen mit einem breiten Spektrum von körperlichen Beeinträchtigungen, sogar schweren Behinderungen, nutzbar.
• Touchpads: Die meisten modernen Laptops haben ein Touchpad (manchmal Trackpad genannt) – einen flachen taktilen Sensor, der es Ihnen ermöglicht, den Zeiger mit einem Finger zu bewegen, sowie mehrfingerige Gesten wie auf Mobilgeräten auszuführen. Sie können externe Touchpads für Geräte kaufen, die keine internen haben. Einige Leute finden sie präziser als Mäuse.

Bildschirmvergrößerer

Bildschirmvergrößerer bieten sehbehinderten Nutzern eine vergrößerte Ansicht des Displays ihres Geräts, um ihnen das Verständnis und die Interaktion mit den Inhalten des Geräts zu erleichtern, und bieten auch andere Funktionen wie Farbkorrekturen, um Menschen mit Farbenblindheit zu helfen, sowie die Anpassungen der Größe von Mauszeigern und Textcursor, damit sie leichter zu sehen sind.

Software- und Hardware-Bildschirmvergrößerer sind erhältlich:

• Die meisten modernen Betriebssysteme haben eine integrierte App zum Vergrößern des gesamten Bildschirms oder ausgewählter Bildschirminhalte, zum Beispiel Zoom auf Mac oder Magnifier auf Windows. Sie bieten auch oft Optionen zum universellen Vergrößern der Textgröße, Mauszeigergröße usw. Auch Drittanbieteroptionen sind verfügbar.
• Hardware-Bildschirmvergrößerer bestehen in der Regel aus einem separaten Bildschirm, der neben oder vor dem Bildschirm Ihres Geräts platziert wird und eine vergrößerte Version davon oder eine herangezoomte Version eines Teils davon projiziert.

Spracherkennungssoftware

Sprach- (oder Sprachtexteingabe-) Software ermöglicht es Ihnen, Befehle zu sprechen, um Ihr Gerät zu steuern, und/oder den Text von E-Mails oder Dokumenten zu sprechen und den Computer den Text für Sie schreiben zu lassen. Dies ist sehr nützlich für Menschen, die keine Tastatur oder andere Steuermechanismen verwenden können.

Moderne Betriebssysteme verfügen über abgeängige Funktionen, um dies zu ermöglichen (zum Beispiel Diktierfunktion auf Mac oder Sprachzugriff auf Windows), und es gibt auch Drittanbieter-Apps, von Desktop-Anwendungen bis hin zu Browsererweiterungen.

Schaltersteuerungen

Schaltersteuerungen bieten eine Mechanismus zur Interaktion mit Geräten für Benutzer mit sehr eingeschränkter Mobilität oder kognitiven Beeinträchtigungen.

Ein Schaltersteuerungs-Setup beinhaltet üblicherweise zwei Teile:

• Einen physischen Schalter oder Knopf zum Aktivieren von Optionen auf dem Gerät. Sie können die Schalterfunktion auch regulären Gerätetasten (wie Lautstärketasten) oder Tasten auf einer Tastatur zuweisen.
• Einen Gerätemodus oder eine Drittanbieter-Softwareerweiterung, die das Gerät mit der Schalter- oder Knopfsteuerung kompatibel macht. Zum Beispiel ist Switch Access auf Android ein Modus, bei dem die verschiedenen Optionen in verschiedenen Situationen (zum Beispiel Apps auf dem Startbildschirm) durchlaufen werden und dann die gewünschte Option mit einem Knopf oder Schalter ausgewählt werden kann, wenn sie erreicht wird.

Planung für Barrierefreiheit

Sie sollten sorgfältig über Barrierefreiheit nachdenken, gleich zu Beginn jedes Projekts. Stellen Sie sicher, dass Barrierefreiheit während der anfänglichen Designphase berücksichtigt wird, damit Sie:

• Die Grundlagen richtig hinbekommen, zum Beispiel durch die Verwendung von gut strukturierten Textinhalten und das Bereitstellen von alternativen Texten für Bilder.
• Sorgfältig den besten Ansatz für Funktionen wählen, die wahrscheinlich Barrierefreiheitsprobleme haben. Zum Beispiel wird Audio und Video für einige Menschen sicherlich unzugänglich sein, daher sollten Sie Alternativen wie Transkripte und Textuntertitel bereitstellen.
• Kostenintensive Fehler später vermeiden. Probleme, die am Ende eines Projekts aufgedeckt werden, neigen dazu, viel zeitaufwändiger und teurer zu sein als Probleme, die früher entdeckt werden.

Benutzertests

Sie können sich nicht allein auf automatisierte Tools zur Bestimmung von Barrierefreiheitsproblemen auf Ihrer Site verlassen. Jedes Web-Projekt benötigt eine Benutzer-Teststrategie, und es wird dringend empfohlen, dass Sie einige Benutzergruppen mit Barrierefreiheitsbedarfen einbeziehen:

• Versuchen Sie, einige Screen-Reader-Nutzer, einige reine Tastaturnutzer, einige nicht hörbehinderte Nutzer, Nutzer mit Mobilitätsbeeinträchtigungen usw. einzubeziehen.
• Lassen Sie jede Gruppe die Website allgemein ausprobieren, beginnend mit der Betrachtung der Startseite und anderer wichtiger Seiten und dem Ausprobieren einiger der primären Funktionen. Typische Beispiele sind der Kauf eines Produkts oder die Buchung einer Reservierung. Fragen Sie sie, welchen Eindruck sie hatten und auf welche Schwierigkeiten sie gestoßen sind.
• Lassen Sie sie dann auf Funktionen oder Arbeitsabläufe fokussieren, bei denen Sie spezielle Barrierefreiheitssorgen haben, wie komplexe Formulareingabeelemente oder Videoplayer. Fragen Sie sie, was ihnen in Bezug auf Benutzererfahrung fehlt und was sie gerne geändert sehen würden.

Einige Projekte haben ein Budget, um Testgruppen zu bezahlen, während andere auf unbezahlte Freiwillige oder sogar Kollegen und Freunde angewiesen sind.

Checkliste für Barrierefreiheitstests

Die folgende Liste bietet eine Checkliste, 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. Validieren (überprüfen) Sie es als gute Grundlage, genauso wie ein Audit-Tool zu verwenden.
2. Überprüfen Sie, ob Ihr Inhalt Sinn macht, wenn das CSS deaktiviert ist.
3. Stellen Sie sicher, dass Ihre Funktionalität über die Tastatur zugänglich ist (siehe Verwendung semantischer UI-Kontrollen, wo möglich für weitere Details). Testen Sie mit Tab, Return/Enter usw.
4. Stellen Sie sicher, dass Ihr nicht textlicher Inhalt Alternativtexte hat. Ein Audit-Tool ist gut, um solche Probleme zu entdecken.
5. Stellen Sie sicher, dass der Farbkontrast Ihrer Website akzeptabel ist, indem Sie ein geeignetes Überprüfungswerkzeug verwenden.
6. Stellen Sie sicher, dass versteckter Inhalt von Screen-Readern sichtbar ist.
7. Stellen Sie sicher, dass die Funktionalität, wo möglich, ohne JavaScript nutzbar ist.
8. Verwenden Sie ARIA, um die Barrierefreiheit dort zu verbessern, wo es angebracht ist.
9. Führen Sie Ihre Site durch ein Audit-Tool.
10. Testen Sie es mit einem Screen-Reader.
11. Fügen Sie irgendwo auf Ihrer Site eine zugängliche Erklärung/Politik hinzu, um zu sagen, was Sie getan haben.

Zusammenfassung

Hoffentlich hat Ihnen dieser Artikel eine Vorstellung davon gegeben, welche Art von Werkzeugen Sie zur Lösung von Barrierefreiheitsproblemen und assistiven Technologien, die von Menschen mit Behinderungen zur Nutzung des Internets verwendet werden, verwenden können.

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

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