Mobile Accessibility mit Drupal 8 umsetzen

Barrierefreiheit ist ein Mittel, um Menschen mit Behinderungen (physisch und virtuell) den gleichen Zugang zu ermöglichen wie anderen. Nicht-behinderte Menschen sind nicht mit den gleichen Hürden und Herausforderungen konfrontiert wie behinderte Menschen im täglichen Leben, und daher ignorieren viele die trivialen Bedürfnisse, wenn sie sich mit der Entwicklung des öffentlichen Sektors befassen oder in diesem Bereich arbeiten. Vom Bau von Rampen an Bürgersteigüberquerungen bis hin zum Anbringen von erhöhten Flächen in der Nähe der Gleise auf U-Bahn- und S-Bahnsteigen sind physische Verbesserungen in der ganzen Welt wie die Grundbedürfnisse für Menschen mit Behinderungen. In ähnlicher Weise bezieht sich Web- oder mobile Barrierefreiheit in der digitalen Welt auf die Anwendung ähnlicher Praktiken für eine integrativere Online-Umgebung.

Als Designer von Websites ist es eine wichtige Aufgabe, die Bedürfnisse von Menschen mit Behinderungen zu berücksichtigen, da diese für Aufgaben wie Kommunikation und Information auf Technologie angewiesen sind. Bevor wir uns daran machen, das Tool für Barrierefreiheit zu entfesseln, wollen wir definieren, was genau Barrierefreiheit für das Design mobiler Apps ist und wie es mobilen Apps hilft? Welche Rolle kann es für den Erfolg einer mobilen App spielen? Was sind die Leitprinzipien in Bezug auf Methoden, um die App-UI zugänglicher zu machen? Und was am wichtigsten ist, wer ist die Zielgruppe?

„Web-Barrierefreiheit bezieht sich auf die Anwendung ähnlicher Praktiken für eine integrativere Online-Umgebung.“

Barrierefreiheit als Ansatz ist nicht auf blinde Benutzer beschränkt. Daher sind bei der Gestaltung für mobile Benutzer auch folgende Punkte zu berücksichtigen: 

• Sehbehinderung
• Farbenblindheit
• Legasthenie und ähnliche kognitive Probleme, die die Lesbarkeit beeinträchtigen können
• Arthritis und Probleme mit der Beweglichkeit der Fingergelenke
• Eine Kombination von Behinderungen, die den Schwierigkeitsgrad erhöhen können

Laut den obigen Statistiken von WebAIM gaben 95 % der Befragten an, dass sie aufgrund einer Behinderung einen Screenreader verwenden, und die Kompetenz der Befragten soll in jeder nachfolgenden Umfrage zunehmen. Nur 5 % von ihnen verwenden keinen Screenreader, und weitere 3 % der Menschen mit Behinderungen stuften ihre Kompetenz als „Anfänger“ ein, verglichen mit 33 % der Menschen ohne Behinderung. 

Barrierefreiheit für mobile Benutzeroberflächen

Ein Großteil des Web-Traffics wurde in der letzten Zeit auf mobile Geräte verlagert, und die Barrierefreiheit von Inhalten und Funktionen für den Endbenutzer ist zu einem Problem geworden. Allen Benutzern einen einfachen Zugang zu ermöglichen, bedeutet, eine einfach zu bedienende App bereitzustellen, unabhängig davon, ob eine Behinderung vorliegt. Barrierefreiheit, eine einfache Zugangsfunktion, ist also ein Ansatz, der einen mühelosen Zugang zu den Inhalten ermöglicht, die ein Benutzer benötigt. Wenn man eine App entwirft, ermöglicht die Priorisierung der Barrierefreiheit, jede Art von Benutzer auf dem Markt anzusprechen. 

Viele Länder, die dem World Wide Web Consortium (W3C) folgen, haben einige einfache und unkomplizierte Standards für die Barrierefreiheit übernommen. Das Grundprinzip für die Gestaltung einer barrierefreien Benutzeroberfläche besteht darin, die App in realen Situationen nützlich zu machen, was die ursprüngliche Idee dahinter sein kann. Eine großartige Benutzererfahrung ist die Schlüsselkomponente eines hochwertigen UX-Designs, das mit einem barrierefreien UI-Design erreichbar ist. Zu den grundlegenden Funktionen der mobilen Barrierefreiheit können sprachgesteuerte Aktionen, Gestenerkennung usw. gehören. 

