Wie werden digitale Anwendungen mit dem Screenreader bedient?

Wie die Nutzung eines Screenreaders funktioniert und warum bei der Softwareentwicklung diese Form der Bedienung besonders beachtet werden sollte, erklärt unser Entwickler Dominik in dieser Story.

Die Entwicklung barrierefreier Apps und Webseiten nimmt heutzutage einen immer größeren Stellenwert ein. Eine der zentralen Technologien, die von blinden oder seheingeschränkten Personen für die Bedienung am Computer oder Handy verwendet wird, ist der Screenreader. Ein solches Bildschirmleseprogramm kann Inhalte auf dem Bildschirm strukturiert vorlesen. Bei Mobilbetriebssystemen sind Apples VoiceOver für iOS und Googles TalkBack für Android am weitesten verbreitet.

Funktionsweise eines Screenreaders am Handy

Vielleicht haben Sie bei der Bedienung des Computers schon mal die Tastatur zu Hilfe genommen, um mit der Tabulatortaste von einem Formularelement zum nächsten zu springen. Bei der Bedienung mit einem Screenreader verhält es sich ganz ähnlich: Nach dem Aktivieren gibt es einen Fokus – ein Element, Text oder Bild, welches aktuell markiert ist und deren Informationen vorgelesen werden.

Dieser Fokus lässt sich verändern, indem man zum Beispiel durch Wischen von links nach rechts zum nächsten Element navigiert. Neben der einfachen Vor- und Zurücknavigation gibt es noch weitere spezielle Gesten, die die Bedienung vereinfachen. Die Struktur einer App muss also erst mal kennengelernt werden, indem man sich durch die Elemente wischt. Damit man auch als Sehender die Bedienung einer App mit dem Screenreader nachvollziehen kann, habe ich mir für das nachfolgende Beispiel einen Bereich der südtirolmobil-App ausgesucht, um zu zeigen, wie eine gute Berücksichtigung von Screenreadern aussehen kann.

Hürden bei der Verwendung eines Screenreaders

In der nachfolgenden Abbildung ist die Sprachauswahl der südtirolmobil-App dargestellt: Die Nutzer:innen haben die Möglichkeit, die Sprache auf deutsch, italienisch, englisch und ladinisch zu wechseln. Um dem Gefühl bei der Verwendung eines Screenreaders nahezukommen, sind die folgenden Beispiele in der Mitte und ganz links unscharf dargestellt und die Sprachausgabe des Screenreaders ist optisch unter den Beispielen zu sehen. Der Fokus des Screenreaders liegt auf dem ersten Element „DEU”.

Screenshots zeigen gutes und schlechtes Beispiel einer Screenreader-Aufbereitung für eine Sprachauswahl
Beispiel: Wie funktioniert die Auswahl der Sprache mit einem Screenreader?

In dem Positivbeispiel in der Mitte ist die Funktion als anklickbare Schaltfläche durch die Bezeichnung „Auswahltaste” gekennzeichnet. Die Nutzer:innen erhalten zusätzlich eine auditive Rückmeldung dazu, dass es sich um eine Gruppe von vier Elementen handelt und das erste Element selektiert ist. Sie wissen  also, dass es thematisch noch weitere Sprachen geben muss. Die eigentliche Sprachausgabe „deutsch” weicht hier ebenfalls von der grafischen Gestaltung „DEU” ab und zielt darauf ab präzise die ausgewählte Sprache zu benennen.

In dem Negativbeispiel (links) wird deutlich, welcher zusätzliche Informationsgehalt durch eine mangelhafte Berücksichtigung von Screenreadern verloren gehen kann: Es ist nicht ersichtlich, dass es sich bei „DEU” um eine Sprache handelt. Ebenso fehlt die Information, dass man diese Sprachauswahl anklicken kann („Auswahltaste”). Die thematische Gruppierung der vier Sprachen geht ebenfalls verloren. Der Nutzer weiß nicht, welche Sprache gerade in der App aktiv ist. Visuell lässt sich diese Information anhand der Schriftdicke- und farbe erkennen, für einen Screenreader bleibt sie jedoch verborgen.

Fazit

Für Sehende ist die Bedienung mit dem Smartphone intuitiv eine ganz andere, als für seheingeschränkte Menschen. Viele Informationen, welche durch die grafische Repräsentation der Benutzerschnittstelle einer App deutlich zu erkennen sind, gehen bei der Bedienung mit einem Screenreader verloren und müssen anderweitig für Screenreader verfügbar gemacht werden.

Wenn diese Umsetzung unzureichend durchgeführt wird, ist eine App oder Webseite für die Zielgruppe schwer verständlich, im schlimmsten Fall ist das Informationsangebot teilweise oder gar nicht bedienbar. Umso wichtiger ist es, bei der Konzeption und Entwicklung von digitalen Produkten die Bedienung mit dem Screenreader frühzeitig zu testen – am besten natürlich mit echten Nutzenden.

Ähnliche Stories
Teaser Bild der Story oder des Projektes
Teaser Bild der Story oder des Projektes
Teaser Bild der Story oder des Projektes
UX-/UI-Design

Konsistent und skalierbar gestalten – Design-Systeme

Konsistent und skalierbar gestalten – Design-Systeme

Konsistent und skalierbar gestalten – Design-Systeme

Was sind Design-Systeme und welche Vorteile bringen sie? Wir befragen unseren UX-/UI-Designer Johannes über die Methode der komponentenbasierten Interface-Gestaltung.

Entdecken
Entdecken
Teaser Bild der Story oder des Projektes
Teaser Bild der Story oder des Projektes
Teaser Bild der Story oder des Projektes
Projekt

Mobilitätsportal und -app für Südtirol

Mobilitätsportal und -app für Südtirol

Mobilitätsportal und -app für Südtirol

Für die Südtiroler Transportstrukturen AG haben wir das neue Mobilitätsportal und die Südtirolmobil-App konzipiert, gestaltet und umgesetzt.

Entdecken
Entdecken

Das gefällt Ihnen?

Kontaktieren Sie uns, damit wir mit Ihnen zusammen Ihre digitale Zukunft denken, gestalten und entwickeln können.

Kontakt

Wir freuen uns darauf, Sie kennenzulernen!

Portrait-Foto von Martin Löhdefink
Ihre Ansprechperson
Martin Löhdefink
PROJEKTIONISTEN® GmbH
Schaufelder Straße 11
30167 Hannover
Vielen Dank für Ihre Nachricht! Wir werden uns so schnell wie möglich bei Ihnen melden.
Ihre Nachricht konnte nicht gesendet werden. Schreiben Sie uns bitte per Mail (info@projektionisten.de).