Progressive Web Apps barrierefrei entwickeln – Kurzanleitung

Progressive Web Apps (abgekürzt PWAs) sind plattformunabhängig und es ist sehr einfach eine Progressive Web-App barrierefrei zu entwickeln.  In diesem Artikel gibt es eine kurze Anleitung wie progressive Web Apps entwickelt werden.

Was ist eine App?

App ist die Abkürzung für Application. Application ist englisch und heißt auf deutsch Anwendung. Eine App ist also eine Anwendungen. Früher konnten Apps nur auf Smartphones und Iphones installiert werden. Dann wurden das Tablet und Ipad erfunden. Auf diesen Geräten ist es auch möglich Apps zu installieren. Inzwischen wird Software für Desktop-Betriebssysteme auch Apps genannt. Apps sind die Zukunft.

Gesetzliche Verpflichtung für Öffentliche Stellen des Bundes

Im Behindertengleichstellungsgesetz – BGG § 12a Barrierefreie Informationstechnik Absatz 1 steht:

(1) Öffentliche Stellen des Bundes gestalten ihre Websites und mobilen Anwendungen, einschließlich der für die Beschäftigten bestimmten Angebote im Intranet, barrierefrei. Schrittweise, spätestens bis zum 23. Juni 2021, gestalten sie ihre elektronisch unterstützten Verwaltungsabläufe, einschließlich ihrer Verfahren zur elektronischen Vorgangsbearbeitung und elektronischen Aktenführung, barrierefrei. Die grafischen Programmoberflächen sind von der barrierefreien Gestaltung umfasst.

Quelle: Behindertengleichstellungsgesetz – BGG § 12a Barrierefreie Informationstechnik

Es gibt also für den Staat eine gesetzliche Verpflichtung, dass nur Apps eingesetzt werden dürfen, die barrierefrei sind.

Progressive Web App – Definition

Progressive Web Apps, sind Apps die mit

• HTML5
• CSS ( Cascading Style Sheets )
• Javascript / jQuery

Programmiert werden.

Oft wird die Abkürzung PWA für progressive Web-App verwendet.

Progressive Web Apps sind plattformunabhängig, das bedeutet, sie funktionieren auf allen Betriebssystemen. Sie können auch auf allen Geräten wie Laptop, PC, Smartphone, Iphone, Tablet, Ipad eingesetzt werden.

jQuery ist eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt. jQuery ist die meistverwendete JavaScript-Bibliothek und vereinfacht die Programmierung von progressive Internetapps.
Es ist sehr einfach Progressive Web Apps zugänglich zu entwickeln. Hierfür müssen die gleichen Richtlinien umgesetzt werden, wie wenn eine Internetseite behindertengerecht entwickelt werden soll.

PWA vs. Webanwendung

Hier möchte ich einen Vergleich machen zwischen PWA und Webanwendung.
Eine Webanwendung benötigt immer eine internetverbindung. Eine PWA und eine Anwendung im Web wird mit Webtechnologien entwickelt. Webtechnologien sind beispielsweise: HTTP, PHP, HTML, Cascading Style Sheets, JavaScript, Java, XML. Anwendung im Web wird mit Webtechnologien wie PHP entwickelt werden. Bei einer PWA kommen nur die Webtechnologien HTML, CSS und Javascript zum Einsatz. Eine Internetanwendung kann nicht auf dem Homescreen eines Geräts installiert werden, eine PWA kann auf dem Homescreen eines Geräts installiert werden. Homescreen ist der zentrale Bildschirm eines Smartphones, Iphones oder Tablet. Der Homescreen kann je nach Hersteller, Betriebssystem und Launcher unterschiedlich organisiert und mit Inhalten ausgestattet werden. Durch die Verwendung des Homebuttons lässt sich der Homescreen einfach durch den Nutzer erreichen, sodass die wichtigsten Informationen oder Apps schnellstmöglich einsehbar sind.
Eine PWA kann offline, ohne Internetverbindung, genutzt werden. Eine Webanwendung kann nicht offline genutzt werden. Eine PWA und eine Anwendung im Internet sind verlinkbar. Für das auffinden in Suchmaschinen ist das Attribut „verlinkbar“ sehr wichtig. Mithilfe von Suchmaschinenoptimierung kann dafür gesorgt werden, dass Web Apps in Suchmaschinen gefunden werden.   Dadurch das eine PWA und eine Anwendung im Internet mit Webtechnologien entwickelt werden, sind sie plattforumunbhängig. Das bedeutet sie können auf allen Betriebssystemen eingesetzt werden.

Barrierefreie Appentwicklung – Definition

