Barrierefreie App: barrierefreie Stadt

Es gibt eine neue barrierefreie App des IT-Unternehmens Marlem-Software: Barrierefreie Stadt.

Barrierefreie Appentwicklung – Was ist das?

Barrierefreie Appentwicklung bedeutet, dass eine App so entwickelt wird, dass alle Menschen, auch Menschen mit Behinderungen und anderen körperlichen Einschränkungen, eine App bedienen können.

Warum ist barrierefreie Appentwicklung wichtig?

Das Ziel einer Gesellschaft sollte sein, dass Informatik für alle Menschen nutzbar ist.
Im Behindertengleichstellungsgesetz in § 12a Barrierefreie Informationstechnik steht, dass öffentliche Stellen des Bundes dazu verpflichtet sind, Apps barrierefrei zu gestalten.
Quelle: Behindertengleichstellungsgesetz in § 12a Barrierefreie Informationstechnik

Progressive Web App – Was ist das?

Eine Progressive Web App ist eine Webseite, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. Die Abkürzung für Progressive Web App ist PWA.
Eine PWA wird mit HTML, CSS und Javascript entwickelt. Durch sogenannte Service Worker ist es möglich, dass Progressive Web Apps ohne Internetverbindung genutzt werden können. Mit Hilfe einer Manifest-Datei ist es möglich, dass eine Progressive Web App genauso aussieht wie eine Native App. Progressive Web Apps sind plattformunabhängig, dass bedeutet, sie können auf allen Betriebssystemen eingesetzt werden.

Progressive Web Apps im Browser ausführen

Progressive Web Apps können im Browser ausgeführt werden oder installiert werden. Da progressive Web Apps von Google entwickelt wurden, bietet sich der Browser Google Chrome an. Im Betriebssystem IOS empfehle ich den Browser Safari.

Wie werden progressive Web-Apps „installiert“?

Alle Browser von Desktop und Mobilgeräten, egal ob im Betriebssystem Windows, Ubuntu, Android oder im Betriebssystem IOS haben ein Menü „App installieren“ oder „Zum Startbildschirm hinzufügen“ oder „Zum Home-Bildschirm“. Mit dieser Funktion kann eine Progressive Web App als Symbol auf den Startbildschirm angelegt werden.
Progressive Web-Apps können auch auf PCs oder Laptops in Browsern aufgerufen werden. Wenn eine progressive Web-App bestimmte Anforderungen erfüllt, dann gibt es im Browser Google Chrome und im Browser Edge ein Menü „… installieren“ oder „App installieren“.

Barrierefreie Stadt installieren

Sie geben im Browser Google Chrome, im Betriebssystem IOS im Browser Safari, die Webadresse ein www.mbarrierefreie-stadt.de und drücken die Taste Enter.
Sie können die App im Browser ausführen oder installieren.
Wie eine progressive Web App in den oben aufgeführten Betriebssystemen Installiert wird, können Sie in diesem Blogartikel lesen:
Progressive Web Apps installieren in den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS .
Nach dieser Anleitung installieren Sie die App Barrierefreie Stadt.

In folgendem Video zeige ich wie die App „Barrierefreie Stadt“ in den Betriebssystemen Windows 11, Android und IOS installieren.

Zielgruppe der App

Die Hauptzielgruppe der App sind Menschen ohne Behinderung die Lust haben in die Rolle eines Bürgermeisters zu schlüpfen und zu lernen, was alles notwendig ist, damit eine Stadt barrierefrei und inklusiv ist. Progressive Web Apps wurden von Google Entwickelt. Deswegen habe ich mich beim Entwickeln der App in Sachen Größe der Bedienelemente und Nutzung von Farben und Verwendung von Schriften an Google Standards gehalten! Die App bekommt bei der Überprüfung mit dem Tool Google Lighthouse in den Kategorien „PWA“, „SEO“, „Best Practices“ und „Barrierefreiheit“ volle Punktzahl.
Selbstverständlich gehören Menschen mit Behinderung ebenfalls zur Hauptzielgruppe der App! Ich habe die Reihenfolge der Zielgruppen deswegen so gewählt, weil ich mit meinen Apps ein Ziel habe! Ich möchte zeigen, dass eine App für Menschen ohne Behinderung ansprechend aussehen kann und trotzdem barrierefrei ist.
Barrierefreie Apps benötigen keine langweiligen Farben, riesen große Schaltflächen und Beschriftungen von Bedienelementen in Blindenschrift!
Nein! Barrierefreie Apps können nach Standards von Google entwickelt werden, ansprechend gestaltet sein und trotzdem barrierefrei sein!
In folgendem Video zeige ich wie die App „Barrierefreie Stadt“ im Betriebssystem Windows 11 funktioniert.

