barrierefreie Appentwicklung: Progressive Web Apps

Seit September 2016 steht im Gleichstellungsgesetz für Menschen mit Behinderungen dass staatliche Einrichtungen dazu verpflichtet sind, mobile Anwendungen, umgangssprachlich App, barrierefrei zu gestalten. In diesem Artikel erkläre barrierefreie App-Entwicklung anhand von Progressive Web Apps.

Barrierefreie Appentwicklung – Gleichstellungsgesetz für Menschen mit Behinderungen

Im Gleichstellungsgesetz für Menschen mit Behinderungen steht seit September 2016 in § 12a Barrierefreie Informationstechnik Absatz 1 folgendes:

(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: Gesetz zur Gleichstellung von Menschen mit Behinderungen (Behindertengleichstellungsgesetz – BGG)

Mobile Anwendungen sind Apps. Somit sind staatliche Einrichtungen dazu verpflichtet, wenn sie Apps einsetzen, darauf zu achten, dass diese Apps barrierefrei sind.

So sieht Marlems Sprechassistent auf einem Android Smartphone aus:
Marlems Sprechassistent auf einem Android Smartphone

Warum sollten App-Entwickler sich mit barrierefreier App-Entwicklung beschäftigen?

Appentwickler, die ihre Apps an staatliche Einrichtungen wie Gemeindeverwaltungen, Landratsämter oder Regierungspräsidien verkaufen möchten oder von diesen beauftragt werden möchten, sollten sich mit barrierefreier App-Entwicklung auseinandersetzen, weil diese per Gesetz dazu verpflichtet sind. Generell führt barrierefreie App-Entwicklung dazu, dass mehr Menschen die Apps nutzen können.
In Deutschland leben laut statistischen Bundesamt 7,8 Millionen schwerbehinderte Menschen. 7,8 potentielle Kunden finde ich nicht schlecht und Sie?

Welche Möglichkeiten gibt es Apps zu entwickeln?

Folgende Möglichkeiten gibt es Apps zu entwickeln:

  • Android-Apps mit Java und der Entwicklungsumgebung Android-Studio
  • IOS-Apps mit Swift und der Entwicklungsumgebung Xcode
  • Progressive Web Apps mit HTML, CSS und Javascript in einem Texteditor

Was sind progressive Web Apps?

Eine Progressive Web App ist eine responsive Webseite, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. Sie kann erstellt werden wie eine Webseite mit HTML5, CSS3 und JavaScript. Die offizielle Abkürzung für Progressive Web App ist PWA.

Was ist barrierefreie App-Entwicklung: Progressive Web-Apps?

Barrierefreie App-Entwicklung bedeutet, dass Progressive Web-Apps so entwickelt werden, dass alle Menschen, auch Menschen mit körperlichen Einschränkungen, sie bedienen können.

Vorteile von barrierefreie App-Entwicklung als Progressive Web-Apps

  • Ein Code und läuft auf mehrere Betriebssysteme, Plattformunabhängigkeit
  • Kann über die Suchmaschine gefunden werden
  • Funktioniert auch ohne oder bei langsamer Internetverbindung
  • Schnellere Ladezeit als native Apps
  • Unabhängigkeit von App-Stores
  • Keine Installation & Updates
  • Verknüpfungen zur App können auf dem Desktop auf allen Betriebssystemen erstellt werden
So sieht die Web App Marlems Sprechassistent auf einem Laptop mit Betriebssystem Windows aus
Die Web-App Marlems Sprechassistent auf einen Windows-Laptop.

Barrierefreie Progressive App-Entwicklung – Was muss berücksichtigt werden?

Bei der Definition was eine progressive Web App ist habe ich geschrieben dass es eine Webseite ist. Das ist eine gute Nachricht. Das bedeutet, wenn Sie wissen wie eine Webseite barrierefrei gemacht wird, haben Sie auch das Wissen wie eine Progressive Web App barrierefrei gemacht wird. Folgende Punkte müssen bei der barrierefreien App-Entwicklung für Progressive Web Apps unbedingt berücksichtigt werden:

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. Folgende Screenreader gibt es:

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

Damit die Web-App screenreadertauglich ist benötigen die Bedienelemente ein Title-Attribut.

Codebeispiel:
<select name=“Auswahlsprechtexte“ id=“Auswahlsprechtexte“ title=“Text auswählen der gesprochen werden soll“ onchange=“LocalStorageTextLaden()“ accesskey=“w“ style=“width:76%;font-size:120%;“></select>

Alternativtexte bei Bilder

Screenreader 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.

Codebeispiel:
<img src=“Marlems_Sprechassistent_Smartphone_Android400.jpg“ alt=“So sieht Marlems Sprechassistent auf einem Android Smartphone aus“>

In folgendem Blogartikel finden Sie ausführliche Informationen zu Alternativtexte bei Bilder:
Barrierefreies Webdesign nach BITV 2.0: Alternativtexte bei Bilder

Tastaturbedienbarkeit bei Laptop oder Computer

Da eine Progressive Web-App auch auf Laptop oder Computer ausgeführt werden kann, muss über Tastaturbedienbarkeit nachgedacht werden. Menschen die blind sind oder eine Sehbehinderung haben können keine Computermaus bedienen. Deswegen müssen alle Bedienelemente per Tabulatortaste erreichbar sein. Außerdem ist es wichtig, dass wichtige Bedienelemente per Shortcuts, sprich Tastenkürzel, erreichbar sind. Tastenkürzel bei HTML-Bedienelemente werden mit dem Attribut Accesskey definiert.

Codebeispiel:
<select name=“Auswahlsprechtexte“ id=“Auswahlsprechtexte“ title=“Text auswählen der gesprochen werden soll“ onchange=“LocalStorageTextLaden()“ accesskey=“w“ style=“width:76%;font-size:120%;“></select>

Aktive Bedienelemente gut sichtbar bei Laptop oder Computer

Wenn eine Progressive Web-App auf einem Laptop oder Computer ausgeführt wird muss sie auch für Menschen mit Sehbehinderung bedienbar sein. Hierzu ist es wichtig, dass gut erkennbar ist, welches Bedienelement gerade aktiv ist, sprich den Fokus hat. Dies kann mit Cascading Style Sheets, abgekürzt CSS, umgesetzt werden.

Codebeispiel:
input:focus { background-color:#FFFF00; }
textarea:focus { background-color:#FFFF00; }
Mit diesem CSS-Code sorgen Sie dafür dass die Hintergrundfarbe von aktiven Eingabefeldern Gelb ist.

Die Schriftgröße und die komplette Web-App müssen skalierbar sein

Für Menschen mit einer Sehbehinderung ist es wichtig, dass die Schrift vergrößerbar ist bei einer progressive Web-App. Auf dem Laptop oder am Computer kann im Browser die Schrift gezoomt werden. Damit das funktioniert muss die Schriftgröße in CSS relative angegeben werden.

Codebeispiel:
body {font-size:100%;}
Wenn die progressive Web App auf einem Smartphone oder Tablet ausgeführt wird, ist es wichtig, dass Menschen mit einer Sehbehinderung diese mit dem Finger zoomen können.

Codebeispiel:
<meta name=“viewport“ content=“width=device-width, initial-scale=1″>

Mit diesen zwei Codezeilen sorgen Sie dafür, dass die Progressive Web App für Menschen mit Sehbehinderung bedienbar ist.

Der richtige Farbkontrast

Menschen 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 Farbkontrast wichtig. Den richtigen Farbkontrast können Sie mit der kostenlosen Software Colour Contrast Analyser herausfinden.

Wenn der Farbkontrast im Colour Contrast Analyser die Stufe 2 erfüllt, ist der Farbkontrast nach der deutschen Richtlinie BITV 2.0 barrierefrei. Wenn der Farbkontrast die Stufe 2 erfüllt ist der Farbkontrast nach WCAG 2.0 barrierefrei.

Individualisierbarkeit

Der Begriff Individualisierbarkeit ist ein Begriff aus der Usability, auf deutsch Benutzerfreundlichkeit. Ein Dialog ist individualisierbar, wenn das Dialogsystem Anpassungen an die Erfordernisse der Arbeitsaufgabe, individuelle Vorlieben des Benutzers und Benutzerfähigkeiten zulässt. Weil das jetzt sehr wissenschaftlich klingt, nochmal eine einfachere Definition von Individualisierbarkeit: Individualisierbarkeit bedeutet, dass der Nutzer bei Webseiten, Software und Apps Anpassungen machen kann die für ihn, die Bedienung erleichtern.

Individualisierbarkeit ist ebenso wichtig in der barrierefreien Informatik. Menschen mit einer Farbsehschwäche möchten bei einer Software Farbanpassungen machen. Menschen mit einer eingeschränkten Hand möchten bei einer Software Tastenkürzel, engl. Shortcuts, anpassen.

Bei der barrierefreien Appentwicklung mit progressive Web Apps ist die Individualisierbarkeit ein weiterer Vorteil. Ich erkläre es am Beispiel meiner selbst entwickelten Web App Marlems Sprechassistent . Angenommen ich bekomme eine E-Mail, ich soll die Schalter „Sprechen“, „Speichern unter“ und „Hilfe“ in der Höhe größer machen. Dann mache ich folgendes: Ich kopiere alle Dateien welche zur Ausführung der Web App wichtig sind in ein neues Verzeichnis. Danach passe ich die Schalterhöhe in der Datei „sprachausgabe.css“ an, so wie es der Kunde möchte. Ich muss nur Änderungen in der Datei „sprachausgabe.css“ machen, sonst nirgends. Dann lade ich alle Dateien von meinem kopierten Verzeichnis per FTP auf den Webspeicher vom Kunde. Der hat zum Beispiel eine Domain eingerichtet www.sprechassistent-sach.de . Schon habe ich eine individualisierte Web-App. Alle Dateien kopieren, Anpassungen machen in er CSS-Datei dauert höchstens 15 Minuten.

Barrierefreie Appentwicklung als progressiv Web-App bietet in Sachen Individualisierbarkeit tolle Möglichkeiten die schnell umgesetzt sind.

Barrierefreie Appentwicklung von Marlem-Software: Marlems Sprechassistent

So sieht Marlems Sprechassistent auf einem Ipad aus:
Marlems Sprechassistent auf einem Ipad mit gr&oumlen Schaltern
Die Web-App „Marlems Sprechassistent“ auf einem Ipad

Appfunktionen:

  • Texte schreiben und sprechen lassen
  • Texte speichern
  • Gespeicherte Texte sprechen lassen
  • Bedienelemente passen sich der Displaygröße an
  • Das aktive Bedienelement wird farblich hervorgehoben
  • Auf dem Laptop und PC per Maus oder per Tastatur bedienbar
  • Betriebssysteme: Windows, Android, IOS und Ubuntu (Linux)
  • Geräte: Laptop, PC, Smartphone, Iphone, Tablet, Ipad
  • Die App funktioniert auf Smartphones und Iphones auch ohne Internetverbindung
  • Die App kann auch im Ausland eingesetzt werden
  • Ausführliche App-Hilfe

Link zur barrierefreien progressive Web-App: Marlems Sprechassistent

Web-App Marlems Sprechassistent

Barrierefreie App-Entwicklung: Progressive Web Apps – Schlussbemerkung

Leider ist das Thema „barrierefreie App-Entwicklung“ noch immer nicht in Deutschland angekommen. Aber es gibt gute Gründe sich als App-Entwickler mit dem Thema barrierefreie App-Entwicklung zu beschäftigen. Das Thema barrierefreie App-Entwicklung mit Progressive Web Apps ist meiner Meinung nach eine Methode die Zukunft hat. Wenn Sie fragen haben zur barrierefreien App-Entwicklung rufen Sie mich an unter 07121/504458 oder schreiben Sie eine Mail an info@marlem-software.de .

Autor: Markus Lemcke

Barrierefreies Webdesign Barrierefreie Softwareentwicklung (Java + Microsoft.net) Barrierefreiheit bei Betriebssystemen(Windows, Android, IOS, Linux)

Schreibe einen Kommentar