Appentwicklung bedeutet, dass eine App programmiert wird. Appentwicklung kann mit unterschiedlichen Programmiersprache wie zum Beispiel Java oder Swift umgesetzt werden. Bei der Entwicklung von native Apps für unterschiedliche Betriebssysteme, müssen Appentwickler mehrere Programmiersprachen beherschen.

Barrierefreie Appentwicklung bedeutet, dass eine App so entwickelt wird, dass sie für alle Menschen, auch Menschen mit Behinderungen und anderen körperlichen Einschränkungen bedienbar ist. PWAs haben sehr gute Voraussetzungen um sie barrierefrei zu entwickeln zu können.

Gibt es eine Zukunft für PWAs?

Noch immer gibt es viele Leute die PWAs kritisch gegenüber stehen und behaupten, dass es für PWAs keine Zukunft gibt. Seit ich mich mit Progressive Web Apps beschäftige, hat sich sehr viel getan. Damit eine progressive Web Apps mit Native Apps konkurrenzfähig sind, wurden immer wieder neue Sachen erfunden, welche die Möglichkeiten einer PWA verbessern.
Für viele Entwickler ist es toll, dass eine progressive Web App mit der selben Technologie programmiert wird wie eine Homepage. Um PWAs programmieren zu können, muss keine neue Programmiersprache gelernt werden wie Java oder Swift. Dass eine PWA plattformunabhängig ist, ist für Entwickler und Anwender vorteilhaft. PWAs sind auf Desktop- und Mobile Betriebssysteme einsetzbar.

Die Technologie der PWAs wird immer weiter entwickelt.
PWAs sind wie native Apps installierbar. Der Installationsvorgang bei PWAs ist auf jedem Betriebssystem gleich. PWAs können aber auch ohne Installation im Browser ausgeführt werden.

Die Entwicklung von PWAs für unterschiedliche Betriebssysteme ist sehr viel kostengünstiger wie die Entwicklung von native Apps für unterschiedliche Betriebssysteme.

PWAs haben eine großartige Zukunft und ich wünsche mir, dass PWAs irgendwann mächtiger sind wie Native Apps, weil PWAs viele Vorteile haben.

Hier ein Youtube-Video in dem ich die Grundzüge der Entwicklung von Progressive Web Apps erkläre:

Vorteile von PWAs zu nativen Applications

Zuerst möchte ich Ihnen erklären, warum ich ein PWAs begeistert bin. Hier einige Vorteile gegenüber nativen Applications :

• Plattformunabhängigkeit
• Unabhängigkeit von App-Stores
• Keine Installation & Updates
• „Offline First“ durch Service Worker
• Gute Performance
• Leicht teilbar
• Die Barrierefreiheit ist sehr einfach umsetzbar

Ich möchte die nativen Applications nicht schlecht reden.  Aber ich bin mir sicher, dass langfristige die PWAs die nativen Applications verdrängen werden.

Progressive Web-App – Begriffe kurz erklärt

In diesem Abschnitt möchte ich kurz erklären, was HTML, CSS und Javascript ist. Diese Begriffe sind für die Entwicklung von PWAs wichtig.

HTML

Die Hypertext Markup Language ist eine textbasierte Auszeichnungssprache. Einfach ausgedrückt: Auflistung aller Elemente die auf der Webpräsenz angezeigt werden sollen.

CSS

Cascading Style Sheets ist eine Stylesheet-Sprache für elektronische Dokumente. Layoutvorgaben: Wie soll jedes HTML-Element aussehen.

Javascript

JavaScript ist eine Skriptsprache, um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML zu erweitern. Heute wird JavaScript auch außerhalb von Browsern angewendet, etwa auf Servern und in Microcontrollern. Mit Javascript bekommt die progressive Web App Funktionalität. Es können Funktionen programmiert werden um bestimme Aufgaben nur einmal schreiben zu müssen. Diese Funktionen können dann an unterschiedlichen Stellen im Code aufgerufen. Durch die Verwendung von Funktionen wird der Code übersichtlicher. Das Verwenden von Funktionen erleichtert auch das aufspüren von Programmierfehlern. Javascript ist inzwischen eine harte Konkurrenz zu den Programmiersprachen Java und C#. Deswegen kann eine progressive Web App eine genauso mächte und umfangreiche Funktionalität besitzen, wie Java-oder C#-Software. Eine sehr attraktive Funktionalität ist die Sprachausgabe.

Node.js

Node.js ist eine plattformübergreifende Open-Source-JavaScript-Laufzeitumgebung, die JavaScript-Code außerhalb eines Webbrowsers ausführen kann.

App Shell