Warum ist Barrierefreiheit im Design wichtig?

„Viele Länder haben die barrierefreie Gestaltung zu einer gesetzlichen Verpflichtung gemacht, die der Einfachheit halber eingehalten werden muss.“

Weltweit leiden mehr als 1 Milliarde Menschen an irgendeiner Form von Behinderung, und allein in den USA ist fast jede fünfte Person behindert. Darüber hinaus wurden im Jahr 2017 etwa eintausend Klagen wegen Barrierefreiheit und damit zusammenhängender Probleme eingereicht. Diese Statistiken verdeutlichen die Notwendigkeit, das Web und Apps für alle zugänglich zu machen und die Barrieren zu beseitigen, die sowohl die Nutzung als auch das Wachstum der Anwendung behindern. Selbst für nicht-behinderte Benutzer ist die Barrierefreiheit als zusätzliche Funktion in der App beim Multitasking nützlich. 

Daher sollten die Benutzerfreundlichkeit und der Nutzen einer App für UI/UX-Entwickler oberste Priorität haben, unabhängig vom Kontext oder der Situation. Da die Notwendigkeit, Barrierefreiheit zu berücksichtigen, zu einer Notwendigkeit geworden ist und keine Wahl mehr für die Designer darstellt, ist ein stetiger Anstieg im Erfolgsdiagramm zu beobachten. Um diesen Trend aufrechtzuerhalten, haben viele Länder die barrierefreie Gestaltung zu einer gesetzlichen Verpflichtung gemacht, die der Einfachheit halber eingehalten werden muss. 

Probleme mit der mobilen Barrierefreiheit 

Barrierefreiheit als Funktion soll es Menschen mit unterschiedlichen Fähigkeiten und Methoden ermöglichen, auf Ihre Benutzeroberfläche zuzugreifen und sie effektiv zu nutzen. Lassen Sie uns die einzelnen Funktionen, die ein Problem darstellen können, wenn es darum geht, eine App barrierefrei zu machen, genauer betrachten. 

Tastatur

Mobile Geräte haben die Möglichkeit, je nach Daten eine andere Touchscreen-Tastatur anzuzeigen. Zwischen den beiden Arten von Elementen, interaktiven und nicht-interaktiven, müssen sich die Entwickler auf die aktivierbaren Elemente konzentrieren, und nicht-interaktive Elemente dürfen im Gerät nicht fokussierbar sein. Im Folgenden finden Sie einige Empfehlungen dazu: 

• Verwenden Sie Standard-HTML-Elemente, um automatisch auf die Tastatur zuzugreifen
• Für nicht standardmäßige Steuerelemente, wie z. B. Schaltflächen, Links oder Kontrollkästchen, sollten geeignete ARIA-Rollen zugewiesen werden. 
• Verwenden Sie <input type=tel, number, email, etc.>, um die Eingabe auf mobilen Geräten zu erleichtern, wenn Sie Formulareingabefelder in Ihre mobile Anwendung einfügen
• Zeigen Sie eine besser nutzbare und vereinfachte Tastatur für die Datentypen an, die Sie mit HTML5-Eingabetypen anfordern

Vergrößerte Abschnitte

Die Schriftart im Web kann sich bei Zugriff über mobile Browser oder Apps aufgrund der Bildschirmgröße ganz anders darstellen. Daher muss die mobile Anwendung eine Option zur Größenänderung für Schriftarten des Inhalts auf mindestens das Doppelte der Standard-Schriftgröße haben. Außerdem sollte das Zoomen für alle HTML-Inhalte im Browser und für eingebettete HTML-Inhalte in nativen Apps erlaubt sein. Dies ermöglicht den Zugriff auf die Inhalte für Menschen mit Kurzsichtigkeit und ähnlichen Behinderungen. 

Inhaltsstruktur

