Keine Lust auf virtuelle Barrieren. Accessibility im Web: Screenreader

Wenn unser Werkstudent Yasha im Web unterwegs ist, ist er aufgrund seiner hochgradigen Sehbehinderung auf einen Screenreader angewiesen. Diese assistive Technologie erlaubt es ihm grafische Textinhalte in alternative Formen zu übersetzen. Rund 13 Mio. Menschen mit Beeinträchtigungen sind allein in Deutschland auf diverse Tools und eine barrierefreie Umsetzung von Software und Design angewiesen. Yasha teilt sein Wissen mit uns zur Nutzung und Funktion von Screenreadern und zum Thema SEO.

Für wen können Screenreader sinnvoll sein?

Zu den primären Nutzer:innen gehören blinde und sehbehinderte Menschen. Sie nutzen Screenreader oft auch in vollem Umfang.

Weiterhin sind sie ein Hilfsmittel für Menschen mit Konzentrationsschwierigkeiten oder einer Lese-Rechtschreib-Schwäche, denn durch die Sprachausgabe sind gesprochene Inhalte manchmal leichter zugänglich als lange Texte.

Auch für ältere Menschen kann es sinnvoll sein, Texte vorgelesen zu bekommen. Die Bedienung ist anfangs natürlich ungewohnt, daher kann eine integrierte Vorlesefunktion auf einer Webseite oder in einer App durchaus sinnvoll sein.

Was machen Screenreader?

Screenreader sind Software, die darauf ausgelegt sind, visuelle Bildschirminhalte (primär) für blinde und sehbehinderte Menschen zugänglich zu machen und die Bedienung von digitalen Systemen zu ermöglichen oder zu vereinfachen.

Das Hauptelement des Screenreaders ist die Sprachausgabe. Textinhalte werden entsprechend der aktuellen Einstellung in mehr oder weniger großen Blöcken vorgelesen (wortweise, satzweise, absatzweise, etc. ). Sprach- und Stimmqualität sind hierbei von Screenreader zu Screenreader sehr verschieden und können für gewöhnlich den eigenen Präferenzen angepasst werden.

Des Weiteren unterstützt der Screenreader auch alternative Navigationen, für Menschen, die das Gerät nicht über die Maus oder direkte Berührung auf dem Touchscreen bedienen können.

Für Geräte, wie Desktop PC’s oder Laptops wird eine reine Tastaturbedienung ermöglicht, touchbasierte Endgeräte wie Smartphones werden hingegen über verschiedene Gesten bedient.

Nicht zuletzt dient der Screenreader jedoch auch als Schnittstelle bei der Verwendung einer Braillezeile, d.h. er übersetzt den visuellen Text nicht nur in auditive Form, sondern bereitet ihn auch für die richtige Darstellung in Braille auf, da dies keine reine 1:1 Repräsentation des visuellen Textes ist. Beispiele hierfür sind Zahlen, die in Braille aus einem Zahlzeichen und den Buchstaben von A – bis J bestehen (”Zahlzeichen + A” = 1, “Zahlzeichen + BD” = 24, usw. ) oder Kürzungen (Kombinationen wie ”ei”, “sch”, aber auch häufige Endungen wie “ung” oder “keit” haben eigene Zeichen). Da es für die Braillezeile ein eigenes Braillesystem gibt, das anstelle von 6 Punkten aus 8 Punkten pro Zeichen besteht, unterscheidet sich die Darstellung hier jedoch ein wenig.

Darüber hinaus verfügen einige Screenreader auch über weitere Funktionen, wie beispielsweise Texterkennung, mit deren Hilfe auch Textinhalte, die nicht in der vorgesehenen Form vorliegen, sondern zB. in Bildern enthalten sind, ausgelesen werden können.

Vorteile für SEO

Eine screenreadertaugliche Gestaltung einer Webseite unterstützt nicht nur die Barrierefreiheit, sondern auch die Suchmaschinenoptimierung und die Code-Qualität, da sie die Verwendung von semantischem und somit maschinenverständlichem Code fördert.

Umsetzung

Anordnung der Elemente: Da ein Screenreader meist nicht für die Navigation auf einer zweidimensionalen Fläche ausgelegt ist, sondern Elemente entweder linear oder in einer hierarchischen Struktur darstellt, ist es wichtig, die Elemente in nachvollziehbarer Weise anzuordnen. Und auch eine sinnvolle und sparsame Verschachtelung von Elementen sollte berücksichtigt werden.

Erreichbarkeit: Ebenfalls berücksichtigt werden sollte, dass auch jedes Element auf der Nutzeroberfläche ansteuerbar ist, also man sowohl in Elemente, in denen eine Interaktion stattfindet, hinein-, sowie auch wieder herausnavigieren kann, als auch keine Interaktionselemente vom Screenreader übersprungen werden sollen.

Content: Alle Inhalte auf der Nutzeroberfläche sollten in der mediellen Form eingebunden werden, deren Zweck sie tatsächlich erfüllen. Ein Text sollte also nicht als rein visueller Text auf einem Bild, sondern auch tatsächlich in Schriftzeichen vorliegen. Auch eine strikte Trennung von Inhalt und Design macht Sinn, sodass Linien oder andere Designelemente nicht durch Bilddateien dargestellt werden (auf Webseiten ist das inzwischen auch eher unüblich, aber in anderen Formaten, bspw. pdf, taucht das noch häufiger auf).

Visuelle Inhalte sind für viele Screenreadernutzer:innen nicht zugänglich. Daher sollte darauf geachtet werden, dass diese Informationen für diese Gruppe nicht verloren gehen.

Bilder sollten immer über einen Alternativtext verfügen, der den Inhalt oder die Funktion des Bildes kurz erläutert. Diese Infos können im Element selbst oder an anderer Stelle in Textform eingebunden, aber visuell versteckt sein (bspw.: display: none in CSS). Durch Alternativtexte wird auch die Suchmaschinenoptimierung einer Webseite verbessert, eine vernünftige Verwendung sollte auch im Interesse der/des Webseitenbesitzer:in sein.
Formularfelder sollten immer über Labels verfügen, unabhängig davon ob, sie visuell dargestellt oder aufgrund der Breite des Bildschirms / des Formulars selbst versteckt werden.
Bei Links oder Buttons sollte auf sinnvolle Beschriftung / Linktext wertgelegt werden.

Hörbeispiel eines Screenreaders

Barrierefreiheit im Web geht uns alle an

Dieser Auszug zum Thema Screenreader soll zwei Dinge deutlich machen: Erstens, eine screenreadertaugliche Umgebung zu schaffen ist ein überschaubarer Aufwand. Zweitens und der viel wichtigere Aspekt – wir können dafür sorgen, dass sich jeder ermutigt fühlt das Web zu nutzen. Niemand soll ausgegrenzt werden, egal ob es sich um Beeinträchtigungen des Sehvermögens, des Gehörs, kognitiver oder motorischer Fähigkeiten handelt. Wir dürfen nicht vergessen, all diese Beeinträchtigungn können temporär oder permanent sein.

Haben wir bei der Entwicklung von Webseiten und Apps diese Punkte von Beginn an auf dem Schirm, laufen wir weniger Gefahr nachjustieren zu müssen. Denn hier ergibt sich der Zeit- und Geldaufwand.

Im nächsten Blog gehen wir auf das Thema Alternativtexte und den barrierefreien Umgang mit Grafiken und Bildern ein.

Alles über Web-Accessibility Standards findet ihr hier

___

Header pic: Daniel Ali on Unsplash