App Shell oder auch Anwendungs-Shell ist das minimale HTML, CSS und Java Script, das für das korrekte Laufen des User Interfaces der progressiven App benötigt wird. Das erste Laden von Shell sollte extrem schnell sein und sofort gecached werden. Das bedeutet, dass die Shell Files einmal über das Netzwerk bzw. online geladen und später lokal, zum Bieispiel im Browser gespeichert werden. Jedes weitere Öffnen der App sollte dann vom Cache durch Shell sehr schnell geladen werden. Die Architektur der App Shell trennt das Core der Anwendungsinfrastruktur und das User Interface von den Daten. User Interface, zu deutsch Benutzerschnittstelle, und Infrastruktur werden durch Benutzen von Service Worker lokal gecached, jedes andere Laden der App lädt nur die benötigten Daten anstelle von allen Daten.
Der Zweck von Anwendungs-Shell ist vergleichbar mit dem Hochladen bzw. online stellen eines App Packages im App Store, wenn man eine native App entwickelt.

Responsive Webdesign

Beim Responsive Webdesign bzw. mobile Design geht es darum eine Webpräsenz so zu gestalten, dass sie auf allen Endgeräten bzw. mobil, vor allem Smartphones, Iphones, Tablets und Ipads, gut aussehen. Damit das Responsive Webdesign unterstützt wird, muss das Meta-Tag „viewport“ angegeben werden:
initial-scale gibt die initiale Zoomstufe an. Gleichzeitig wird dafür gesorgt, dass die App-Oberfläche mit den Fingern gezoomt werden kann. Dies ist für Nutzer mit einer Sehbehinderung und für manche Senioren wichtig.
Responsive Webdesign,eine mobile Webpräsenz, ist bei der Entwicklung von PWAs sehr wichtig. mobile design kann auch richtig Spaß machen, wenn man das Grundprinzip verstanden hat.
Mit den Entwickler-Tools des Browsers Google Chrome können Sie testen wie ihre Web Apps  bzw. ihr mobile Design auf mobilen Endgeräten aussieht.

Web-App Manifest

Das Web-App-Manifest liefert Informationen über eine Anwendung (wie Name, Autor, Icon und Beschreibung) in einer JSON-Textdatei. Der Zweck des Manifests ist es,Internet-Anwendungen auf dem Homescreen eines Geräts zu installieren, was den Benutzern einen schnelleren Zugriff und eine umfassendere Erfahrung bietet.
Um es noch präziser zu formulieren:
Das Web-App-Manifest macht aus einer Internetseite eine Internetapp!

Sie können kontrollieren ob alle Angaben im Web-App Manifest in Ordnung sind. Im Browser Chrome rechts oben auf die 3 Punkte. Das Menü „Weitere Tools“, dann das Menü „Entwickler-Tools“. Oben gibt es ein Menü „App“. Dies anklicken. Der erste Eintrag links heißt „Manifest“. Wenn Ihr Webapp Manifest Fehler hat, werden diese hier angezeigt.
Wenn Ihr Web-App Manifest keine Fehler hat werden hier die Angaben für Identität, Präsentation und Symbole angezeigt.

Service Worker

Der Service Worker sorgt dafür, dass eine progressive Internetapp auch ohne Internetverbindung nutzbar ist. Es wird auch von Offline Fähigkeit gesprochen. Die Technologie ist ein sehr wichtiger Pluspunkt. Die Fähigkeit das eine Web App auch offline
nutzbar ist, sorgt dafür, dass dieser Art von Apps immer Funktionieren. Wenn der Besitzer eines mobilen Endgeräts im Ausland sich aufhält ist die Offline Fähigkeit auch ein großer Pluspunkt. Daneben bieten Service Worker auch die Grundlage für Push-Notifications, in deutsch Push-Benachrichtigungen, für progressive Web-Apps. Push-Notifications ist eine neue Möglichkeit, sofort mit App-Anwendern zu kommunizieren. Push-Benachrichtigungen verwenden zwei APIs:

• Notification API
• Push API

Die Technologie des Service Workers sorgt dafür, dass PWAs konkurrenzfähig sind zu Native Apps.

Service Worker einrichten mit Workbox

Workbox ist eine Reihe von Bibliotheken, die einen produktionsbereiten Service-Worker für Ihre Progressive Web App unterstützen können .
Das Unternehmen „Google“ hat die Workbox entwickelt. Die Workbox ist kein Windows-Programm und hat somit keine grafische Benutzeroberfläche. Im Betriebssystem Windows wird die Workbox in der Eingabeaufforderung installiert und ausgeführt. Eine Anleitung zur Workbox in englischer Sprache gibt es unter folgenden Link:
Workbox – Chrome Developers

Leider ist es nicht einfach im Internet eine einfache Anleitung zur Workbox zu finden. Hier kommt eine kurze Erklärung wie Sie mit Workbox einen Service Worker einrichten können.
Damit Sie die Google Workbox installieren können, muss Node.js installiert sein.
Ich habe folgende Schritte in Windows 11 im Dosfenster ausgeführt:

Workbox installieren

Folgendes eingeben und mit der Enter-Taste bestätigen:

npm install workbox-cli –global

Jetzt ist die Workbox installiert.

Workbox aufrufen

Folgendes eingeben und mit der Enter-Taste bestätigen:

workbox wizard

folgende Fragen müssen beantwortet werden:

? What is the root of your web app (i.e. which directory do you deploy)? Manually enter path
? Please enter the path to the root of your web app: .
? Which file types would you like to precache? css, svg, html, js, wav
? Where would you like your service worker file to be saved? sw.js
? Where would you like to save these configuration options? workbox-config.js
? Does your web app manifest include search parameter(s) in the ’start_url‘, other than ‚utm_‘ or ‚fbclid‘ (like ‚?source=pwa‘)? No

Folgendes eingeben und mit der Enter-Taste bestätigen:

workbox generateSW workbox-config.js

Service Worker in HTML-Datei installieren

Folgendes muss in die HTML-Datei eingebaut werden für die der Service Worker ist:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function(reg) {
// Registrierung erfolgreich
console.log('Registrierung erfolgreich.');
}).catch(function(error) {
// Registrierung fehlgeschlagen
console.log('Registrierung fehlgeschlagen mit ' + error);
});
};
</script>

Dateien per FTP hochladen

Damit das ganze funktioniert muss die HTML-Datei und folgende Dateien per FTP hochgeladen werden:

• sw.js
• sw.js.map
• workbox-6abf7752.js
• workbox-6abf7752.js.map
• workbox-config.js

Fertig!

Anmerkung

Die Datei „workbox-6abf7752.js“ kann ggf. auch anders heißen und wird sich über Zeit auch definitiv umbenennen.

Im Folgenden Youtube-Video zeige ich wie mit der Workbox ein Service Worker erstellt und eingebunden wird:

PWAs debuggen in Browsern

Der Browser Chrome hat sehr gute Möglichkeiten um Fehler in PWAs recht problemlos aufzuspüren. Das geschieht in den Entwicklertools, die mit F12 aufrufbar sind. Die Entwickler Tools Unterstützen das Auffinden von Fehlern.  Da Microsoft Edge mittlerweile auf der Chrome-Engine läuft, eignet auch dieser sich mittlerweile ebenfalls sehr gut zum Debuggen einer Web-App. Die Experience in Sachen Debuggen ist mit Firefox und Microsoft Edge nicht so gut, wie die Experience mit Chrome.

Hier ein Blogartikel über debuggen von einer progressive Web Apps die im Google Betriebssystem Android getestet wird:
Progressive Web Apps ( remote ) debuggen: Fehlersuche bei Android PWAs in Windows 11

Content bzw. Thema einer Web App

Der Content bzw. das Thema einer Webapp kann genauso flexibel sein wie bei Native Apps. Taschenrechner, Vokabeltrainer, Rechentrainer, Computerspiele und vieles mehr ist als Content für eine Internetapp denkbar.

Wie wird aus einer Webseite eine App?

Damit Ihre progressive Web App als Verknüpfung auf einem Homebildschirm gelegt werden kann, benötigt sie ein App-Symbol. Bei meiner App habe ich eine .png-Datei mit der Größe 200×200 genommen.
Die Hauptaufgabe aus Ihrer Webseite eine App zu machen übernimmt eine Manifest-Datei. Bei meiner neuen App die bald erscheint heißt die Datei „manifest.webmanifest“ .
Bei mir sieht die Datei „manifest.webmanifest“ wie folgt aus:
{
"lang": "de-DE",
"name": "Marlems Communicator - Assistent zur Kommunikation mit Menschen",
"short_name": "Marlems Communicator",
"description": "Assistent zur Kommunikation mit Menschen",
"background_color": "#00ccff",
"display": "standalone",
"orientation": "any",
"scope": "/",
"start_url": ".",
"icons": [{
"src": "marcommunicator.png",
"type": "image/png",
"sizes": "200x200"},
{
"src": "marcom512x512.png",
"type": "image/png",
"sizes": "512x512"}]
}


Der Text nach der Angabe „Name“ wird angezeigt,wenn Sie eine Verknüpfung auf den Android-oder IOS-Desktop anlegen.
Die Manifest-Datei muss in der HTML-Datei wie folgt angegeben werden:

<link rel="manifest" href="manifest.webmanifest">
Hier die Angaben, die in einer HTML-Datei gemacht werden müssen, damit eine Internetseite zur App wird am Stück:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.webmanifest">
<link rel="icon" sizes="200x200" href="marcommunicator.png">
<link rel="apple-touch-icon" sizes="120x120" href="marcommunicator120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="marcommunicator152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="marcommunicator180x180.png">


