Barrierefreie Appentwicklung: 10 Tipps für zugängliche progressive Web Apps

In diesem Artikel gebe ich 10 Tipps wie progressive Web Apps zugänglich bzw. barrierefrei entwickelt werden können.

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

Tastatur mit einer Taste auf der Barrierefrei steht
Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

So, nun folgen konkrete 10 Tipps wie Sie progressive Web-Apps zugänglich / barrierefrei entwickeln können.

1. Die Web-App muß screenreadertauglich sein

Testen Sie Ihrer Web-App mit einem Screenreader.

Bedienen Sie Ihrer App nur per Tastatur und überprüfen Sie ob der Screenreader alles vorliest, was für die Bedienung der Web-App wichtig ist. Damit die Web-App screenreadertauglich ist benötigen die Bedienelemente ein Title-Attribut. Im Title-Attribut befindet sich der Text der die Funktion des Bedienelements beschreibt.

Zum testen können Sie den kostenlosen Screenreader NVDA verwenden.

2. Bilder in Ihrer Web-App müssen Alternativtexte haben

Wenn Sie Bilder oder Grafiken verwenden sollten diese Alternativtexte haben, welche beschreiben, was auf einem Bild oder Grafik zu sehen ist.
Diese Alternativtexte werden von Screenreadern vorgelesen und sind für blinde und auch einige sehbehinderte Menschen wichtig.

3. Die Web-App sollte auch ohne Maus bedienbar sein

Blinde Menschen können keine Computermaus bedienen. Deswegen sind sie darauf angewiesen dass eine Web-App komplett per Tastatur bedienbar ist.
Überprüfen Sie ob alle Bedienelemente Ihrer Web-App per Tabulatortaste erreichbar ist.
Außerdem sollten die wichtigsten App-Funktionen per Tastaturkürzel erreichbar sein.

4. Der Tastaturfokus sollte gut sichtbar sein

Für Menschen mit einer Sehbehinderung ist es wichtig zu sehen, welches Bedienelement aktiv ist. Eine bewährte Methode ist, das aktive Bedienelement bekommt die Hintergrundfarbe gelb.

5. Beschriftung von Formularelementen programmatisch ermittelbar

Falls Ihre Web-App Formulare enthält, sorgen Sie dafür dass diese barrierefrei sind. Beschriftungen sollen mit Formularelementen, die sie beschriften, verknüpft sein. Bei Label-Elementen geschieht das über das For-Attribut oder den Einschluss des beschrifteten Formularelements in das Label-Element. Warum ist das wichtig? Der Screenreader liest die Beschriftungen vor, wenn der Benutzer durch die Formularelemente wandert. Ein Vorteil der Nutzung nativer Label-Elemente: Mausnutzer können durch einen Klick auf das Label den Fokus auf das zugeordnete Formularelement setzen.

6. Große, einfache Bedienelemente verwenden

Menschen mit motorischen Einschränkungen an den Händen haben Probleme kleine Bedienelemente zu „treffen“. In den Richtlinien von Google wird empfohlen, dass die Mindestgröße eines Bedienelements 48 dp x 48 dp betragen sollte.

7. Zoomfähigkeit

Menschen mit einer Sehbehinderung oder einer altersbedingten Seheinschränkung haben Probleme beim lesen von kleingeschrieben Texten auf App-Oberflächen. Deswegen sollte es möglich sein, die Oberfläche einer Web-App mit der üblichen Fingergeste zu vergrößern, im Fachjargon „zoomen“. Für Menschen mit einer motorischen Einschränkung, zum Beispiel aufgrund einer spastischen Lähmung, ist es ebenfalls wichtig, dass die App-Oberfläche zoomfähig ist, weil so die Fläche von Bedienelementen vergrößert werden kann.

8. Die Web-App sollte genügend Farbkontrast haben

Farbfehlsichtigkeit bedeutet, dass Menschen einer Farbe nicht immer den richtigen Farbnamen zuordnen können. Ebenso fehlt diesen Menschen das Gefühl, welche Farben zusammenpassen. Menschen mit einer Farbfehlsichtigkeit haben Probleme wenn eine Webseite oder eine Software einen dunklen Hintergrund und eine dunkle Schrift oder einen hellen Hintergrund und eine helle Schrift haben.

Mit der kostenlosen Software Colour Contrast Analyser kann überprüft werden ob der Farbkontrast zwischen Schrift-und Hintergrundfarbe barrierefrei ist.

9. Hauptsprache angegeben

Die Hauptsprache der Webseite soll angegeben werden. Screenreader verwenden Wortlisten, in denen die Aussprache der Wörter festgelegt ist. Sie müssen wissen, in welcher Sprache ein Text verfasst ist, damit sie die richtige Wortliste verwenden und den Text korrekt aussprechen können.

10. Korrekte Syntax

Die verwendete Markup-Sprache HTML muss korrekt eingesetzt werden. Die URL der zu prüfenden Seite im W3C-Validator eingeben.

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 .


Autor: Markus Lemcke

Ich bin Markus Lemcke, Softwareentwickler, Webentwickler, Berater und Dozent für barrierefreies Webdesign, barrierefreie Softwareentwicklung mit Java + C#, Barrierefreiheit bei den Betriebssystemen Windows, Android, IOS und Ubuntu.

Schreibe einen Kommentar