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.
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.
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”.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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?
EntdeckenEntdeckenEs ist uns eine besondere Freude, dass wir vhh.mobility bei der Umsetzung der VHH Custom App für hör- und seheingeschränkte User unterstützen dürfen.
EntdeckenEntdecken