In diesem Artikel geht es um barrierefreie Appentwicklung. Ich gebe ich 10 Tipps wie progressive Web Apps zugänglich bzw. barrierefrei entwickelt werden können.
Appentwicklung – Definition
Appentwicklung ist der Vorgang oder Prozess, durch den eine mobile App für Smartphones, Iphones, Tablets oder Ipads, entwickelt wird.
Wie bei der Softwareentwicklung muss bei der Appentwicklung eine große Anzahl an unterschiedlichen Endgeräten berücksichtigt werden.
Appentwicklung kann mit Java, Objective-C, Swift oder Web-Apps mit HTML, CSS und Javascript umgesetzt werden.
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.
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 .