Barrierefreiheit Tools und unterstützende Technologien

Schauen wir uns die Tools und Techniken an, die Sie zur Prüfung der Barrierefreiheit von Websites nutzen und um die dabei entdeckten Probleme zu beheben.

Ihr Inhalt sollte in der Quellreihenfolge logisch Sinn ergeben – Sie können ihn später immer noch mit CSS unterschiedlich anzeigen, aber Sie sollten die zugrundeliegende Struktur korrekt von Anfang an erstellen. Dies liegt daran, dass unterstützende Technologien Website-Inhalte basierend auf der Quellreihenfolge lesen und Menschen mit Behinderungen oft Teile des CSS ändern oder ausschalten, um Inhalte lesbarer zu machen (häufige Beispiele sind das Erhöhen der Schriftgröße und das Anwenden von Hochkontrast-Farbschemata).

Um die Quellreihenfolge zu testen, 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-Funktionalitäten, zum Beispiel:

• Firefox: Wählen Sie Ansicht > Seitenstil > Kein Stil aus dem Hauptmenü.
• Safari: Öffnen Sie die Entwickler-Tools des Browsers, klicken Sie auf die Schaltfläche Geräteeinstellungen oben links im Entwickler-Tools-Panel (sieht aus wie ein Computermonitor), und aktivieren Sie das Kontrollkästchen "CSS deaktivieren" im erschienenen Panel.
• Chrome/Edge: Installieren Sie die Web Developer Toolbar Erweiterung und starten Sie den Browser neu. Klicken Sie auf das "Web Developer" Zahnrad-Symbol, das nun im Erweiterungsmenü verfügbar sein sollte, und wählen Sie CSS > Alle Stile deaktivieren.

Wenn Sie ein Farbschema für Ihre Website wählen, sollten Sie sicherstellen, dass die Textfarbe (Vordergrund) einen guten Kontrast zur Hintergrundfarbe hat. Ihr Design mag cool aussehen, aber es nützt nichts, wenn Leute Ihre Inhalte nicht lesen können. Verwenden Sie ein Tool wie den Color Contrast Checker von WebAIM, um zu prüfen, ob Ihr Schema ausreichend kontrastiert.

Ein weiterer Tipp ist, nur Farbe für Wegweiser oder das Hervorheben wichtiger Informationen zu verwenden, da dies von Menschen mit Sehschwächen wie Farbenblindheit übersehen werden könnte. Anstatt zum Beispiel erforderliche Formularfelder in Rot zu markieren, markieren Sie sie mit einem Sternchen und in Rot.

Es gibt mehrere Auditing-Tools, in die Sie Ihre Webseiten einspeisen können. Sie werden diese Seiten durchsehen und eine Liste der auf der Seite vorhandenen Barrierefreiheitsprobleme zurückgeben. Schauen wir uns Wave als Beispiel an, ein Online-Tool zur Barrierefreiheitstests, 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-form.html Beispiels in das Text-Eingabefeld oben auf der Seite ein. Drücken Sie dann die Eingabetaste oder klicken/tippen Sie auf den Pfeil am rechten Rand des Eingabefelds.
3. Die Seite sollte die vorhandenen Barrierefreiheitsprobleme hervorheben. Klicken Sie auf die angezeigten Symbole, um mehr Informationen über jedes der von Waves Auswertung identifizierten Probleme zu sehen.

Andere zu überprüfende Auditing-Tools:

• Firefox Accessibility Inspector
• ANDI bookmarklet
• Google Lighthouse accessibility audits

Das Deque's aXe Tool geht etwas weiter als die oben erwähnten Auditing-Tools. Wie die anderen überprüft es Seiten und gibt Barrierefreiheitsfehler zurück. Die wahrscheinlich unmittelbar nützlichste Form ist die der Browsererweiterungen:

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

Diese fügen den Entwicklertools der Browser einen Reiter zur Barrierefreiheit hinzu. Zum Beispiel haben wir die Firefox-Version installiert und sie genutzt, um unser bad-table.html Beispiel zu prüfen. Wir erhielten die folgenden Ergebnisse:

aXe ist auch über npm installierbar und kann in Task-Runner wie Grunt und Gulp integriert werden, sowie mit Automatisierungs-Frameworks wie Selenium und Cucumber, Test-Frameworks wie Jasmine und mehr (siehe erneut die Haupt aXe Seite für Details).

Einer der häufigsten unterstützenden Technologien, den Menschen mit Behinderungen verwenden — und einer der häufigsten, die Sie verwenden werden, um die Barrierefreiheit Ihrer Webseiten zu testen — sind Screenreader. Diese sind Softwarestücke, die Webseiteninhalte oder Inhalte von anderen auf dem Betriebssystem eines Benutzers installierten Apps vorlesen. Screenreader ermöglichen es Menschen, Computer zu nutzen, ohne visuelle Inhalte sehen zu müssen.

Webbrowser stellen Informationen über die Inhalte der Seite für Screenreader (und andere unterstützende Technologien) bereit, um durch eine Darstellung namens Barrierefreibaum an den Benutzer zu kommunizieren. Dies bietet semantische Informationen wie Namen und Beschreibungen von Elementen, ihren Zweck oder ihre Rolle (ist es ein Button oder ein Eingabefeld?) und ob sie sich in einem bestimmten Zustand befinden (zum Beispiel, ob eine Dialogbox offen oder geschlossen ist).

Diese Informationen könnten im Fall eines Textabsatzes trivial erscheinen, der sich ziemlich genau so anhört, wie er geschrieben ist, jedoch kann es bei Benutzeroberflächenelementen wie einem Dropdown-Menü oder einem Videoplayer komplexer werden. Deshalb ist es sehr wichtig, semantisches HTML korrekt zu verwenden, was Sie im nächsten Artikel dieses Moduls detailliert betrachten werden. Wenn Sie Inhalte mit dem falschen Element auszeichnen, könnte dies Screenreader-Benutzer verwirren.

Stellen Sie sicher, dass auf Ihrem Entwicklungsgerät ein Screenreader installiert ist, und versuchen Sie, Ihre Lieblingswebseiten über einen Screenreader zu nutzen, wie im Folgenden besprochen. Verstehen, wie sehbehinderte Menschen das Internet nutzen, ist der Schlüssel zur Gestaltung von Produkten, die für alle besser funktionieren.

Es gibt mehrere verfügbare Screenreader:

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

Im Allgemeinen sind Screenreader separate Apps, die auf dem Host-Betriebssystem laufen können und sowohl Webseiten als auch Inhalte in anderen Apps vorlesen können (dies ist nicht immer der Fall; ChromeVox ist zum Beispiel eine Browsererweiterung). Screenreader haben tendenziell einige Unterschiede im genauen Verhalten und den Steuerungen, daher müssen Sie die Dokumentation für den von Ihnen gewählten Screenreader konsultieren, um alle Details zu erhalten. Dennoch arbeiten alle im Wesentlichen in derselben Weise.

In den nächsten Abschnitten werden wir 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

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

Um es einzuschalten, drücken Sie Cmd + F5. Wenn Sie VO noch nicht verwendet haben, erhalten Sie einen Begrüßungsbildschirm, auf dem Sie wählen können, ob Sie VO starten oder nicht, und durch ein ziemlich nützliches Tutorial zur Nutzung geführt werden. Zum Ausschalten drücken Sie erneut Cmd + F5.

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

Um VO zu verwenden, werden Sie viel Gebrauch vom "VO-Modifikator" machen — dies ist eine Taste oder Tastenkombination, die Sie zusätzlich zu den eigentlichen VO-Tastaturkürzeln drücken müssen, damit sie funktionieren. Die Verwendung eines Modifikators ist bei Screenreadern üblich, um zu verhindern, dass ihre Befehle mit anderen Befehlen in Konflikt geraten. 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 die Webseitentests benötigen, sind in der folgenden Tabelle aufgeführt. In den Tastaturkürzeln bedeutet "VO" "der VoiceOver-Modifikator".