Kein Bock auf virtuelle Barrieren. Accessibility im Web. Teil 1: Screenreader

Wer das Web mit gestaltet, sollte das Ziel haben Räume zu kreieren, die für alle zugänglich sind. Doch was bedeutet das im Sinne eines barrierefreien Webs? Unterstützende Software, wie Screenreader spielen eine große Rolle. Wie diese funktionieren, wer sie nutzt und was Barrierefreiheit für SEO bedeutet, erfahrt ihr im Blogpost von Yasha Müller.
Barrierefreiheit Mauer mit Aufschrift "Accessibility"
Vorlesen

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.

Assistive Technologie, Braille-Tastatur / pic: Elizabeth Woolner 
Assistive Technologie, Braille-Tastatur / pic: Elizabeth Woolner 

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, die einfach über einen Button ansteuerbar ist, 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.

Anzeige des Alternativtextes auf railslove.com
Screenreader Audio

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 beispielsweise in Bildern enthalten sind, ausgelesen werden können.

Dreamteam Accessibility und 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 Nutzer:innenoberflä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 Nutzer:innenoberflä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 Nutzer:innengruppe 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.

Inhalte absichtlich ausblenden?

In Ausnahmefällen kann darüber nachgedacht werden, zum Beispiel dann, wenn ein Bild eher einen Hintergrundcharakter hat und keine wirkliche Information enthält. Davon sollte aber nur äußerst selten Gebrauch gemacht werden. Auch wenn Bilder einen Text oft nur ausschmücken und nur selten durch Informationen ergänzen, lockern sie den Text oft ein wenig auf und bringen Emotionen rüber.

Barrierefreiheit im Web geht uns alle

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

Mehr von uns

Unsere Stories

4 MIN READ
2 MIN READ
4 MIN READ