Das App-Icon sollte als PNG-Bild erstellt werden. Die Standardgröße des App-Icons ist 200×200.
App-Icons müssen immer quadratisch sein.
Eigentlich würde das Web-Manifest genügen. Leider macht das Unternehmen Apple nicht mit.
Damit das App-Icon auf dem Iphone, iPhone Plus, iPad und ipad Mini dargestellt wird, müssen obige Einträge (apple-touch-icon) in der HTML-Datei gemacht werden. Ebenso ist es notwendig, dass Sie 3 unterschiedliche png-Bilder erstellen mit folgenden Größen:

• 120 x 120 Pixel für iPhone
• 152 x 152 Pixel für iPad und iPad Mini
• 180 x 10 Pixel für iPhone Plus

Wenn Sie obige Schritte umgesetzt haben, wird ihr App-Icon auf dem Desktop der Betriebssysteme:

• Windows
• Android
• IOS

angezeigt.

PWAs können genauso cool aussehen und funktionieren wie Native Apps.

Installation einer Web-App

Eine Web-App benötigt meistens keinen Speicherplatz auf der Hardware(Mobiltelefon/Tablet/Ipad). Per „Add-To-Homescreen“-Button bzw. „Zum Startbildschirm zufügen“-Schalter kann die App installiert werden. Dies funktioniert auf Android-Smartphones und Tablets ebenso wie auf Iphones und Ipads.
Wenn Sie die Internetapp installiert haben, wird der Name angezeigt, welchen Sie im App-Manifest bei „Name“ angegeben haben.

Wenn Sie ein korrektes Web-Manifest haben und das Thema App-Icon richtig umgesetzt haben, passiert was spannendes:
Sie können Ihre Progressive Websoftware richtig installieren! Das installieren funktioniert in unterschiedlichen Betriebssystemen bzw. Plattformen. Der Installationsvorgang ist auf allen Plattformen gleich. Den Begriff „Installieren“ finden Sie nicht immer. Es kann auch heißen „Zum Home-Bildschirm hinzufügen“.

Leider unterstützen nicht alle Browser das installieren von progressive Web Apps. Der Browser Opera unterstützt es zum Beispiel nicht. Im Browser  Chrome im Betriebssystem IOS funktioniert es auch nicht. Ich würde mich freuen, wenn alle Browser in allen Betriebssystemen das Installieren von Web Apps unterstützen würden.

Durch die Möglichkeit der Installation hat der Nutzer einen sehr schnellen Zugriff auf die App.

In folgenden Blogartikel erkläre ich, wie progressive Web Apps in unterschiedliche Betriebssysteme installiert werden:

Progressive Web Apps installieren in den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS

Betriebssystem Windows

Ich habe folgende Vorgehensweise getestet im Betriebssystem Windows 11, Browser Chrome.
Das Menü mit den 3 Punkten untereinander auswählen.
Dann den Menüpunkt „Marlems Communicator – Assistent zur Kommunikation mit Menschen installieren …“ auswählen.
Die progressive Web App wird installiert, dass bedeutet es wird eine Verküpfung auf dem Windows Desktop angelegt.
Nachdem Doppeklicken erscheint die Web App im Vollbildmodus und es kann mit der App gearbeitet werden.

Deinstallieren

Die PWA ist gestartet im Vollbildmodus. Sie klicken auf die 3 Punkte untereinander.
Jetzt erscheint ein Menüeintrag „Marlems Communicator – Assistent zur Kommunikation mit Menschen deinstallieren …“
Bei Aktivierung des Menüpunkts, wird die Web App deinstalliert.

Bei Desktop-Betrriebssystemen wie Windows, Ubuntu und MacOS gibt es noch eine andere Möglichkeit eine PWA zu deinstallieren. In oben genannten Betriebssystemen wird eine PWA wie eine Software behandelt. Das bedeutet die PWA ist dort zu finden wo auch die installierte Software zu finden ist. Im Betriebssystem Windows 11 ist das „Einstellungen“, „Apps“, „Apps und Features“.  Hier kann eine PWA deinstalliert.

Betriebssystem Android

Ich habe es getestet auf einem Samsung Galaxy S7 mit Android Version 8 im Browser Chrome.
Das Menü mit den 3 Punkten untereinander auswählen.
Menü „App installieren“ draufklicken.
Jetzt rechts auf „installieren“ Tippen.
Es wird eine Verknüpfung auf dem Android-Desktop angelegt.

Deinstallieren

