Wie Sie Barrierefreiheit in den Prozess Ihres Teams integrieren können.
Die Barrierefreiheit Ihrer Website zu verbessern, kann eine gewaltige Aufgabe sein. Wenn Sie sich zum ersten Mal mit dem Thema Barrierefreiheit auseinandersetzen, werden Sie sich aufgrund der schier breiten Bandbreite des Themas fragen, wo Sie anfangen sollen. Schließlich bedeutet das Arbeiten, eine Vielzahl von Fähigkeiten zu berücksichtigen, auch eine entsprechend vielfältige Bandbreite von Problemen, die berücksichtigt werden müssen.
Denken Sie daran: Barrierefreiheit ist Teamleistung. Jeder Mensch spielt eine Rolle. In diesem Artikel werden die Kriterien für jede der großen Disziplinen (Projektmanager, UX-Designer und Entwickler) beschrieben, damit sie die Best Practices für Barrierefreiheit in ihren Prozess integrieren können.
Mitglied des Projektmanagements
Das vorrangige Ziel jedes Mitglieds des Projektmanagements ist es, die Arbeit zur Barrierefreiheit in jeden Meilenstein einzubeziehen und sicherzustellen, dass sie genauso hohe Priorität hat wie andere Themen wie Leistung und User Experience. Hier sind einige Punkte auf Checklisten, die Sie bei der Durcharbeitung Ihres Prozesses beachten sollten.
- dem Team Schulungen zur Barrierefreiheit zur Verfügung stellen.
- Kritische Kaufprozesse auf der Website oder in der Anwendung identifizieren
- Versuchen Sie, eine Checkliste für die Barrierefreiheit in den Teamprozess einzubinden.
- Bewerten Sie die Website oder Anwendung nach Möglichkeit anhand von Nutzerstudien.
Schulung zur Barrierefreiheit
Es gibt viele großartige kostenlose Ressourcen, in denen Sie mehr über Barrierefreiheit im Internet erfahren können. Wenn Sie Ihrem Team Zeit nehmen, sich mit dem Thema zu befassen, kann es einfacher sein, die Barrierefreiheit schon früh in den Prozess einzubeziehen.
Hier einige Ressourcen von Google:
Web Accessibility by Google – ein mehrwöchiger interaktiver Kurs.
Grundlagen der Barrierefreiheit – Leitfäden und Best Practices zum Thema Barrierefreiheit im Internet.
Materialrichtlinien: Barrierefreiheit – eine Reihe von UX-Best Practices für inklusives Design.
Kritische User Journeys identifizieren
Für jede Anwendung gibt es eine primäre Aktion, die der Nutzer ausführen muss. Wenn Sie beispielsweise eine E-Commerce-App erstellen, muss jeder Nutzer in der Lage sein, einen Artikel in den Einkaufswagen zu legen.
Einige Aktionen sind möglicherweise von sekundärer Bedeutung und werden möglicherweise nur gelegentlich ausgeführt. Das Ändern des Avatarfotos ist zwar eine nette Funktion, aber nicht unbedingt für jedes Erlebnis.
Wenn Sie die primären und sekundären Aktionen in Ihrer Anwendung identifizieren, können Sie die künftige Barrierefreiheit priorisieren. Später können Sie diese Aktionen mit einer Checkliste zur Barrierefreiheit kombinieren, um Ihren Fortschritt im Blick zu behalten und Regressionen zu vermeiden.
Eine Checkliste zur Barrierefreiheit einbinden
Das Thema Barrierefreiheit ist ein sehr breit gefasstes Thema. Eine Checkliste mit wichtigen Bereichen, die berücksichtigt werden sollten, kann Ihnen also dabei helfen, alle Ihre Grundlagen abzudecken.
Es gibt eine Reihe von Checklisten zur Barrierefreiheit, darunter einige aus der Branche:
WebAIM-WCAG-Checkliste Vox-Richtlinien zur Barrierefreiheit
Mit einer Checkliste können Sie Ihre primären und sekundären Aktionen durchgehen, um herauszufinden, welche Arbeiten noch zu erledigen sind. Sie können diesen Prozess ziemlich taktisch angehen und sogar eine Matrix von primären und sekundären Aktionen erstellen und für jeden Schritt in diesen Prozessen ermitteln, ob Barrierefreiheitsbits fehlen.
Nutzerstudien auswerten
Nichts ist besser, als sich mit echten Nutzern zusammenzusetzen und sie bei der Verwendung Ihrer App zu beobachten. Wenn Sie die Barrierefreiheit in eine bestehende Umgebung einbauen, können Sie mit diesem Prozess schnell Bereiche identifizieren, die verbessert werden müssen. Und wenn Sie ein neues Projekt beginnen, können Sie durch frühzeitige Nutzerstudien vermeiden, zu viel Zeit in die Entwicklung eines Features zu investieren, das schwer zu verwenden ist.
Versuchen Sie, das Feedback möglichst vielfältiger Nutzenden zu berücksichtigen. Denken Sie an Nutzende, die hauptsächlich mit der Tastatur navigieren oder auf assistive Technologien wie Screenreader oder Lupen angewiesen sind.
UX-Designer
Da Menschen dazu neigen, Designs mit ihren eigenen Voreingenommenheiten zu entwerfen, besteht die Möglichkeit, dass Sie unbeabsichtigt ein Design nur für einige Ihrer Nutzenden entwerfen, wenn Sie keine Beeinträchtigung haben und keine Teammitglieder mit Beeinträchtigungen haben. Fragen Sie sich: „Welche Arten von Nutzenden könnten sich auf dieses Design verlassen?“ Hier sind einige Techniken, mit denen Sie versuchen können, Ihren Prozess inklusiver zu gestalten.
- Der Farbkontrast des Inhalts ist ausreichend.
- Die TAB-Reihenfolge ist definiert.
- Steuerelemente haben barrierefreie Labels.
- Es gibt mehrere Möglichkeiten, mit der Benutzeroberfläche zu interagieren.
Inhalt hat einen guten Farbkontrast
Das Hauptziel der meisten Websites besteht darin, dem Nutzer Informationen in Textform oder Bildern zu vermitteln. Wenn dieser Inhalt jedoch einen geringen Kontrast hat, kann er für einige Nutzer (insbesondere Menschen mit einer Sehbeeinträchtigung) schwer zu lesen sein. Dies kann sich negativ auf die Nutzererfahrung auswirken. Um dieses Problem zu beheben, sollten Sie darauf achten, dass alle Texte und Bilder einen ausreichenden Farbkontrast aufweisen.
Der Kontrast wird durch einen Vergleich der Helligkeit einer Vorder- und Hintergrundfarbe gemessen. Für kleineren Text (unter 18 pt oder 14 pt fett) wird ein Mindestverhältnis von 4,5:1 empfohlen. Bei größeren Texten kann dieses Seitenverhältnis auf 3:1 angepasst werden.
Im Bild unten erfüllt der Text auf der linken Seite diese Kontrastmindestwerte, während der Text auf der rechten Seite wenig Kontrast hat.
Es gibt eine Reihe von Tools zum Messen des Farbkontrasts, z. B. das Material Color Tool von Google, die App „Lea Verou's Contrast Ratio“ und aXe von Deque.
TAB-Reihenfolge ist definiert
Die TAB-Reihenfolge ist die Reihenfolge, in der Elemente hervorgehoben werden, wenn der Nutzer die Tabulatortaste drückt. Bei Nutzern, die hauptsächlich mit einer Tastatur navigieren, ist die Tabulatortaste ihr wichtigstes Mittel, um alles auf dem Bildschirm zu erreichen. Stellen Sie sich das wie einen Cursor vor.
Idealerweise sollte die TAB-Reihenfolge der Lesereihenfolge entsprechen und vom oberen zum unteren Seitenrand verlaufen, wobei wichtigere Elemente weiter oben in der Reihenfolge angezeigt werden. So können alle, die eine Tastatur verwenden, schneller auf diese Elemente zugreifen.
Die obige Beispieloberfläche ist nummeriert, um die TAB-Reihenfolge darzustellen. Wenn Sie ein Modell wie dieses erstellen, können Sie die gewünschte TAB-Reihenfolge identifizieren. Dieser kann dann mit den Entwicklern und QA-Testern geteilt werden, um sicherzustellen, dass er ordnungsgemäß implementiert und getestet wurde.
Steuerelemente haben barrierefreie Labels
Für Nutzer von Hilfstechnologien wie Screenreadern liefern Labels Informationen, die andernfalls nur visuell wären. Beispielsweise kann eine Suchschaltfläche, die nur ein Lupensymbol ist, das barrierefreie Label „Suchen“ haben, um das fehlende visuelle Angebot zu ergänzen.
Hier sind ein paar einfache Vorschläge, die Sie beim Entwerfen barrierefreier Labels befolgen können:
- Fassen Sie sich kurz: Es kann mühsam sein, sich lange Beschreibungen anzuhören.
- Vermeiden Sie es, den Typ oder Status des Steuerelements anzugeben. Wenn das Steuerelement richtig codiert ist, sagt ein Screenreader dies automatisch an.
- Konzentrieren Sie sich auf Aktionsverben: Verwenden Sie „Suchen“ und nicht „Lupe“.
Sie könnten ein Modell erstellen, in dem alle Ihre Steuerelemente beschriftet sind. Du kannst dies zu Implementierungs- und Testzwecken an dein Entwicklungsteam und das QA-Team weitergeben.
Vielfältige Möglichkeiten, mit der UI zu interagieren und sie zu verstehen
Es kann leicht davon ausgegangen werden, dass alle Nutzer hauptsächlich mit der Maus mit der Seite interagieren. Überlegen Sie beim Entwerfen, wie Nutzende stattdessen über eine Tastatur mit einem Steuerelement interagieren werden.
Plane deine Fokuszustände! Damit wird festgelegt, wie ein Steuerelement aussieht, wenn der Nutzer es mit der Tabulatortaste fokussiert oder die Pfeiltasten drückt. Es ist nützlich, diese Zustände frühzeitig zu planen, anstatt zu versuchen, sie später in das Design einzuschrauben.
Schließlich sollten Sie für jeden Interaktionspunkt sicherstellen, dass die Nutzer den Inhalt auf unterschiedliche Weise verstehen können. Farben sollten nicht ausschließlich zur Vermittlung von Informationen verwendet werden, da diese subtilen Hinweise von Nutzern mit Farbblindheit übersehen werden. Ein klassisches Beispiel ist ein ungültiges Textfeld. Statt nur rot unterstrichen, um ein Problem zu kennzeichnen, sollten Sie auch Hilfetext hinzufügen. So decken Sie mehr Bereiche ab und erhöhen die Wahrscheinlichkeit, dass ein Nutzer das Problem bemerkt.
Entwickler
Die Rolle des Entwicklers besteht darin, dass Fokusmanagement und Semantik für eine stabile Nutzererfahrung sorgen. Hier sind einige Punkte, die Entwickler bei der Arbeit an ihrer Website oder Anwendung berücksichtigen können:
- Die TAB-Reihenfolge ist logisch.
- Der Fokus wird ordnungsgemäß verwaltet und ist sichtbar.
- Interaktive Elemente können über die Tastatur unterstützt werden.
- ARIA-Rollen und -Attribute werden nach Bedarf angewendet.
- Die Elemente sind korrekt beschriftet.
- Das Testen erfolgt automatisch.
Logische TAB-Reihenfolge
Native Elemente wie input, button und select werden für die Tabreihenfolge kostenlos aktiviert und können automatisch über die Tastatur fokussiert werden. Nicht alle Elemente verhalten sich jedoch gleich. Insbesondere für allgemeine Elemente wie div und span ist die TAB-Reihenfolge nicht aktiviert. Wenn Sie also ein div verwenden, um ein interaktives Steuerelement zu erstellen, müssen Sie zusätzliche Schritte ausführen, um es per Tastatur zugänglich zu machen.
Zwei Optionen sind:
- Weisen Sie dem Steuerelement
tabindex="0"zu. Dadurch wird es zumindest fokussiert, obwohl Sie wahrscheinlich zusätzliche Arbeit leisten müssen, um die Unterstützung für Tastendruck hinzuzufügen. - Verwenden Sie für schaltflächenähnliche Steuerelemente nach Möglichkeit
buttonstattdivoderspan. Das nativebutton-Element lässt sich sehr einfach gestalten und erhält kostenlose Tastaturunterstützung.
Fokus managen
Wenn Sie den Inhalt der Seite ändern, ist es wichtig, die Aufmerksamkeit der Nutzer durch Bewegung des Fokus zu lenken. Ein klassisches Beispiel für diese Technik ist das Öffnen eines modalen Dialogfelds. Wenn ein Nutzer, der eine Tastatur verwendet, eine Schaltfläche zum Öffnen eines Dialogfelds drückt und sein Fokus nicht auf das Dialogelement gelegt wird, kann er nur mit der Tabulatortaste durch die gesamte Website navigieren, bis er schließlich das neue Steuerelement findet. Wenn Sie sich auf neue Inhalte konzentrieren, sobald sie verfügbar sind, können Sie die Nutzererfahrung optimieren.
Tastaturunterstützung für interaktive Elemente
Wenn Sie ein benutzerdefiniertes Steuerelement wie ein Karussell oder ein Drop-down-Menü erstellen, sind zusätzliche Schritte erforderlich, 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 beschrieben werden, die sie unterstützen sollen.
Weitere Informationen zum Hinzufügen der Tastaturunterstützung für ein Element finden Sie im Abschnitt Roving tabindex in der Dokumentation zu den Grundlagen der Barrierefreiheit im Internet von Google.
ARIA-Rollen und -Attribute werden nach Bedarf angewendet.
Benutzerdefinierte Steuerelemente benötigen nicht nur die richtige Tastaturunterstützung, sondern auch die richtige Semantik. Schließlich ist ein div semantisch nur ein generischer Gruppierungscontainer. Wenn Sie eine div als Grundlage für das Drop-down-Menü verwenden, müssen Sie ARIA verwenden, um zusätzliche Semantik hinzuzufügen, damit der Einstellungstyp an die Hilfstechnologie übertragen werden kann. Auch hier finden Sie im ARIA-Leitfaden zur Erstellung von Best Practices Informationen dazu, welche Rollen, Status und Eigenschaften Sie verwenden sollten.
Viele der Erklärungen im ARIA-Leitfaden enthalten ebenfalls Beispielcode.
Elemente beschriften
Wenn Sie native Eingaben mit Labels versehen möchten, können Sie das integrierte <label>-Element verwenden, wie in MDN beschrieben. So können Sie nicht nur eine visuelle Darstellung auf dem Bildschirm erstellen, sondern der Eingabe auch einen barrierefreien Namen in der Barrierefreiheitsstruktur geben. Dieser Name wird dann von Hilfstechnologien (z. B. einem Screenreader) erfasst und dem Nutzer mitgeteilt.
Leider unterstützt <label> die Zuweisung eines barrierefreien Namens für benutzerdefinierte Steuerelemente (z. B. solche, die mit benutzerdefinierten Elementen oder aus einfachen „div“-Elementen und Spans erstellt wurden), nicht. Für diese Art von Steuerelementen müssen Sie die Attribute aria-label und aria-labelledby verwenden.
Automatisierte Tests
Faulheit kann eine gute Idee sein, vor allem beim Testen. Versuchen Sie nach Möglichkeit, Ihre Tests zur Barrierefreiheit zu automatisieren, damit Sie nicht alles manuell tun müssen. Es gibt bereits eine Reihe nützlicher branchenspezifischer Testtools, mit denen sich häufige Probleme mit der Barrierefreiheit einfach und schnell erkennen lassen:
aXe wurde von Deque-Systemen erstellt und ist als Chrome-Erweiterung und Knotenmodul (für Continuous-Integration-Umgebungen) verfügbar. In diesem kurzen A11ycast werden verschiedene Möglichkeiten erläutert, wie Sie aXe in Ihren Entwicklungsprozess einbinden können.
Lighthouse ist das Open-Source-Projekt von Google zum Prüfen der Leistung Ihrer progressiven Web-Apps. Neben der Prüfung, ob Ihre PWA Funktionen wie Service Worker und ein Web-App-Manifest unterstützt, führt Lighthouse eine Reihe von Best-Practice-Tests aus, einschließlich Tests auf Probleme mit der Barrierefreiheit.
Fazit
Barrierefreiheit ist Teamarbeit. Jeder hat seine eigene Rolle. Dieser Leitfaden enthält einige wichtige Punkte, die jedes Teammitglied verwenden kann, um sich schnell mit dem Thema vertraut zu machen und hoffentlich das Gesamterlebnis der App zu verbessern.
Weitere Informationen zur Barrierefreiheit findest du in unserem kostenlosen Udacity-Kurs und in den Dokumenten zur Barrierefreiheit auf web.dev.