Barrierefreiheit für Teams

So integrieren Sie die Barrierefreiheit in den Prozess Ihres Teams.

Rob Dodson

Die Barrierefreiheit Ihrer Website zu verbessern, kann eine entmutigende Aufgabe sein. Wenn Sie sich zum ersten Mal mit dem Thema Barrierefreiheit befassen, kann die schiere Breite des Themas Sie fragen lassen, wo Sie anfangen sollen. Wenn Sie für eine Vielzahl von Fähigkeiten sorgen möchten, müssen Sie schließlich eine entsprechend vielfältige Reihe von Problemen berücksichtigen.

Denken Sie daran, dass Barrierefreiheit Teamarbeit ist. Jeder hat eine Rolle zu spielen. In diesem Artikel werden Kriterien für die wichtigsten Disziplinen (Projektmanager, UX-Designer und Entwickler) beschrieben, damit sie Best Practices für Barrierefreiheit in ihren Prozess einbinden können.

Projektmanager

Ein übergeordnetes Ziel für jeden Projektmanager besteht darin, die Barrierefreiheit in jeden Meilenstein einzubeziehen und dafür zu sorgen, dass sie genauso wichtig ist wie andere Themen wie Leistung und Nutzerfreundlichkeit. Im Folgenden finden Sie einige Punkte auf der Checkliste, die Sie bei der Durchführung des Prozesses beachten sollten.

• Stellen Sie dem Team Schulungen zur Barrierefreiheit zur Verfügung.
• Identifizieren Sie wichtige Nutzerpfade auf der Website oder in der Anwendung.
• Versuchen Sie, eine Checkliste für die Barrierefreiheit in den Teamprozess einzubinden.
• Bewerten Sie die Website oder Anwendung nach Möglichkeit mithilfe von Nutzerstudien.

Schulung zur Barrierefreiheit

Es gibt eine Reihe von kostenlosen Ressourcen, mit denen Sie sich über Barrierefreiheit im Internet informieren können. Wenn Sie Ihrem Team Zeit zum Studieren des Themas einräumen, lässt sich die Barrierefreiheit schon früh in den Prozess einbinden.

Zu den von Google bereitgestellten Ressourcen gehören:

Web Accessibility by Google: ein mehrwöchiger interaktiver Schulungskurs.

Grundlagen der Barrierefreiheit: Leitfäden und Best Practices zur Barrierefreiheit

Material Design-Richtlinien: Barrierefreiheit – eine Reihe von UX-Best Practices für inklusives Design.

Wichtige User Journeys identifizieren

Jede Anwendung hat eine primäre Aktion, die der Nutzer ausführen muss. Wenn Sie beispielsweise eine E-Commerce-App entwickeln, muss jeder Nutzer in der Lage sein, einen Artikel in den Einkaufswagen zu legen.

Einige Aktionen sind möglicherweise von untergeordneter Bedeutung und werden nur gelegentlich ausgeführt. Das Ändern des Avatarfotos ist beispielsweise eine praktische Funktion, aber nicht für alle Nutzer entscheidend.

Wenn Sie die primären und sekundären Aktionen in Ihrer Anwendung identifizieren, können Sie die anstehenden Maßnahmen zur Barrierefreiheit priorisieren. Später können Sie diese Aktionen mit einer Checkliste zur Barrierefreiheit kombinieren, um den Fortschritt im Blick zu behalten und Rückschritte zu vermeiden.

Checkliste zur Barrierefreiheit einbinden

Das Thema Barrierefreiheit ist ziemlich weit gefasst. Eine Checkliste mit wichtigen Aspekten, die Sie berücksichtigen sollten, kann Ihnen dabei helfen, alle wichtigen Punkte abzudecken.

Es gibt eine Reihe von Checklisten für die Barrierefreiheit. Hier sind einige Beispiele aus der Branche:

WebAIM WCAG-Checkliste Vox-Richtlinien für Barrierefreiheit

Mit einer Checkliste in der Hand können Sie Ihre primären und sekundären Maßnahmen durchgehen, um zu entscheiden, welche Arbeit noch erledigt werden muss. Sie können diesen Prozess ziemlich taktisch angehen und sogar eine Matrix mit primären und sekundären Aktionen erstellen und für jeden Schritt in diesen Prozessen feststellen, ob es fehlende Aspekte in Bezug auf Barrierefreiheit gibt.