Barrierefreie Stadt

Die App „Barrierefreie Stadt“ ist ein Computerspiel. Der App-Nutzer ist Bürgermeister von „Barrierefreie Stadt“ von Montag bis Freitag. Als Bürgermeister muss er Aufgaben erledigen die mit Gleichstellung von behinderten Menschen und Inklusion zu tun haben. Wenn er immer wieder Aufgaben falsch löst, bekommt er Rückmeldung von den Einwohnern, dass Sie mit seinen Entscheidungen unzufrieden sind. Wenn er Zuviel falsche Entscheidungen trifft wird er von den Einwohnern und dem Gemeinderat als Bürgermeister abgesetzt.
Bei einer falschen Entscheidung erfährt der App-Nutzer warum seine Entscheidung falsch war. Ebenso lernt er durch falsche Entscheidungen die wichtigsten Paragraphen des Gesetz zur Gleichstellung von Menschen mit Behinderungen und einige Artikel der UN-Behindertenrechtskonvention.

In folgendem Video zeige ich wie die App „Barrierefreie Stadt“ im Betriebssystem Android funktioniert.

Wenn der App-Anwender alles richtig gemacht hat, bekommt er bei Spielende die Meldung, dass 100% der Einwohner von Barrierefreie Stadt mit ihm als Bürgermeister zufrieden gewesen sind.
Jeden Morgen wird dem App-Nutzer sein Terminkalender angezeigt. Es geschehen auch spontane Ereignisse die den App-Nutzer davon abhalten seine Aufgaben zu erledigen.

Schalter „Start“

Mit dem Schalter wird ein neues Spiel gestartet.

Schalter „Weiter“

Wenn der Terminkalender angezeigt wird und Sie haben den Eintrag gelesen tippen bzw. klicken Sie auf den Schalter „Weiter“.
Wenn ein spontanes Ereignis angezeigt wird und Sie haben es gelesen tippen bzw. klicken Sie auf den Schalter „Weiter“.
Haben Sie eine Aufgabe erledigt und die App zeigt Ihnen an, ob Sie die Aufgabe richtig oder falsch beantworten haben, dann gelangen Sie nachgelesen tippen bzw. klicken Sie auf den Schalter „Weiter“ zur nächsten Aufgabe.

3 blaue Schalter mit wechselnden Beschriftungen

In der App-Oberfläche gibt es 3 blaue Schalter in denen Texte angezeigt werden. Mit diesen Schaltern können Sie eine Aufgabe beantworten. Wenn Sie eine einen der Schalter bestätigen durch Anklicken mit der Computermaus oder antippen mit den Fingern wird oben, zwischen den Schaltern „Start“ und „Weiter“ angezeigt, ob Sie die Aufgabe richtig beantwortet haben.

Anzeige ob eine Aufgabe richtig oder falsch gelöst wurde

Zwischen den Schaltern „Start“ und „Weiter“ gibt es einen Bereich der nach dem Starten der App weiß ist. Wenn Sie eine Aufgabe richtig gelöst haben bekommt dieser Bereich eine grüne Hintergrundfarbe und in schwarzer Schrift steht „Ihre Antwort ist richtig!“.
Wenn Sie eine Aufgabe falsch gelöst haben bekommt dieser Bereich eine rote Hintergrundfarbe und in weißer Schrift steht „Ihre Antwort ist falsch!“. Sie erfahren auch warum Ihre Entscheidung falsch ist. So lernen Sie den Inhalt des Gesetz zur Gleichstellung von Menschen mit Behinderungen und eine bisschen den Inhalt der UN-Behindertenrechtskonvention .

