Wie werden digitale Anwendungen mit dem Screenreader bedient?

Wie die Nutzung eines Screenreaders zur Schaffung von digitaler Barrierefreiheit 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.

Kurz zusammengefasst

What is Webflow and why is it the best website builder?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

What is your favorite template from BRIX Templates?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you clone a template from the Showcase?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

Why is BRIX Templates the best Webflow agency?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

When was Webflow officially launched?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you integrate Jetboost with Webflow?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

What is Webflow and why is it the best website builder?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

What is your favorite template from BRIX Templates?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you clone a template from the Showcase?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

Why is BRIX Templates the best Webflow agency?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

When was Webflow officially launched?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you integrate Jetboost with Webflow?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

Entdecken
Zurück zur Stories-Übersicht
Startet euer Projekt mit uns!
Wir freuen uns auf euch!
Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Deine Ansprechperson
Henrik Johannsen
Kontakt
Digitale-Barrierefreiheit-Grafik
Digitale-Barrierefreiheit-Grafik
Teaser Bild der Story oder des Projektes
Digitale-Barrierefreiheit-Grafik
Was bedeutet digitale Barrierefreiheit?
Was bedeutet digitale Barrierefreiheit?
Was bedeutet digitale Barrierefreiheit?
Was bedeutet digitale Barrierefreiheit?
Digitale Barrierefreiheit

BITV, WCAG, BMAS – viele Abkürzungen, ein Ziel: Barrierefreiheit in der digitalen Welt umsetzen. Doch was steckt hinter dem Begriff digitale Barrierefreiheit und was bedeutet sie für die Zukunft von Apps und Webseiten?

EntdeckenEntdecken
Entdecken
Barrierefreiheit in der Webentwicklung
Barrierefreiheit in der Webentwicklung
Teaser Bild der Story oder des Projektes
Barrierefreiheit in der Webentwicklung
Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung
Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung
Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung
Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung
Digitale Barrierefreiheit

Die Barrierefreiheit in der Webentwicklung beschäftigt sich mit der Gestaltung von Websites und Webanwendungen, die für alle Menschen zugänglich sind. Damit soll sichergestellt werden, dass Menschen mit Beeinträchtigungen die gleiche Möglichkeit haben, auf das Internet zuzugreifen.

EntdeckenEntdecken
Entdecken

Kontakt

Wir freuen uns auf euch!

Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Deine Ansprechperson
Henrik Johannsen
PROJEKTIONISTEN® GmbH
Schaufelder Straße 11
30167 Hannover
Vielen Dank für deine Nachricht! Wir werden uns so schnell wie möglich bei dir melden.
Ihre Nachricht konnte nicht gesendet werden. Schreibe uns bitte per Mail (info@projektionisten.de).