Mit dem Finger auf das App-Symbol klicken bis Menüeinträge erscheinen.
Auf das Menü „Deinstallieren “ tippen.
Es erscheint eine Frage ob die App wirklich deinstalliert werden soll.
Nach dem Tippen auf „OK“  wird die App installiert und das App-Symbol verschwindet  auf dem Desktop.

Eine installierte PWA ist in „Einstellungen“, „Apps“ zu finden. Hier kann die PWA deinstalliert werden.

Betriebssystem IOS

Im Browser Chrome im Betriebssystem IOS von Apple ist es nicht möglich, eine progressive Web App zu installieren.
Es funktioniert im Apple-Browser Safari. Hier Menü „Zum Home-Bildschirm“ draufklicken. Danach auf Link „Hinzufügen“ tippen.
Jetzt wird die App installiert. Das bedeutet, dass eine Verknüpfung auf dem Desktop angelegt wird.

Deinstallieren

Mit dem Finger länger auf das  App-Symbol drücken. Jetzt erscheint ein Menü.Menüeintrag „Lesezeichen löschen“ antippen. Jetzt tippen auf das Menü „Löschen“. Jetzt ist das Appsymbol nicht mehr auf dem Desktop.

Betriebssystem Ubuntu (Linux)

Im Browser Chrome in der GNU/Linux-Distribution kann die App genauso installiert werden wie im Browser Chrome im Betriebssystem Windows 11.

Nach der Installation meine Web-App habe ich etwas interessantes entdeckt.
Die App befindet sich im Menü „Anwendungen anzeigen“, links unten.

Deinstallieren

Die App ist gestartet im Vollbildmodus. Sie klicken auf die 3 Punkte untereinander.
Jetzt erscheint ein Menüeintrag „Marlems Communicator – Assistent zur Kommunikation mit Menschen deinstallieren …“
Bei Aktivierung des Menüpunkts, wird die Web App deinstalliert.

Hier der bildliche Beweis, dass meine Apps bei Anwendungen anzeigen zu finden ist:

Betriebssystem MacOS

Im Browser Chrome im Betriebssystem MacOS kann die App genauso installiert werden wie im Browser Chrome im Betriebssystem Windows 11.

Die installierte Web App ist im Launchpad zu finden, wo eigentlich nur Apple-Anwendungen zu finden sind:

Deinstallieren

Die App ist gestartet im Vollbildmodus. Sie klicken auf die 3 Punkte untereinander.
Jetzt erscheint ein Menüeintrag „Marlems Communicator – Assistent zur Kommunikation mit Menschen deinstallieren …“
Bei Aktivierung des Menüpunkts, wird die Web App deinstalliert.

Online-Verzeichnisse

Da es für progressive Webapps keine offiziellen Stores wie den Apple- oder Google-Store gibt, gibt es einige Online-Verzeichnisse, die diese Apps listen. Das größte Online-Verzeichnis von progressive Websoftware, das ausnahmslos installierbare PWAs listet, ist findPWA.

Barrierefreiheit bei der progressive Web App

Damit eine progressive Web App muss diese der europäischen Norm EN 301 549 oder der WCAG 2.1 entsprechen.
In folgendem Video erkläre ich den Begriff barrierefreie progressive Web-Apps .

Wichtige Kriterien für die Barrierefreiheit

Folgende Kriterien sollte eine Web App unbedingt erfüllen, damit sie zugänglich ist. Die Auflistung der Anforderungen ist nicht vollständig, sondern es sind nur die wichtigsten Anforderungen.

Screenreadertauglichkeit

Egal ob Ihre Web-App auf dem Laptop / Computer oder auf dem Smartphone, Iphone, Tablet oder Ipad ausgeführt wird, Ihre Progressive Web App muss screenreadertauglich sein. Ein Screenreader , ist eine Software die den Bildschirminhalt vorliest. Screenreader heißt in deutsch Bildschirmleser.
Blinde und sehbehinderte Menschen nutzen Screenreader. Menschen mit einer Sehbehinderung nutzen nur dann einen Screenreader, wenn die Seheinschränkung sehr stark ist. Appentwickler, denen es wichtig ist, dass ihre Apps auch von blinden Menschen bedient werden können, sollten auch Screenreader nutzen, um zu testen ob ihre Apps von blinden Menschen bedient werden können.

Folgende Screenreader bzw. Vorleseprogramme gibt es:

• NVDA für Windows
• VoiceOver bei IOS und MacOS
• Talkback bei Android
• Orca bei Ubuntu, GNOME-Desktop-Umgebung

Ich nutze alle aufgeführten Screenreader um sicher zu sein, dass meine PWAs für blinden Menschen bedienbar sind.