Bewertung mit Nutzerstudien

Am besten setzen Sie sich mit echten Nutzern zusammen und beobachten sie, während sie versuchen, Ihre App zu verwenden. Wenn Sie die Barrierefreiheit in eine vorhandene Umgebung einbinden, können Sie mit diesem Verfahren schnell Bereiche identifizieren, die verbessert werden müssen. Wenn Sie ein neues Projekt starten, können frühe Nutzerstudien Ihnen helfen, zu vermeiden, dass Sie zu viel Zeit für die Entwicklung einer Funktion aufwenden, die nur schwer zu verwenden ist.

Achten Sie darauf, Feedback von möglichst vielen Nutzern einzuholen. Berücksichtigen Sie Nutzer, die sich hauptsächlich mit der Tastatur bewegen oder auf Hilfstechnologien wie Screenreader oder Lupen angewiesen sind.

UX-Designer

Da Menschen dazu neigen, ihre eigenen Voreingenommenheiten in ihre Designs einfließen zu lassen, entwerfen Sie möglicherweise unbewusst nur für einige Ihrer Nutzer, wenn Sie keine Behinderung haben und keine Kollegen mit Behinderung haben. Stellen Sie sich während der Arbeit die Frage: „Welche Nutzertypen könnten dieses Design nutzen?“ Hier sind einige Methoden, mit denen Sie Ihren Prozess inklusiver gestalten können.

• Die Inhalte haben einen ausreichenden Farbkontrast.
• Die Tab-Reihenfolge ist definiert.
• Steuerelemente haben barrierefreie Labels.
• Es gibt mehrere Möglichkeiten, mit der Benutzeroberfläche zu interagieren.

Die Inhalte haben einen guten Farbkontrast.

Das primäre Ziel der meisten Websites besteht darin, den Nutzern Informationen zu vermitteln, entweder durch Text oder Bilder. Wenn dieser Text jedoch einen geringen Kontrast hat, kann er für einige Nutzer (insbesondere für Personen mit Sehbehinderung) schwer zu lesen sein. Das kann sich negativ auf die Nutzerfreundlichkeit auswirken. Achten Sie daher darauf, dass alle Texte und Bilder einen ausreichenden Farbkontrast haben.

Der Kontrast wird gemessen, indem die Leuchtkraft einer Vordergrund- und einer Hintergrundfarbe verglichen wird. Für kleineren Text (unter 18 Punkten oder 14 Punkten bei Fettdruck) wird ein Mindestverhältnis von 4,5:1 empfohlen. Bei größerem Text kann dieses Verhältnis auf 3:1 angepasst werden.

Im Bild unten erfüllt der Text auf der linken Seite diese Mindestanforderungen an den Kontrast, während der Text auf der rechten Seite einen geringen Kontrast aufweist.

Es gibt eine Reihe von Tools zum Messen des Farbkontrasts, z. B. das Material Color Tool von Google, die App „Contrast Ratio“ von Lea Verou und aXe von Deque.

Tab-Reihenfolge ist definiert

Die Tab-Reihenfolge ist die Reihenfolge, in der Elemente den Fokus erhalten, wenn der Nutzer die Tabulatortaste drückt. Für Nutzer, die hauptsächlich mit der Tastatur navigieren, ist die Tabulatortaste das primäre Mittel, um alle Elemente auf dem Bildschirm zu erreichen. Stellen Sie sich das wie den Mauszeiger vor.

Idealerweise sollte die Tab-Reihenfolge der Lesereihenfolge folgen und von oben nach unten verlaufen, wobei wichtigere Elemente weiter oben in der Reihenfolge erscheinen. So können Nutzer, die eine Tastatur verwenden, diese Elemente schneller erreichen.

Die Mockup-Oberfläche oben ist nummeriert, um die Tab-Reihenfolge zu verdeutlichen. Das Erstellen eines solchen Mockups kann dabei helfen, die gewünschte Tab-Reihenfolge zu ermitteln. Dieser kann dann an die Entwickler und QA-Tester weitergegeben werden, damit sie dafür sorgen können, dass er richtig implementiert und getestet wird.

Steuerelemente haben barrierefreie Labels