Die Codierung des Inhalts ist ein entscheidender Aspekt, wenn es darum geht, Barrierefreiheit zu gewährleisten. Der Inhalt muss so codiert sein, dass er Benutzern, die nur die Tastatur oder die Spracheingabe verwenden, sowie Screenreader-Benutzern hilft, auf alle Inhalte zuzugreifen und nichts zu verpassen. Eine Überschrift muss jede Seite oder jeden Bildschirm in einer logischen und hierarchischen Struktur eindeutig identifizieren. Dies vermittelt dem Benutzer ein Gefühl für die chronologische Reihenfolge und hilft bei der einfachen Inhaltssuche beim Hin- und Herwechseln zwischen den Webseiten. 

Wenn ARIA-Landmarken-Rollen Containern zugewiesen werden, die zur Strukturierung des Inhalts verwendet werden sollten, helfen sie beim Verständnis des Inhaltsflusses. Sie unterstützen auch assistierende Technologien wie Screenreader für Menschen, die das visuelle Layout nicht sehen können. Wenn Sie beispielsweise alle Navigationselemente in einem Container gruppieren und die Landmarken-Rolle als „Navigation“ zuweisen, können Screenreader-Benutzer schnell innerhalb einer Seite oder eines Bildschirms navigieren.

Farbkontrast 

Für Benutzer mit Farbenblindheit, Farbsehschwäche, Sehbehinderung und kognitiven Beeinträchtigungen ist ein gutes Farbkontrastverhältnis ein wesentliches Element in der Technologie. Es betrifft Menschen mit schlechter Sicht und Legasthenie, da sie Farbe als Unterscheidungsmerkmal für Elemente und Inhalte auf dem Bildschirm verwenden. Tools wie Color Contrast Checker sind nützlich, um das Gerät für Benutzer mit Farbsehschwächen zugänglich zu machen.

Gemäß den Web Content Accessibility Guidelines (WCAG) sollten Entwickler Farben wählen, die einen ausreichenden Kontrast zwischen dem Inhalt und dem Hintergrund der Seite bieten. Dies berücksichtigt die Bedürfnisse von Personen mit Sehschwäche und Farbsehschwäche, um den Inhalt leicht wahrnehmen zu können. WCAG 2.0 Level AA erfordert ein Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text, da großer Text aufgrund seiner Größe leichter zu lesen ist. Fazit: Der Text, der vor dem Texthintergrund in mobilen Web- und App-Designs verwendet wird, sollte die Farbkontrastanforderungen von WCAG 2.0 Level AA erfüllen.

Touch-Ziele 

Oftmals kann die Berührung der mobilen Bildschirme den Zugriff behindern. Wenn eine Aktion durch Berühren eines Bildschirms oder durch Wischen/Drücken einer Taste ausgelöst wird, kann dies fehlerhaft sein. Daher darf die Aktion nur für eine bestimmte Art der Benutzerinteraktion ausgelöst und erst dann initiiert werden, wenn der Benutzer die Aktivierung abgeschlossen hat. Mit anderen Worten, erst wenn der Finger von den anklickbaren Elementen genommen wird, sollte die Aktivierung der Aktion beginnen. Die Lücke zwischen der Initiierung und der Aktivierung gibt den Benutzern einen Zeitrahmen, um ihre Meinung zu ändern, und Benutzern mit Behinderungen, die präzisen Elemente zu lokalisieren, ohne unbeabsichtigte Aktionen auszulösen. 

Scrollen

Das Herunterscrollen von Inhalten als Barrierefreiheitsfunktion wird von den Entwicklern oft übersehen. Um Probleme mit abgeschnittenen Inhalten beim Wechsel vom Desktop zum Mobilgerät zu vermeiden, sollten Entwickler die Verwendung relativer Größeneinheiten für Inhalte und Container sicherstellen. Außerdem sollte es eine sekundäre Methode für Drag & Drop geben. Es ist erforderlich, die Seitengröße zu ändern, da die Drag & Drop-Funktionalität dazu führen kann, dass mobile Browser das Zoomen deaktivieren. 

Audio oder Video

Die automatische Wiedergabe von Audio und Video kann für Screenreader-Benutzer ein Problem darstellen und manchmal störend sein. Auch Benutzer mit kognitiven oder sensorischen Empfindlichkeiten können dadurch gestresst werden. Es sollte eine Option für Benutzer geben, ihre Präferenzen für die automatische Wiedergabe oder Nicht-automatische Wiedergabe von Inhalten festzulegen, wodurch das Design für alle Arten von Benutzern zugänglich wird. 