Damit Input-Schalter Screenreadertauglich sind, müssen Sie ihnen einen aria-label zuweisen.
Beispiel:
<input type="button" id="Sprachausgabe" value="Text Sprechen" accesskey="s" aria-label="Der eingegebene Text wird gesprochen (Taste Alt + s)" style="padding:10px;width:90%; font-size:120%;">

Beispielcode für einen Schalter:
<div id="btnquizstarten" tabindex="0" role="button" aria-label="Quiz Starten">Quiz starten</div>
Durch role weiss der Screenreader dass es ein Schalter ist und den Text in aria-label liest der Screenreader vor.

Alternativtexte bei Bilder

Software zum Vorlesen für blinde Menschen können keine Bilder lesen. Deswegen benötigen Bilder Alternativtexte die Beschreiben was auf einem Bild zu sehen ist. Informative Grafiken und Bilder müssen mit Alternativtexten versehen werden. Die Alternativtexte ersetzen das Bild, sie sollen also (wenn möglich) dieselbe Aufgabe erfüllen wie das Bild. Alternativtexte sollten zwischen 80 bis 140 Zeichen lang sein.

Die App-Oberfläche muss mit Fingern gezoomt werden können

Nutzer mit einer Sehbehinderung und Senioren mit nachlassender Sehfähigkeit haben Probleme mit dem lesen von kleiner Schrift.
Nutzer mit motorischen Behinderungen an den Händen haben Probleme kleine Buttons mit dem Finger anzutippen.
Für alle 3 Personengruppen ist es wichtig, dass eine App-Oberfläche mit dem Finger gezoomt, sprich vergrößert, werden kann.

Ein ZUGÄNGLICHER Farbkontrast

Nutzer mit einer Farbfehlsichtigkeit haben Probleme wenn auf einer Webseite eine dunkle Schrift auf dunklen Hintergrund ist oder eine helle Schrift auf hellen Hintergrund. Bei einer behindertengerechten progressive Web App ist der richtige Kontrast zwischen Schriftfarbe und Hintergrundfarbe  wichtig. Den richtigen Kontrast können Sie mit der kostenlosen Software Colour Contrast Analyser herausfinden.

Schaltflächen benötigen eine Mindestgröße

Für Benutzer mit motorischen Einschränkungen in den Händen und für Senioren die eine altersbedingte Einschränkung in den Händen haben, ist es wichztig, dass Buttons eine bestimmte Größe besitzen. Das erleichtert das drücken von Buttons mit den Fingern.

Das Weltunternehmen Google empfiehlt 48dp ? 48dp.  Siehe Make apps more accessible  . Ich verwende 48px oder 3rem. Wenn ich meine Apps mit dem Accessibility Scanner auf Barrierefreiheit überprüfe, ist dieser zufrieden.

PWAs für alle Nutzer bedienbar zu entwickeln ist einfach und macht Spaß!

Oben erwähnte Developer-Tools unterstützen Sie bei der Überprüfung ob eine Web-App zugänglich ist.

Tastaturbedienbarkeit

Progressive Web Apps können auf dem Computer bzw. Laptop ausgeführt werden. Für diesen Fall ist es wichtig das alle Bedienlemente per Tabulatortaste erreichbar sind. Da ich die Schaltflächen als Divs definiere, verwende ich hierfür das Attribut tabindex.
<div id="btnquizstarten" tabindex="0" role="button" aria-label="Quiz Starten">Quiz starten</div>
Mit dieser Methode sind alle meine Schalter per Tabulatortaste erreichbar.

Weiterführende Informationen zur Entwicklung von PWAs

Hier einige weiterführende Links zu progressiven Web-Apps.

MDN Developer Mozilla

MDN Web Docs ist eine sich entwickelnde Lernplattform für Web-Techniken und Software, die das Web antreibt. MDN war ehemals Mozilla Developer Network . Der Inhalt von MDN Web Docs ist, wenn nicht weiter angegeben, unter der freien Lizenz CC-BY-SA verfügbar. In MDN Web Docs gibt es detalliertte Informationen für Entwickler von PWAs.
MDN Web Docs Progressive web apps (PWAs)

Progressive Web-App Training – Google Chrome Developers (YouTube-Playlist)

Das Weltunternehmen Google hat die progressiven Web-Apps erfunden. Die hier verlinkte YouTube-Playlist wurde allerdings im Jahr 2019 zum letzten Mal aktualisiert. Diese Playlist ist für Entwickler von PWAs sehr interessant. Ich verlinke hier das erste Youtube-Video dieser Playlist.
Intro & Setup – Progressive Web App Training

PWAs entwickelt von Marlem-Software

Damit Sie sehen, dass ich das Entwickeln von Web-Apps auch praktiziere, stelle ich Ihnen hier zwei PWAs vor, die ich selbst entwickelt habe.

