Das IT-Unternehmen Marlem-Software hat eine neue barrierefreie progressive Web App entwickelt, das Computerspiel Schiebe-Puzzle. Die App heißt „Marlems Schiebe-Puzzle“.
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 Schiebe-Puzzle ist www.marlems-schiebe-puzzle.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 Schiebe-Puzzle?
Schiebepuzzle ist ein Spiel, bei dem man versucht, durch Verschieben von Kacheln ein Bild oder eine Form wiederherzustellen. Das Spiel besteht aus einer quadratischen oder rechteckigen Schachtel, in der sich mehrere rechteckige Kacheln befinden. Jede Kachel ist mit einem Teil eines Bildes oder einer Form bedruckt.
Zu Beginn des Spiels sind die Kacheln in einer zufälligen Reihenfolge angeordnet, sodass das Bild oder die Form nicht erkennbar ist. Ziel des Spiels ist es, die Kacheln durch Verschieben so anzuordnen, dass das Bild oder die Form wiederhergestellt wird.
Das Verschieben der Kacheln erfolgt, indem man eine Kachel auswählt und sie in eine freie Position schiebt, um Platz für andere Kacheln zu schaffen. Man kann eine Kachel nur in eine Position schieben, die sich in unmittelbarer Nähe befindet und leer ist.
Das Spiel kann in verschiedenen Schwierigkeitsstufen gespielt werden, indem man die Anzahl der Kacheln erhöht oder die Anzahl der möglichen Bewegungen begrenzt. Schiebepuzzle sind in der Regel ein Einzelspieler-Spiel und können auf Papier oder mit einem Computer oder mobilen Gerät gespielt werden.
Wie funktioniert Schiebe-Puzzle App?
In diesem Abschnitt erkläre ich wie meine barrierefreie App funktioniert. Die App kurz erklärt:
Schiebepuzzle ist ein Spiel, bei dem man versucht, durch Verschieben von Kacheln ein Bild oder eine Form wiederherzustellen. Das Spiel besteht aus einer quadratischen oder rechteckigen Schachtel, in der sich mehrere rechteckige Kacheln befinden. Jede Kachel ist mit einem Teil eines Bildes oder einer Form bedruckt.
Zu Beginn des Spiels sind die Kacheln in einer zufälligen Reihenfolge angeordnet, sodass die Zahlen komplett durcheinander sind.
Das Spiel ist zu Ende, wenn in der ersten Reihe die Puzzleteile 1-3 von Links nach rechts sind. In der zweiten Reihe die Puzzleteile 4 – 6 von Links nach rechts sind. In der dritten Reihe die Puzzleteile 7-8 von Links nach rechts sind.
Marlems Schiebe-Puzzle – Im Browser aufrufen
In den Betriebssystemen Windows, Ubuntu, Android Macos öffnen Sie den Browser Google Chrome.
Im Betriebssystem IOS öffnen Sie den Browser Safari.
Geben Sie die Webadresse www.marlems-schiebe-puzzle.de ein und drücken die Taste „Enter“. Sie können Marlems Schiebe-Puzzle im Browser spielen oder die App installieren.
Marlems Schiebe-Puzzle – Warum Zahlen und keine Bilder
Ich habe die Programmierung eines Schiebe-Puzzles analysiert, da musste man ein Bild eines Tieres durch verschieben der Kacheln zusammensetzen. Das ist natürlich sehr viel spannender wie Zahlen in die richtige Reihenfolge zu bringen. Es gibt aber aus Sicht von Menschen mit Behinderungen ein nicht überwindbares Problem. Menschen die von Geburt an blind sind haben überhaupt keine Ahnung wie Tiere ganz generell aussehen. Deswegen hat mein Schiebepuzzle Zahlen. Bei meiner App spreche ich nicht von Kacheln, sondern Puzzleteile.
In folgenden Video wird gezeigt, wie Sie Marlems Schiebe-Puzzle installieren und spielen im Betriebssystem Android:
Spiel Starten
Menschen die mein barrierefreies Computerspiel am Computer oder Laptop spielen, klicken mit der Computermaus auf den Schalter „Schiebepuzzle starten“.
Menschen die mein barrierefreies Computerspiel auf dem Iphone, Ipad, Smartphone oder Tablet spielen, tippen mit dem Finger auf den Schalter „Schiebepuzzle starten“.
Puzzleteile verschieben
Es können nur Puzzleteile verschoben werden, neben denen das leere Feld sich befindet. Auf dem Computer müssen Sie mit der Computermaus auf ein Puzzleteil klicken. Au dem Smartphone, iphone, Tablet und Ipad müssen Sie mit dem Finger auf ein Puzzleteil tippen um was zu verschieben.
Puzzle-Ende
Das Spiel ist zu Ende, wenn in der ersten Reihe die Puzzleteile 1-3 von Links nach rechts sind. In der zweiten Reihe die Puzzleteile 4 – 6 von Links nach rechts sind. In der dritten Reihe die Puzzleteile 7-8 von Links nach rechts sind.
Das folgende Video zeigt wie Sie Marlems Schiebe-Puzzle im Betriebssystem IOS installieren und spielen können:
Barrierefreiheit
Die App „Marlems Schiebe-Puzzle“ ist barrierefrei. Das bedeutet, Menschen mit unterschiedlichen Behinderungen können mit meiner App das Computerspiel „Schiebe-Puzzle“ 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 Schiebe-Puzzle ist screenreadertauglich und kann somit von blinden Menschen bedient werden.
Das folgende Video zeigt wie Sie Marlems Schiebe-Puzzle im Betriebssystem Windows installieren und spielen können:
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 9 Puzzleteile, sind per Tabulatortaste erreichbar.
Aktuelle Position des Fokus deutlich
Wenn Marlems Schiebe-Puzzle 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 Schiebe-Puzzle 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 Schiebe-Puzzle 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. Der Farbkontrast von Marlems Schiebe-Puzzle ist barrierefrei. Menschen mit einer Farbfehlsichtigkeit können mit dieser App spielen.
Das folgende Video zeigt wie Sie Marlems Schiebe-Puzzle im Betriebssystem Ubuntu installieren und spielen können:
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 Schiebe-Puzzle“ erreichte folgendes Ergebnis bei der Überprüfung mit Google Lighthouse:
- Leistung: 95
- Barrierefreiheit: 100
- Best Practices: 100
- SEO: 100
- PWA: 100
Die Folgende Grafik zeigt den Beweis in Google Liegthouse:
Schlussbemerkung
Ich freue mich, dass ich im Jahr 2023, bereits im Februar, die zweite neue barrierefreie App veröffentlichen darf und wünsche allen viel Spaß mit „Marlems Schiebe-Puzzle“!
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 .