Sobald diese Faktoren berücksichtigt und erfolgreich implementiert wurden, besteht der nächste Schritt darin, zu testen (manuell oder automatisiert) und zu überprüfen, ob der Inhalt mit den Eingaben übereinstimmt. 

Richtlinien für barrierefreies Design

Um die Barrierefreiheit zu gewährleisten, durchlief die Benutzeroberfläche viele Ansätze, um die Best Practices einzuhalten. Es gab einige Leitprinzipien, die sich herauskristallisiert haben, und vor kurzem hat das World Wide Web Consortium einige effektive Standards für die Barrierefreiheit vorgeschrieben, die bei der Gestaltung der Benutzeroberfläche zu berücksichtigen sind. Die Richtlinien sind in zwei Bereiche unterteilt: ATAG 2.0 und WCAG 2.0. 
Drupal CMS hält sich an beide Richtlinien und berücksichtigt einige der besten Funktionen für die Barrierefreiheit: 

• Design: Dieses Prinzip besagt, dass das Design es ermöglichen sollte, Inhalte auf unterschiedliche Weise und entsprechend den unterschiedlichen Fähigkeiten der Benutzer zu konsumieren.
• Bedienbarkeit: Die App sollte Interaktionen ohne Komplexität und Verwirrung ermöglichen.
• Verständlichkeit: Dieses Prinzip besagt, dass der Benutzer verstehen muss, wie die App funktioniert und wie er Inhalte finden und die App nutzen kann.
• Assistierend: Schließlich sollte die App verschiedene assistierende Geräte wie Screenreader für Benutzer mit irgendeiner Art von Behinderung unterstützen.

Drupal 8 und Barrierefreiheit

Laut dem neuesten Comscore Global Mobile Report 2018 werden mehr als 80 % der mobilen Minuten in allen Märkten mit Apps verbracht. Angesichts der Nachfrage und der Notwendigkeit der Stunde hat Drupal 8 seine Module mit erheblichen Verbesserungen in Bezug auf die Barrierefreiheit aktualisiert, die eine solide Grundlage für Ihre Website gewährleisten können. Werfen wir einen Blick darauf:

Alt-Text

Alternativer (Alt-)Text ist eine einfache Beschreibung des Bildes in Worten, die für Benutzer mit einer Behinderung bereitgestellt werden muss. Er wird von Tools wie Screenreadern verwendet, spiegelt sich aber nicht in der Anzeige der Seite wider. Obwohl Alt-Text in Drupal 8 eine Standardanforderung ist, erfordert er einen ordnungsgemäßen Schulungsprozess für die Ersteller von Inhalten, um sicherzustellen, dass der Text eine angemessene Beschreibung des Bildes in Bezug auf einen beabsichtigten Zweck ist und nicht nur eine zufällige Erklärung in wenigen Worten. 

Semantische Elemente

Die Verwendung semantischer Elemente ermöglicht es, „nav“ anstelle von div oder span zu verwenden, wobei divs und spans generische HTML-Tags sind, die die Elemente auf einer Seite definieren. Semantische Elemente ermöglichen es Entwicklern, einen Namen zuzuweisen, der dem Zweck eines bestimmten Elements in HTML5 entspricht. Drupal 8 nutzt dies zu seinem Vorteil und bietet einen gemeinsamen Elementnamen für Benutzer und Maschinen, damit diese wissen, was sie erwartet. Dies kann jedoch zu einer Überschneidung von SEO und Barrierefreiheit führen, da die gleichen Namenselemente von Suchmaschinen-Crawlern verwendet werden, um die Seiten zu verstehen.

WAI-ARIA

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications), eine technische Spezifikation, die vom World Wide Web Consortium (W3C) veröffentlicht wurde, befasst sich mit der Bereitstellung bestimmter Arten von Inhalten und legt fest, wie die Barrierefreiheit von Inhalten auf Webseiten erhöht werden kann. Zum Beispiel die Drag & Drop-Funktionalität. Für eine verständlichere und unterstützende Nutzung folgt und integriert Drupal 8 die WAI-ARIA-Richtlinien. 

Auditive Benachrichtigungen