Web-App Marlems Sprechassistent – Sprechen trotz Stottern, Spastik oder Schlaganfall

Die erste PWA für Benutzer mit Behinderungen und Menschen mit anderen körperlichen Einschränkungen. Diese Web-App ist für folgende Personengruppen:

• Menschen, die wegen eine spastischen Lähmung Probleme mit dem Sprechen haben
• Menschen, die nach einem Schlaganfall Probleme mit dem Sprechen haben
• Menschen ohne Behinderung die mit dem Sprechen Probleme haben

Link zur PWA: Web-App Marlems Sprechassistent

Web-App Marlems Adventskalender

Ein Adventskalender als PWA. Hinter jedem Türchen verbirgt sich ein YouTube-Video. Alle YouTube-Videos sind Lieder, das bedeutet, es ist nicht schlimm ist, wenn blinde Menschen die Videos nicht sehen können, weil die Hauptinformation Musik und gesungener Text ist und nicht die Bilder sind. Ich habe die PWA im Betriebssystem Android erfolgreich mit dem Bildschirmleser Talk Back getestet. Blinde Benutzer können die PWA nutzen.
Link zur PWA: Barrierefreie App: Marlems Adventskalender

Web-App Marlems Communicator

Die App ist ein Assistent für Menschen mit dem Sprechen Probleme haben, wegen Stottern, weil sie überhaupt nicht sprechen können, weil sie eine Behinderung haben, zum Beispiel „Spastik„, oder weil sie nach einem Schlaganfall nicht mehr gut sprechen können.
Link zur PWA: Web App Marlems Communicator

Barrierefreie App: Marlems Reise Vokabeltrainer

Beschreibung:
Mit Marlems Reise Vokabeltrainer können Sie für ihren Urlaub die wichtigsten Vokabeln für folgende Sprachen lernen:

• Englisch
• Französisch
• Tschechisch
• Schwedisch

Die App wurde erfolgreich getestet:
Im Browser Google Chrome in den Betriebssystemen:

• Windows 11
• Android 8
• IOS 14
• Ubuntu 21.10

Im Browser Safari im Betriebssystem

• MacOS 10.15

Detaillierte Informationen gibt es in diesem Blogartikel:
Blogartikel – Barrierefreie Marlems Reise Vokabeltrainer App

Link zur barrierefreien Web-App: Marlems Reise Vokabeltrainer

Barrierefreie App: Marlems Reise Vokabeltrainer

Marlems Reise Vokabeltrainer wird in IT-Fachzeitschriften vorgestellt

• App-Vorstellung im Android Magazin Androidmag – Marlems Reise Vokabeltrainer
• App-Vorstellung auf der Webseite Android User – für alle Android-Fans – Marlems Reise Vokabeltrainer

Barrierefreie App: Marlems Hauptstadt Quiz

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

Die App wurde erfolgreich getestet:
Im Browser Google Chrome in den Betriebssystemen:

• Windows 11
• Android 8
• IOS 15
• Ubuntu 22.04

Im Browser Safari im Betriebssystem

• MacOS 10.15

Detaillierte Informationen gibt es in diesem Blogartikel:
Blogartikel – Barrierefreie App: Marlems Hauptstadt Quiz

Link zur barrierefreien Web-App: Marlems Hauptstadt Quiz

Barrierefreie App: Marlems Hauptstadt Quiz

Barrierefreie App: barrierefreie Stadt

Beschreibung:
Die App „Barrierefreie Stadt“ ist ein Computerspiel. Der App-Nutzer ist Bürgermeister von „Barrierefreie Stadt“ von Montag bis Freitag.

Die App wurde erfolgreich getestet:
Im Browser Google Chrome in den Betriebssystemen:

• Windows 11
• Android 8
• IOS 15
• Ubuntu 22.04

Im Browser Safari im Betriebssystem

• MacOS 10.15

Detaillierte Informationen gibt es in diesem Blogartikel:
Blogartikel – Barrierefreie App: barrierefreie Stadt

Link zur barrierefreien Web-App: barrierefreie Stadt

Barrierefreie App: barrierefreie Stadt

Schlussbemerkung

Progressive Web Apps sind einfach cool und ich freue mich jetzt schon auf das Jahr 2022, in dem ich in die Appentwicklung richtig einsteigen werde! Ich hoffe, dass dieser Artikel dazu beiträgt, dass PWAs ernst genommen werden. Ebenso wünsche ich mir, dass dieser Artikel zeigt, dass digitale Barrierefreiheit Spaß machen kann.

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

Weitere Artikel zur barrierefreien Appentwicklung

• Barrierefreie Appentwicklung: Android Apps auf Barrierefreiheit überprüfen