Für Nutzer von Hilfstechnologien wie Screenreadern liefern Labels Informationen, die sonst nur visuell verfügbar wären. Eine Suchschaltfläche, die nur aus einem Lupensymbol besteht, kann beispielsweise das barrierefreie Label „Suchen“ haben, um die fehlende visuelle Aufforderung zu ergänzen.

Hier sind einige einfache Vorschläge für die Gestaltung barrierefreier Labels:

• Seien Sie prägnant: Lange Beschreibungen können mühsam sein.
• Geben Sie den Steuerelementtyp oder den Status nicht an. Wenn das Steuerelement richtig codiert ist, wird dies von einem Screenreader automatisch angesagt.
• Konzentrieren Sie sich auf Aktionsverben. Verwenden Sie „Suchen“ und nicht „Lupe“.

Sie könnten ein Mockup mit allen beschrifteten Steuerelementen erstellen. Diese kann für die Implementierung und Tests mit Ihrem Entwicklungs- und QA-Team geteilt werden.

Mehrere Möglichkeiten, mit der Benutzeroberfläche zu interagieren und sie zu verstehen

Es ist leicht anzunehmen, dass alle Nutzer hauptsächlich mit der Maus mit der Seite interagieren. Berücksichtigen Sie beim Entwerfen, wie Nutzer mit einer Tastatur mit einem Steuerelement interagieren.

Fokuszustände planen Das bedeutet, dass Sie festlegen müssen, wie ein Steuerelement aussehen soll, wenn der Nutzer es mit der Tabulatortaste oder den Pfeiltasten fokussiert. Es ist hilfreich, diese Status frühzeitig zu planen, anstatt sie später in das Design einzubauen.

Schließlich sollten Sie bei jeder Interaktion darauf achten, dass Nutzer die Inhalte auf unterschiedliche Weise verstehen können. Verwenden Sie Farben nicht allein, um Informationen zu vermitteln, da diese subtilen Hinweise von Nutzern mit Farbsinnschwäche möglicherweise übersehen werden. Ein klassisches Beispiel ist ein ungültiges Textfeld. Anstatt nur eine rote Unterstreichung zu verwenden, um ein Problem zu kennzeichnen, sollten Sie auch einen Hilfetext hinzufügen. So können Sie mehr abdecken und die Wahrscheinlichkeit erhöhen, dass ein Nutzer das Problem bemerkt.

Entwickler

Die Rolle des Entwicklers besteht darin, den Fokus und die Semantik zu kombinieren, um eine robuste Nutzererfahrung zu schaffen. Im Folgenden finden Sie einige Punkte, die Entwickler bei der Arbeit an ihrer Website oder Anwendung beachten sollten:

• Die Tabulatorreihenfolge ist logisch.
• Der Fokus ist richtig eingestellt und sichtbar.
• Interaktive Elemente werden von der Tastatur unterstützt.
• ARIA-Rollen und ‑Attribute werden nach Bedarf angewendet.
• Elemente sind korrekt beschriftet.
• Die Tests sind automatisiert.

Logische Tab-Reihenfolge

Native Elemente wie input, button und select werden automatisch in die Tabulatorreihenfolge aufgenommen und können über die Tastatur automatisch fokussiert werden. Aber nicht alle Elemente werden gleich behandelt. Insbesondere sind generische Elemente wie div und span nicht für die Tabulatorreihenfolge aktiviert. Wenn Sie also ein interaktives Steuerelement mithilfe von div erstellen, müssen Sie zusätzliche Arbeit leisten, um es für die Tastatur zugänglich zu machen.

Zwei Möglichkeiten:

• Geben Sie dem Steuerelement einen tabindex="0". Dadurch kann der Fokus zumindest darauf gesetzt werden. Sie müssen jedoch wahrscheinlich zusätzliche Arbeit leisten, um die Unterstützung für Tastendrücke hinzuzufügen.
• Verwenden Sie nach Möglichkeit button anstelle von div oder span für alle Schaltflächenelemente. Das native button-Element lässt sich sehr einfach stylen und wird kostenlos von der Tastatur unterstützt.

Fokus verwalten

Wenn Sie den Inhalt der Seite ändern, ist es wichtig, die Aufmerksamkeit des Nutzers durch das Verschieben des Fokus zu lenken. Ein klassisches Beispiel für die Nützlichkeit dieser Technik ist das Öffnen eines modalen Dialogfelds. Wenn ein Nutzer, der eine Tastatur verwendet, eine Schaltfläche drückt, um ein Dialogfeld zu öffnen, und der Fokus nicht auf das Dialogfeldelement verschoben wird, kann er nur durch die gesamte Website tabben, bis er das neue Steuerelement findet. Wenn Sie den Fokus sobald wie möglich auf die neuen Inhalte lenken, können Sie die Effizienz der Nutzung für diese Nutzer verbessern.