Die Grundlagen eines Screenreaders bestehen darin, sich immer nur einen Teil der Seite anzusehen. Wenn also eine Änderung auf der Seite stattfindet, ist sich der Leser dessen in der Regel nicht bewusst, es sei denn, er wird vom Screenreader darauf hingewiesen. Eine Javascript-Methode in Drupal 8 ermöglicht es dem Screenreader, den Benutzern mit einer Zeichenkette vorzulesen, da sie mit ARIA kompatibel ist. Dies ermöglicht es dem Benutzer, über einen Screenreader über die Änderungen auf der Seite informiert zu werden. 

Tabulator

Ein Tabulator-Manager ist eine weitere Funktion von Javascript in Drupal 8, die es dem Benutzer ermöglicht, sich mit einer Tabulatortaste auf der Tastatur anstelle einer Maus auf der Seite der Website zu bewegen. Diese Funktionalität steuert, wie und wo der Benutzer in den Kontext der Überlagerung auf der Seite wechseln kann. 

Formularfehler

Wenn es um die Anzeige von Formularfehlern geht, bietet Drupal 8 eine Option, eine Funktion zur Verbesserung der Barrierefreiheit zu aktivieren. Die Formularfehler werden standardmäßig nach dem Absenden am oberen Rand des Formulars mit Feldern angezeigt, bei denen die Validierung fehlgeschlagen ist, und werden rot hervorgehoben. Farbenblinde Benutzer können jedoch die Hervorhebung eines bestimmten Felds übersehen. Daher sollten Designer eine bessere Formulierung für die Validierungsfehler verwenden, um ihnen dabei zu helfen. 

CSS-Anzeige

Der anspruchsvollste und zeitaufwändigste Teil des Testens der mobilen Barrierefreiheit ist das Testen mit Screenreadern, aber es werden auch schlechte Praktiken und Fehler sowohl auf dem Desktop als auch auf dem Mobilgerät hervorgehoben. Manchmal sind die Inhalte für Akkordeons ausgeblendet, und der Benutzer, der mit einem Screenreader auf die Webseite zugreift, hat keine Möglichkeit, etwas über die Inhalte zu erfahren. Um dieses Problem zu beheben, hat Drupal 8 vier Anzeigeklassen eingeführt, von denen jede ein bestimmtes Verhalten aufweist, das ein Element sowohl visuell als auch für Screenreader ausblendet.

• Versteckt
• Visuell versteckt
• Visuell versteckt, fokussierbar 
• Unsichtbar

Die Verwendung von Drupal 8 in Ihrem nächsten oder aktuellen Projekt kann Ihnen eine Möglichkeit bieten, eine Website zu erstellen, die Benutzern aller Art gleichermaßen zugute kommt. Mit der Präzision und Sorgfalt, die es erfordert, können die Fehltritte im Zusammenhang mit der Barrierefreiheit reduziert werden, wenn Sie am Ausgangspunkt stehen. 

Zusammenfassend

Da die Nutzung mobiler Apps im Jahresvergleich um 6 % wächst, was das Wachstum von Apps in Kategorien wie E-Commerce zeigt, ist die mobile Barrierefreiheit laut dem Bericht „State of Mobile App Usage 2018“ von Flurry Mobile für Entwickler und Designer von Apps nicht weniger als ein Muss. 

Wir hoffen, dass Sie dadurch ein besseres Verständnis dafür bekommen haben, wie Barrierefreiheit in der Webwelt funktioniert und wie nützlich sie sich für Benutzer mit Behinderungen erweist. Sie kann Teil Ihrer Agenda im nächsten Projekt oder Modul sein, mit dem Sie beginnen, zu entwickeln. 

Es ist eine allgemein bekannte Tatsache, dass das mobile Testen auf Barrierefreiheit keine große Aufgabe ist und dem Prozess des Desktop-Testens sehr ähnlich ist. Eine intelligente und systematische Planung kann die Barrierefreiheitstests, die durch einen breiten funktionalen Testansatz effektiv sind, leicht abdecken. Die Frage der Barrierefreiheit offen zu halten und die Bedeutung zu betonen, sollte für die Organisationen bei der Gestaltung einer Webseite Teil des Prozesses sein. 

OpenSense Labs priorisiert die Barrierefreiheitsanforderungen von Unternehmen und stellt sicher, dass sie ihren Kunden die besten Dienstleistungen bieten. Nehmen Sie Kontakt auf unter [email protected].