Das IT-Unternehmen Marlem-Software hat eine neue barrierefreie progressive Web App entwickelt, das Computerspiel Hangman. Die App heißt „Marlems Hangman-Spiel“.
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. Die Web-Adresse vom Marlems Hangman-Spiel ist www.marlems-hangman-spiel.de .
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“.
In diesem Blogartikel wird erklärt, wie Sie eine progressive Web App in unterschiedlichen Betriebssystemen installieren können:
Progressive Web Apps installieren in den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS
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.
Was ist Hangman?
Hangman ist ein Wortraten-Spiel, bei dem ein Wort von einer Person erraten wird, indem Buchstaben nacheinander auf einer Leiste platziert werden. Eine Zeichnung eines Mannes, der aufgehängt wird, wird verwendet, um die Anzahl der falsch geratenen Buchstaben anzuzeigen. Je mehr Buchstaben falsch geraten werden, desto weiter wird die Zeichnung des aufgehängten Mannes fortgesetzt. Wenn das gesamte Wort erraten wird, gewinnt der Ratende. Wenn die Zeichnung des aufgehängten Mannes vollständig ist, bevor das Wort erraten wird, verliert der Ratende.
In meiner barrierefreien Hangman App wird kein Mann aufgehängt. Hier sieht der Computerspieler wieviel verbleibende Versuche er noch hat.
Die Hangman App kann auf unterschiedlichen Betriebssystemen installiert werden
Progressive Web Apps sind plattformunabhängig, das bedeutet sie können auf unterschiedliche Betriebssysteme installiert werden. Das dies auch für meine barrierefreie Hangman-App gilt, zeige ich hier in diesem Abschnitt.
Hangman App installieren im Betriebssystem Windows
Das folgende Video zeigt, dass meine Hangman App im Betriebssystem Windows installiert und genutzt werden kann:
Hangman App installieren im Betriebssystem Android
Das folgende Video zeigt, dass meine Hangman App im Betriebssystem Android installiert und genutzt werden kann:
Hangman App installieren im Betriebssystem IOS
Das folgende Video zeigt, dass meine Hangman App im Betriebssystem IOS installiert und genutzt werden kann:
Hangman App installieren im Betriebssystem Ubuntu
Das folgende Video zeigt, dass meine Hangman App im Betriebssystem Ubuntu installiert und genutzt werden kann:
Wie funktioniert Marlems Hangman-Spiel App?
In diesem Abschnitt erkläre ich wie meine barrierefreie App funktioniert. Die App kurz erklärt:
Nach dem der Schalter „Hangman starten“ aktiviert wurde, werden horizontale Striche dargestellt. Jeder Strich steht für einen Buchstaben. Aufgrund der Anzahl der Striche weiß also der Computerspieler, wieviel Buchstaben der zu erratende Begriffe. Nun kann der Computerspieler einen Buchstaben in das Eingabefeld eingeben und anschließend den Schalter „Buchstabe prüfen“ aktivieren. Die App zeigt ob der Buchstabe im Wort vorkommt oder nicht. Wenn der App-Spieler alle Buchstaben rät, die im Wort vorkommen hat er gewonnen. Wenn er 6 mal einen falschen Buchstaben rät hat er verloren.
Spiel Starten
Menschen die mein barrierefreies Computerspiel am Computer oder Laptop spielen, klicken mit der Computermaus auf den Schalter „Hangman starten“. Menschen die mein barrierefreies Computerspiel auf dem Iphone, Ipad, Smartphone oder Tablet spielen, tippen mit dem Finger auf den Schalter „Hangman starten“.
Anzeige des zu erratenden Begriffs
Nachdem Sie den Schalter „Hangman starten“ betätigt haben, werden unter dem Schalter Striche dargestellt. Jeder Strich steht für einen Buchstabe. Wenn Sie zum Beispiel 5 Striche sehen, bedeutet dass, der zu erratenden Begriff hat 5 Buchstaben.
Buchstaben die nicht vorkommen
Wenn Sie einen Buchstaben eingegeben und geprüft haben, der nicht im zu erratenden Begriff vorkommt, wird dieser Buchstabe im Bereich „Buchstaben die nicht vorkommen“ angezeigt. Mit dieser Anzeige können Sie kontrollieren welche Buchstaben Sie bereits geraten haben.
Verbleibende Versuche
Nach „Verbleibende Versuche“ steht eine 6. Das bedeutet, Sie dürfen 6 Mal einen Buchstaben falsch raten. Wenn Sie 6 Mal einen Buchstaben falsch geraten haben, haben Sie das Hangman-Spiel verloren.
Buchstabe eingeben
In das Eingabefeld „Buchstabe eingeben“, geben Sie einen Buchstaben ein von dem Sie denken, dass er im zu erratenen Begriff vorkommt.
Buchstabe prüfen
Nachdem Sie den Schalter „Buchstabe prüfen“ betätigt haben, überprüft die App ob der von Ihnen eingegebene Buchstabe im Eingabefeld, im gesuchten Begriff vorkommt. Wenn der Buchstabe vorkommt, wird er an den Stellen im Begriff angezeigt, an denen er vorkommt. Wenn der Buchstabe nicht im gesuchten Begriff vorkommt, wird er nach „Buchstaben die nicht vorkommen“ angezeigt. Außerdem wird die Zahl nach „Verbleibende Versuche“ um 1 reduziert.
Spielende
Das Spiel ist zu Ende, wenn Sie das gesuchte Wort erraten haben. Die App zeigt dann den Text an „Du hast gewonnen!“. Wenn Sie mal falsch geraten haben ist das Spiel auch zu Ende. Die App zeigt dann den Text an „Du hast verloren!“.
Barrierefreiheit
Die App „Marlems Hangman-Spiel“ ist barrierefrei. Das bedeutet, Menschen mit unterschiedlichen Behinderungen können mit meiner App das Computerspiel „Hangman“ spielen.
Screenreadertauglichkeit
Blinde Menschen nutzen am Computer und Mobilgeräte (Iphone, Smartphone, Ipad und Tablet) eine Vorlesefunktion, genannt Screenreader. Damit der Screenreader eine App-Oberfläche vorlesen kann, müssen Bedienelemente Textbeschreibungen zugewiesen werden. Marlems Hangman-Spiel ist screenreadertauglich und kann somit von blinden Menschen bedient werden.
Tastaturbedienbarkeit am Laptop und Computer
Progressive Web Apps können auch auf dem Laptop oder Computer ausgeführt oder installiert werden. Damit blinde und sehbehinderte Menschen die App auch dort bedienen können, muss eine App auch ohne Computermaus, nur per Tastatur bedienbar sein. Alle Bedienelemente, 2 Schalter und 1 Eingabefeld, sind per Tabulatortaste erreichbar.
Aktuelle Position des Fokus deutlich
Wenn Marlems Hangman-Spiel am Computer oder Laptop genutzt wird, 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 Hangman-Spiel bekommt das aktive Bedienelement eine Gelbe Hintergrundfarbe. Somit ist die App für Menschen mit Sehbehinderung bedienbar.
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 Hangman-Spiel kann gezoomt werden.
Barrierefreier Farbkontrast
Damit der Farbkontrast zwischen Hintergrund- und Schriftfarbe, barrierefrei ist, habe ich 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. Die Überprüfung mit dem Google Tool „Lighthouse“ zeigt, dass der Farbkontrast des Schalters “Buchstabe prüfen” nicht barrierefrei ist. Dies liegt nicht daran, dass ich es übersehen habe, sondern die Farbgestaltung von deaktivierten Schaltern ist ganz generell nicht barrierefrei.
Der Farbkontrast von Marlems Hangman-Spiel ist barrierefrei. Menschen mit einer Farbfehlsichtigkeit können mit dieser App spielen.
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.
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.
Die App wurde mit Google Lighthouse validiert
Google Lighthouse ist ein Tool von Google welches im Browser Google in den Entwickler-Tools zur Verfügung steht.
Bei allen Kriterien die Google Lighthouse gilt, der Wert 100 ist der höchste Wert der erreicht werden kann.
Die barrierefreie App „Marlems Hangman erreichte folgendes Ergebnis bei der Überprüfung mit Google Lighthouse:
- Leistung: 95
- Barrierefreiheit: 97
- Best Practices: 100
- SEO: 100
- PWA: 100
Anmerkung
Dass ich bei Barrierefreiheit nur 97 von 100 Punkten erreiche liegt am Schalter „Buchstabe prüfen“. Der Schalter ist deaktiviert und deswegen ist der Farbkontrast zwischen Schrift-und Hintergrundfarbe nicht barrierefrei. Das wird bei Software, zum Beispiel Excel, genauso gemacht und ist somit kein Programmierfehler von mir.
Schlussbemerkung
Ich freue mich, dass ich im Jahr 2023, bereits im Februar, eine neue barrierefreie App veröffentlichen darf und wünsche allen viel Spaß mit „Marlems Hangman-Spiel“!