Tastaturunterstützung für interaktive Elemente

Wenn Sie ein benutzerdefiniertes Steuerelement wie ein Karussell oder ein Drop-down-Menü erstellen, müssen Sie zusätzliche Schritte ausführen, um die Tastaturunterstützung hinzuzufügen. Der ARIA Authoring Practices Guide ist eine nützliche Ressource, in der verschiedene UI-Muster und die Arten von Tastaturaktionen aufgeführt sind, die sie unterstützen sollen.

Weitere Informationen zum Hinzufügen der Tastaturunterstützung zu einem Element finden Sie im Abschnitt Roaming Tabindex in den Google-Dokumenten zu den Grundlagen der Barrierefreiheit.

ARIA-Rollen und ‑Attribute werden nach Bedarf angewendet

Benutzerdefinierte Steuerelemente benötigen nicht nur eine ordnungsgemäße Tastaturunterstützung, sondern auch eine korrekte Semantik. Schließlich ist ein div semantisch nur ein generisch gruppierter Container. Wenn Sie ein div als Grundlage für Ihr Drop-down-Menü verwenden, müssen Sie ARIA verwenden, um zusätzliche Semantik einzufügen, damit der Steuerelementtyp an Hilfstechnologien weitergegeben werden kann. Auch hier kann der ARIA Authoring Practices Guide hilfreich sein, um zu ermitteln, welche Rollen, Status und Eigenschaften Sie verwenden sollten. Als Bonus sind viele der Erklärungen im ARIA-Leitfaden auch mit Beispielcode versehen.

Labelelemente

Für die Kennzeichnung nativer Eingaben können Sie das integrierte <label>-Element verwenden, wie auf der MDN beschrieben. So können Sie nicht nur eine visuelle Aufforderung auf dem Bildschirm erstellen, sondern auch einen barrierefreien Namen für die Eingabe im Baum für Barrierefreiheit festlegen. Dieser Name wird dann von Hilfstechnologien wie einem Screenreader erfasst und dem Nutzer vorgelesen.

Leider ist es in <label> nicht möglich, benutzerdefinierten Steuerelementen einen barrierefreien Namen zu geben, z. B. solchen, die mit benutzerdefinierten Elementen oder aus einfachen Divs und Spans erstellt wurden. Für diese Arten von Steuerelementen müssen Sie die Attribute aria-label und aria-labelledby verwenden.

Automatisierte Tests

Faulheit kann gut sein, vor allem bei Tests. Automatisieren Sie nach Möglichkeit Ihre Bedienungshilfentests, damit Sie nicht alles manuell erledigen müssen. Es gibt eine Reihe von hervorragenden Tools für die Branche, mit denen sich häufige Probleme mit der Barrierefreiheit schnell und einfach prüfen lassen:

aXe wurde von Deque Systems entwickelt und ist als Chrome-Erweiterung und Node-Modul verfügbar (gut für Umgebungen mit kontinuierlicher Integration). In diesem kurzen A11ycast werden einige Möglichkeiten erläutert, wie Sie aXe in Ihren Entwicklungsprozess einbinden können.

Lighthouse ist das Open-Source-Projekt von Google zur Prüfung der Leistung Ihrer progressiven Web-Apps. Lighthouse prüft nicht nur, ob Ihre PWA Funktionen wie Service Worker und ein Web-App-Manifest unterstützt, sondern führt auch eine Reihe von Best Practices-Tests durch, einschließlich Tests auf Barrierefreiheit.

Fazit

Barrierefreiheit ist eine Teamleistung. Jeder hat eine Rolle zu spielen. In diesem Leitfaden werden einige wichtige Punkte beschrieben, mit denen jedes Teammitglied schnell in das Thema einsteigen und hoffentlich die Gesamtnutzung seiner App verbessern kann.

Weitere Informationen zur Barrierefreiheit finden Sie in unserem kostenlosen Udacity-Kurs und in den Dokumenten zur Barrierefreiheit, die hier auf web.dev verfügbar sind.