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 Kurzanleitung wie progressive Web Apps entwickelt werden.

Inhalt

Gesetzliche Verplichtung 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
  • 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 Web Apps.
Es ist sehr einfach Progressive Web Apps zugänglich zu entwickeln. Hierfür müssen die gleichen Richtlinien umgesetzt werden, wie wenn eine Webseite barrierefrei entwickelt werden soll.

Appsymbol von Marlems Adventskalender auf einem IOS Ipad
So sieht das Appsymbol von Marlems Adventskalender auf einem IOS Ipad aus

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, CSS, 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 Webanwendung kann nicht auf dem Homescreen eines Geräts installiert werden, eine PWA kann auf dem Homescreen eines Geräts installiert werden. Eine PWA kann offline, ohne Internetverbindung, genutzt werden. Eine Webanwendung kann nicht offline genutzt werden. Eine PWA und eine Anwendung im Web sind verlinkbar. Für das auffinden in der Suchmaschine ist das Attribut „verlinkbar“ sehr wichtig. Dadurch das eine PWA und eine Anwendung im Web mit Webtechnologien entwickelt werden, sind sie plattforumunbhängig. Das bedeutet sie können auf allen Betriebssystemen eingesetzt werden.

Barrierefreie Appentwicklung – Definition

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 Vorraussetzungen 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. Dass eine PWA plattformunabhängig ist, ist für Entwickler und Anwender vorteilhaft.

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 gegnü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. Ich werde dieses Jahr auch noch native Applications entwickeln. 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 Webseite 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.

So sieht Javascript-Code aus im Programmier-Editor Notepad++
Der Programmiereditor Notepad++ mit einer geöffneten Javascript-Datei

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 Webseite 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 Webseite, 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, Web-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 Webseite eine Web-App!

Sie können kontrollieren ob alle Angaben im Web-App Manifest in Ordnung sind. Im Browser Google 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 Web-App 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.

App-Manifest im Browser Chrome
App-Manifest im Browser Google Chrome

Service Worker

Der Service Worker sorgt dafür, dass eine progressive Web-App auch ohne Internetverbindung nutzbar ist. 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

Der Service Worker 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. Leider ist es nicht einfach im Web eine Anleitung zur Workbox zu finden.
Hier kommt eine Kurzanleitung wie Sie mit Workbox einen Service Worker einrichten können. 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

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

npx -p workbox-cli workbox generateSW

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.

PWAs debuggen in Browsern

Der Browser Google Chrome ist der einzige Browser, mit dem sich Fehler in PWAs recht problemlos aufspüren lassen. Das geschieht in den Entwicklertools, die mit F12 aufrufbar sind. Firefox von Mozilla kann das auch, dort ist es aber deutlich unkomfortabler. Allerdings hat Firefox von Mozilla coole Plugins zum Analysieren einer Webseite oder PWA auf Barrierefreiheit. 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 Google Chrome.

Content bzw. Thema einer Web App

Der Content bzw. das Thema einer Web-App kann genauso flexibel sein wie bei Native Apps. Taschenrechner, Vokabeltrainer, Rechentrainer, Computerspiele und vieles mehr ist als Content für eine Web-App 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 Marlems Communicator 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": "fullscreen",
"orientation": "any",
"scope": "/",
"start_url": ".",
"icons": [{
"src": "marcommunicator.png",
"type": "image/png",
"sizes": "200x200" }]
}

Progressive Web App Verknüpfung im Betriebssystem Android
Progressive Web App Verknüpfung im Google-Betriebssystem Android

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 Webseite 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 Web-App 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 Web App richtig installieren!

Betriebssystem Windows

Ich habe folgende Vorgehensweise getestet im Betriebssystem Windows 11, Browser Google 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.

Progressive Web App installieren, Windows 11 im Browser Google Chrome
Progressive Web App installieren, Betriebssystem Windows 11 im Browser Google Chrome

Deinstallieren

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

Betriebssystem Android

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

Eine progressive Web App installieren im Betriebssystem Android
Eine progressive Web App installieren im Google-Betriebssystem Android

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.

Progressive Web App deinstallieren im Betriebssystem Android
Progressive Web App deinstallieren im Google-Betriebssystem Android

Betriebssystem IOS

Im Browser Google 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“ antippen. 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 Google Chrome im Betriebssystem Ubuntu kann die App genauso installiert werden wie im Browser Google Chrome im Betriebssystem Windows 11.

Progressive Web App installieren im Browser Google Chrome im Linux-Betriebssystem Ubuntu
Progressive Web App installieren im Browser Google Chrome im Linux-Betriebssystem Ubuntu 21.10

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

Deinstallieren

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

Eine Progressive Web App wird im Browser Google-Chrome im Betriebssystem Ubuntu deinstalliert
Eine Progressive Web App wird im Browser Google-Chrome im Betriebssystem Linux-Ubuntu deinstalliert

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

Eine progressive Web App wird im Betriebssystem Ubuntu bei "Anwendungen anzeigen" gelistet
Eine progressive Web App wird im Linux-Betriebssystem Ubuntu bei „Anwendungen anzeigen“ gelistet

Betriebssystem MacOS

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

Eine progressive Web App wird im Browser Google Chrome im Betriebssystem MacOS installiert
Eine progressive Web App wird im Browser Google Chrome im Betriebssystem Apple-MacOS installiert

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

Eine progressive Web App im Launchpad des Betriebssystems MacOS
Eine progressive Web App im Launchpad des Apple-Betriebssystems MacOS

Deinstallieren

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

Eine progressive Web App wird im Betriebssystem MacOS deinstalliert
Eine progressive Web App wird im Browser Google Chrome im Apple-Betriebssystem MacOS deinstalliert

Online-Verzeichnisse

Da es für progressive Web-Apps 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 Web-Apps, 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 Kriterien ist nicht vollständig, sondern es sind nur die wichtigsten Kriterien.

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.

Folgende Bildschirmleser gibt es:

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

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%;">

Alternativtexte bei Bilder

Bildschirmleser 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 Schaltflächen 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 barrierefreier 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 barrierefreien 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 Schaltflächen eine Mindestgröße besitzen. Das erleichtert das antippen von Schaltflächen mit den Fingern.

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

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 die Stottern

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

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

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.

Schreibe einen Kommentar