Barrierefreie App: Marlems Hauptstadt Quiz

Es gibt eine neue barrierefreie App des IT-Unternehmens Marlem-Software: Marlems Hauptstadt Quiz.

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 Mobilgeräten, egal ob im Betriebssystem Android oder im Betriebssystem IOS haben ein Menü „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 Egde ein Menü „… installieren“ oder „App installieren“.

Marlems Hauptstadt Quiz

Mit Marlems Hauptstadt Quiz können Sie von 198 Länder auf unserer Welt die Hauptstädte lernen.

Die App kann auf folgende Geräte installiert werden:

• Computer
• Laptop
• Smartphone
• Iphone
• Tablet
• Ipad

Die App wurde in folgenden Betriebssystemen getestet:

• Windows
• Ubuntu
• Android
• IOS
• MacOS

Die App sollte im Browser Google Chrome aufgerufen und installiert werden. Im Betriebssystem IOS funktioniert das installieren nur im Browser Safari.

In folgendem Youtube-Video sehen Sie wie Sie Marlems Hauptstadt Quiz im Betriebssystem Windows spielen können:

Im zweiten Youtube-Video sehen Sie wie Sie Marlems Hauptstadt Quiz im Betriebssystem Android spielen können:

Im dritten Youtube-Video sehen Sie wie Sie Marlems Hauptstadt Quiz im Betriebssystem IOS spielen können:

Marlems Hauptstadt Quiz installieren

Sie geben im Browser Google Chrome, im Betriebssystem IOS im Browser Safari, die Webadresse ein www.marlems-hauptstadtquiz.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 Marlems Hauptstadt Quiz.

Zielgruppe der App

Die Hauptzielgruppe der App sind Menschen ohne Behinderung die Lust haben Hauptstädte zu lernen. 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“, „Barrierefreiheit“ und „Leistung“ 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!

Marlems Hauptstadt Quiz – Hauptstädte lernen

So funktioniert Marlems Hauptstadt Quiz.

Kontinent auswählen

Als erstes müssen Sie einen Kontinent auswählen von dem Sie die Hauptstädte lernen möchten.

Quiz starten

Mit antippen oder anklicken des Schalters „Quiz starten“ wird das Hauptstadt Quiz gestartet. Die App stellt ihre erste Frage.

Hauptstadtvorschlag eingeben

Geben Sie in das Eingabefeld „Hauptstadt eingeben“ Ihren Hauptstadtvorschlag ein.

Hauptstadtvorschlag überprüfen lassen

Damit die App ihren Hauptstadtvorschlag überprüfen kann, tippen oder klicken Sie auf den Schalter „Antwort prüfen“. Unter dem Eingabefeld wird angezeigt ob Ihre eingegebene Hauptstadt richtig oder falsch ist. Wenn Ihre eingegebene Hauptstadt falsch war, zeigt die App an, wie die richtige Hauptstadt lautet.

Nächste Hauptstadt anzeigen

Mit antippen oder anklicken des Schalters „Weiter“ zeigt die App die nächste Land an von dem Sie die Hauptstadt raten sollen.

Ende des Hauptstadt Quiz

Wenn alle Länder abgefragt wurden, zeigt die App unter dem Eingabefeld an, wieviel Fragen (=Hauptstädte) es waren und wieviel davon Sie richtig beantwortet haben.

Wenn Sie mit Ihrem Ergebnis nicht zufrieden gewesen sind, können Sie mit antippen oder anklicken des Schalters „Quiz starten“, die gleichen Hauptstädte nochmal trainieren.
Wenn Sie mit Ihrem Quiz-Ergebnis zufrieden sind, können Sie Hauptstädte eines anderen Kontinents lernen oder die App beenden.

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 Marlems Hauptstadt Quiz 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!

Barrierefreiheit

Die App Marlems Hauptstadt Quiz 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

Marlems Hauptstadt Quiz 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.

Aktuelle Position des Fokus deutlich

Marlems Hauptstadt Quiz 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 Marlems Hauptstadt Quiz 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 Marlems Hauptstadt Quiz 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 Marlems Hauptstadt Quiz 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 die aufklappbare Liste, das Eingabefeld und alle Schalter eine Mindestgröße 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.

Werden Sie Quiz-Champion in Sachen Hauptstädte.

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 .