Einführung in Semantik und Hilfstechnologien
Sie haben gesehen, wie Sie eine Website für Nutzer zugänglich machen können, die keine Maus oder ein Zeigegerät verwenden können – sei es aufgrund von körperlichen Beeinträchtigungen, einem technischen Problem oder einer persönlichen Präferenz –, indem Sie die Nutzung nur mit der Tastatur ermöglichen. Es erfordert zwar etwas Sorgfalt und Überlegungen, ist aber nicht viel Arbeit, wenn Sie es von Anfang an planen. Sobald diese grundlegende Arbeit erledigt ist, sind Sie auf dem Weg zu einer vollständig zugänglichen und ausgefeilteren Website auf dem Weg zu einer vollständig zugänglichen und ausgefeilteren Website.
In dieser Lektion bauen wir auf dieser Arbeit auf und werfen einen Blick auf andere Faktoren der Barrierefreiheit, z. B. wie Websites für Nutzer wie Victor Tsaran erstellt werden, die den Bildschirm nicht sehen können.
Zuerst lernen Sie etwas über Assistive Technologie kennen, den allgemeinen Begriff für Tools wie Screenreader, die Beeinträchtigungen Nutzern helfen, den Zugriff auf Informationen zu erschweren.
Als Nächstes sehen wir uns einige allgemeine Konzepte der User Experience an und bauen darauf auf, um tiefer in das Erlebnis von Nutzern assistiver Technologien einzutauchen.
Schließlich erfahren Sie, wie Sie HTML effektiv einsetzen können, um eine gute User Experience für diese Nutzer zu schaffen, und wie sich der HTML-Code ziemlich mit dem bereits erwähnten Fokus überschneidet.
Hilfstechnologien
Assistive Technologie ist ein Sammelbegriff für Geräte, Software und Tools, die Menschen mit einer Behinderung bei der Ausführung einer Aufgabe helfen. Im weitesten Sinn könnte dies etwas Low-Tech wie eine Krücke zum Gehen oder eine Lupe zum Lesen oder etwas Hightech wie ein Roboterarm oder Bilderkennungssoftware auf einem Smartphone sein.
Zu den Hilfstechnologien können allgemeine Informationen wie der Browserzoom oder ein speziell entwickelter Gamecontroller gehören. Dabei kann es sich um ein separates physisches Gerät wie eine Braillezeile handeln, oder es kann vollständig in Software wie einer Sprachsteuerung implementiert sein. Sie kann wie bei einigen Screenreadern in das Betriebssystem integriert sein oder ein Add-on wie eine Chrome-Erweiterung sein.
Die Grenze zwischen assistiven Technologien und Technologien im Allgemeinen ist verschwommen; schließlich sollen alle Technologien Menschen bei einer oder einer anderen Aufgabe unterstützen. Und Technologien können sich oft in die Kategorie „assistive“ (unterstützende) Elemente oder solche aus dieser Kategorie entwickeln.
Eines der ersten kommerziellen Sprachsyntheseprodukte war beispielsweise ein sprechender Rechner für Blinde. Sprachsynthese ist jetzt überall, von Wegbeschreibungen bis zu virtuellen Assistenten. Umgekehrt findet Technologie, die ursprünglich für allgemeine Zwecke gedacht war, oft eine unterstützende Anwendung. Menschen mit eingeschränktem Sehvermögen können zum Beispiel den Zoom der Smartphone-Kamera verwenden, um kleine Dinge in der realen Welt besser zu erkennen.
Im Kontext der Webentwicklung müssen wir eine Vielzahl von Technologien berücksichtigen. Nutzer können mit Ihrer Website über einen Screenreader oder eine Braillezeile, eine Lupe, eine Sprachsteuerung, einen Schalter oder eine andere Form von Hilfstechnologien interagieren. Dabei wird die Standardoberfläche der Seite angepasst, um eine spezifischere Oberfläche zu erstellen.
Viele dieser Hilfstechnologien basieren auf der programmatisch ausgedrückten Semantik, um eine barrierefreie User Experience zu schaffen. Darum geht es in dieser Lektion meistens. Bevor wir jedoch die programmatisch ausgedrückte Semantik erklären können, müssen wir noch ein wenig über Angebote sprechen.
Angebote
Wenn wir ein von Menschen hergestelltes Werkzeug oder Gerät verwenden, achten wir in der Regel auf seine Form und das Design, um uns eine Vorstellung davon zu vermitteln, was es kann und wie es funktioniert. Ein Angebot ist ein Objekt, das Nutzern die Möglichkeit bietet, eine Aktion auszuführen. Je besser das Angebot ist, desto offensichtlicher oder intuitiver ist seine Verwendung.
Ein klassisches Beispiel ist ein Wasserkocher oder eine Teekanne. Sie erkennen es leicht am Griff, nicht am Ausfluss, selbst wenn Sie noch nie eine Teekanne gesehen haben.
Das liegt daran, dass die Angebote denen von vielen anderen Objekten ähneln, z. B. Gießkannen, Getränkekrügen, Kaffeetassen usw. Wahrscheinlich könnten Sie den Topf am Ausgießer nehmen, aber Ihre Erfahrung mit ähnlichen Angeboten zeigt, dass der Griff die bessere Option ist.
In grafischen Benutzeroberflächen stehen Angebote für Aktionen, die wir ergreifen können. Sie können jedoch mehrdeutig sein, da es kein physisches Objekt gibt, mit dem wir interagieren können. GUI-Angebote sind daher speziell darauf ausgelegt, eindeutig zu sein: Schaltflächen, Kästchen und Bildlaufleisten sollen ihre Nutzung mit so wenig Training wie möglich vermitteln.
Sie können z. B. die Verwendung gängiger Formularelemente (Angebote) so formulieren:
- Optionsfelder: „Ich kann eine dieser Optionen auswählen.“
- Kontrollkästchen – "Ich kann für diese Option 'Ja' oder 'Nein' auswählen."
- Textfeld: „Ich kann etwas in dieses Feld eingeben.“
- Drop-down-Menü: „Ich kann dieses Element öffnen, um meine Optionen anzuzeigen.“
Sie können Schlussfolgerungen aus diesen Elementen ziehen, nur weil Sie sie sehen können. Natürlich kann jemand, der die visuellen Hinweise eines Elements nicht sehen kann, seine Bedeutung nicht verstehen und auch nicht intuitiv den Wert des Angebots erfassen. Die Informationen müssen also so flexibel ausgedrückt werden, dass sie von Hilfstechnologien abgerufen werden können, die eine alternative Schnittstelle konstruieren können, die den Anforderungen der Nutzer entspricht.
Diese nicht visuelle Darstellung der Verwendung eines Angebots wird als Semantik bezeichnet.
Screenreader
Eine beliebte Art von Hilfstechnologien ist der Screenreader. Dieses Programm ermöglicht sehbehinderten Menschen die Nutzung eines Computers, indem sie den Bildschirmtext mit einer generierten Stimme laut vorlesen. Der Nutzer kann steuern, was vorgelesen wird, indem er den Cursor in einen relevanten Bereich mit der Tastatur bewegt.
Wir haben Victor Tsaran gebeten, zu erklären, wie er als blinde Person mit einem in OS X integrierten Screenreader, VoiceOver, auf das Internet zugreift. Sehen Sie sich dieses Video an, in dem gezeigt wird, wie Victor VoiceOver verwendet.
Jetzt sind Sie an der Reihe: Probieren Sie einen Screenreader aus. Hier finden Sie eine Seite mit ChromeVox Lite, einem minimalen, aber funktionsfähigen Screenreader, der in JavaScript geschrieben wurde. Der Bildschirm wird absichtlich unkenntlich gemacht, um ein Erlebnis mit eingeschränktem Sehvermögen zu simulieren und den Nutzer dazu zu zwingen, die Aufgabe mit einem Screenreader auszuführen. Natürlich müssen Sie für diese Übung den Chrome-Browser verwenden.
Über das Steuerfeld am unteren Bildschirmrand können Sie den Screenreader steuern. Die Funktionalität dieses Screenreaders ist minimal. Sie können den Inhalt jedoch mit den Schaltflächen Previous und Next erkunden und mit der Schaltfläche Click auf Elemente klicken.
Verwende diese Seite mit aktiviertem ChromeVox Lite, um ein Gefühl für die Verwendung des Screenreaders zu bekommen. Denken Sie an die Tatsache, dass ein Screenreader (oder eine andere assistive Technologie) auf der Grundlage der programmatisch ausgedrückten Semantik tatsächlich eine vollständige alternative User Experience für den Nutzer schafft. Anstelle einer visuellen Oberfläche bietet der Screenreader eine hörbare Oberfläche.
Beachten Sie, wie der Screenreader Ihnen einige Informationen zu den einzelnen Oberflächenelementen mitteilt. Sie sollten davon ausgehen, dass ein gut durchdachtes Lesegerät Ihnen alle oder zumindest die meisten der folgenden Informationen über die Elemente erklärt, denen sie begegnen.
- Die Rolle oder der Typ des Elements, sofern angegeben (sollte sein).
- Der name des Elements, falls vorhanden (sollte)
- Der Wert des Elements, falls vorhanden. Er kann aber nicht angegeben werden.
- Der state des Elements, z.B. ob es aktiviert oder deaktiviert ist (falls zutreffend).
Der Screenreader kann diese alternative UI erstellen, da die nativen Elemente integrierte Metadaten zur Barrierefreiheit enthalten. So wie das Rendering-Modul den nativen Code zum Erstellen einer visuellen Benutzeroberfläche verwendet, verwendet der Screenreader die Metadaten in den DOM-Knoten, um eine barrierefreie Version zu erstellen.