Ende des Spiels

Wenn Sie zuviel Aufgaben falsch gelöst haben, wird Ihnen irgendwann folgendes Angezeigt:

SPIELENDE!

10% der Einwohner von „Barrierefreie Stadt“ sind mit Ihnen als Bürgermeister zufrieden!

In diesem Fall ist das Spiel vorzeitig zu Ende.
Wenn Sie alle Aufgaben richtig beantwortet haben und das Spiel nicht vorzeitig beendet wurde bekommen Sie folgenden Text angezeigt:

SPIELENDE!
100% der Einwohner von „Barrierefreie Stadt“ sind mit Ihnen als Bürgermeister zufrieden!

In folgendem Video zeige ich wie die App „Barrierefreie Stadt“ im Betriebssystem IOS funktioniert.

Die App kann auch ohne Internet genutzt werden

Wenn Sie die App zum ersten Mal starten benötigen Sie über WLAN oder Funk eine Internetverbindung. Beim ersten Starten der App werden alle notwendigen Dateien in ein Browserspeicher geladen. So bald alle Dateien im Browserspeicher sind, können Sie die App nutzen, auch wenn Ihr Smartphone, IPhone, Tablet oder IPad gar keine Internetverbindung hat.

App-Like

Es gibt momentan zwei verschiedene Arten von Apps. Native Apps und progressive Web Apps. Native Apps werden mit den Programmiersprachen Java, Kotlin, Swift und Objective-C programmiert. Progressive Web Apps werden mit HTML, CSS und Javascript programmiert.
Damit eine progressive Web App wie eine Native App aussieht, habe ich bei Barrierefreie Stadt dafür gesorgt, dass die App die Schriftarten des Betriebssystems benutzt. In Sachen Farbgestaltung habe ich mich an Material Design von Google orientiert. Die App-Oberfläche nutzt die ganze Display-Größe. In Sachen Gliederung der App-Oberfläche habe ich mich an der App von Google Analytics orientiert.
Somit hoffe ich, dass meine progressive Web App auch für Gegner von progressive Web Apps eine „echte“ App ist!
In folgendem Video zeige ich wie die App „Barrierefreie Stadt“ im Betriebssystem Ubuntu funktioniert.

Barrierefreiheit

Die App Barrierefreie Stadt ist barrierefrei!
Eine Anleitung wie Sie eine progressive Web App barrierefrei entwickeln finden Sie in folgendem Blogartikel:
Progressive Web Apps barrierefrei entwickeln – Kurzanleitung

Screenreadertauglichkeit

Menschen die blind sind arbeiten mit einer Software die heißt „Screenreader“, zu Deutsch Bildschirmleser. Damit eine App von blinden Menschen bedienbar ist, muss sie screenreadertauglich sein.
Ich habe die Screenreadertauglichkeit der App Barrierefreie Stadt mit dem kostenlosen Screenreader NVDA im Betriebssystem Windows 11 getestet und im Google Betriebssystem Android mit dem Screenreader Talkback. Beides mal wurden die Bedienelemente und Mitteilungstexte vorgelesen. Die App ist Screenreadertauglich. Blinde Menschen können mit dieser App arbeiten.

Tastaturbedienbarkeit

Barrierefreie Stadt kann auch am Computer oder Laptop genutzt werden. Hier besteht die Möglichkeit die ganze App per Tabulatortaste zu bedienen. Das „drücken“ der Schalter kann mit der Taste Enter durchgeführt werden.

Folgende Tastenkürzel gibt es:

s für die Schaltfläche „Start“.

w für die Schaltfläche „Weiter“

1 für Antwort 1

2 für Antwort 2

3 für Antwort 3

Anmerkung für Screenreader-Nutzer:

Wenn die Tastenkürzel nicht funktionieren, dann Alt-Taste + Tatenkürzel.

Alt-Taste + s für die Schaltfläche „Start“.

Alt-Taste + w für die Schaltfläche „Weiter“

Alt-Taste + 1 für Antwort 1

Alt-Taste + 2 für Antwort 2

Alt-Taste + 3 für Antwort 3

Aktuelle Position des Fokus deutlich

Barrierefreie Stadt kann auch am Computer oder Laptop genutzt werden. Hier besteht die Möglichkeit die ganze App per Tabulatortaste zu bedienen.
Für den Tastaturbenutzer ist es wichtig, zu sehen, wo sich der Tastaturfokus gerade befindet. Menschen mit einer Sehbehinderung haben oft Probleme zu erkennen welches Eingabefeld gerade aktiv ist. Der Textcursor wird oft als schmaler senkrechter Strich dargestellt. Das ist für Menschen mit einer Sehbehinderung oft nicht zu erkennen.
Bei der App Barrierefreie Stadt bekommt das aktive Bedienelement eine Gelbe Hintergrundfarbe. Somit ist die PWA für Menschen mit Sehbehinderung bedienbar.

Barrierefreier Farbkontrast

Damit der Farbkontrast zwischen Hintergrund- und Schriftfarbe, barrierefrei ist, habe in ihn mit dem kostenlosen Tool Colour Contrast Analyser überprüft. Die kostenlose App von Google, Accessibility Scanner für das Betriebssystem Android, zeigt ebenfalls an, wenn der Farbkontrast nicht barrierefrei ist.
Der Farbkontrast von Barrierefreie Stadt ist barrierefrei. Menschen mit einer Farbfehlsichtigkeit können mit dieser App arbeiten.

Mindestgröße der Schrift bei Beschriftungen von Bedienelementen

Für Menschen mit einer Sehbehinderung ist es wichtig, dass geschriebener Text eine bestimmte Mindestgröße hat. Senioren können ebenfalls davon profitieren, wenn die Schrift eine Mindestgröße hat. Deswegen habe ich bei der Entwicklung der App darauf geachtet, dass Beschriftungen eine bestimmte Mindestschriftgröße haben.

App-Oberfläche kann vergrößert bzw. gezoomt werden

Für Menschen mit einer Sehbehinderung ist es wichtig, dass die App-Oberfläche mit der üblichen Fingergeste gezoomt werden kann. Das zoomen der App-Oberfläche hilft Menschen mit Sehbehinderung beim Lesen von Texten oder Beschriftungen von Bedienelementen. Diese Funktionalität kann auch für Senioren hilfreich sein.
Die App-Oberfläche von Barrierefreie Stadt kann gezoomt werden.

Mindestgröße bei Bedienelementen

Menschen mit motorischen Einschränkungen in den Händen haben Probleme, mit dem Finger kleine Schaltflächen anzutippen. Senioren können ebenfalls Probleme haben mit zu kleinen Schaltflächen und Bedienelementen. Deswegen habe ich bei der Gestaltung der App-Oberfläche darauf geachtet, dass alle Schalter eine Mindesthöhe haben.
Menschen mit großen motorischen Einschränkungen in den Händen können die App auf einem Ipad, Tablet, Computer oder Laptop nutzen. Auf diesen Geräten werden die Schaltflächen sehr viel größer dargestellt.
Die Google-App „Accessibility Scanner“ hat die Mindesthöhe von Bedienelementen erfolgreich überprüft.

Liebe App-Nutzer, werden Sie Bürgermeister von „Barrierefreie Stadt“ und sorgen Sie dafür, dass sich in „Barrierefreie Stadt“ alle Menschen wohl fühlen.

Wenn Sie Fragen zu obige Themen haben schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .

Autor: Markus Lemcke

Ich bin Markus Lemcke, Softwareentwickler, Webentwickler, Appentwickler, Berater und Dozent für barrierefreies Webdesign, barrierefreie Softwareentwicklung mit Java, C# und Python, Barrierefreiheit bei den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS.