Ein einfacher Leitfaden zur WCAG-2.1-Konfortmität

Die WCAG 2.1 verstehen: Die Grundlagen

Was sind die WCAG 2.1?

WCAG 2.1 ist eine Reihe von testbaren Erfolgskriterien des W3C für Webinhalte und Benutzeroberflächen. Sie baut auf den WCAG 2.0 auf und fügt neun neue Erfolgskriterien hinzu, die folgende Punkte berücksichtigen

• Mobile Geräte und verschiedene Eingabemodalitäten
• Schwachsichtige Bedürfnisse
• Kognitive und Lernbehinderungen

Die WCAG-Richtlinien folgen vier einfachen Prinzipien - oft als POUR bezeichnet - die sicherstellen, dass Webinhalte den Zugänglichkeitsstandards entsprechen:

• Wahrnehmbar - Benutzer können Ihre Inhalte sehen oder hören.
• Bedienbar - Benutzer können navigieren und bedienbare Komponenten der Benutzeroberfläche verwenden.
• Verständlich - Die Benutzer können Ihre Inhalte und deren Funktionsweise nachvollziehen.
• Robust - Ihre robusten Inhalte funktionieren mit unterstützenden Technologien wie Bildschirmlesegeräten.

Welche Stufe sollten Sie anstreben?

Die WCAG-Konformität wird in drei Stufen unterteilt: A, AA und AAA. Die Web Content Accessibility Guidelines definieren die Stufe AA als den Standard, den die meisten Websites und Anwendungen anstreben sollten. Sie beseitigt erhebliche Barrieren für Benutzer und ist gleichzeitig praktisch in der Erstellung und Prüfung.

Die Konformität der Stufe AAA ist für bestimmte Situationen nützlich, wird aber selten für ganze Produkte benötigt. Die Erfüllung der WCAG 2.1 Stufe AA gewährleistet, dass Ihre digitalen Inhalte zugänglich sind.

Häufige Probleme, die WCAG 2.1 behebt

Die bestehenden Erfolgskriterien in den Zugänglichkeitsrichtlinien für Webinhalte zielen auf reale Probleme ab, die täglich auf Websites auftreten:

• Farb- und Kontrastprobleme - Text, der schwer zu lesen ist und nicht genügend Kontrast aufweist.
• Probleme mit der Tastaturnavigation - Funktionen, die nur mit der Maus funktionieren und andere Eingabemethoden nicht unterstützen.
• Probleme mit Screenreadern - Inhalte, auf die Benutzer von Screenreadern nicht zugreifen können.
• Fehlende Textalternativen - Bilder ohne Beschreibungen.

Studien zeigen, dass über 94,8 % der Websites grundlegende Probleme mit der Zugänglichkeit aufweisen. Die häufigsten Probleme sind geringer Kontrast, fehlende Bildbeschreibungen (Alt-Text), nicht beschriftete Formularfelder, leere Links, leere Schaltflächen und Tastaturfallen.

Die Beseitigung dieser Zugänglichkeitsbarrieren erleichtert den Benutzern die Navigation auf Ihrer Website und gewährleistet einen gleichberechtigten Zugang für alle. Die Einhaltung der Zugänglichkeitsrichtlinien für Web-Inhalte beseitigt diese wichtigen Barrieren.

Ihr Design barrierefrei gestalten

Visuelles Design, das für alle funktioniert

Beginnen Sie mit der Lesbarkeit. Die Zugänglichkeitsrichtlinien für Webinhalte verlangen einen ausreichenden Kontrast:

• Normaler Text benötigt ein Kontrastverhältnis von 4,5:1;
• Großer Text benötigt ein Kontrastverhältnis von 3:1;

Verwenden Sie diese Zahlen bei der Auswahl von Farben für die Erstellung von Inhalten. Verwenden Sie niemals nur Farbe, um Informationen darzustellen - fügen Sie immer auch eine Textbeschriftung oder ein Symbol hinzu, um Verwirrung bei den Benutzern zu vermeiden.

Stellen Sie sicher, dass Ihre Benutzerschnittstellenkomponenten auch dann funktionieren, wenn die Benutzer zoomen oder die Textgröße entsprechend ihren Benutzereinstellungen ändern. Für Bilder und Diagramme in Ihren digitalen Inhalten sollten Sie sinnvolle Textalternativen schreiben.

Wenn ein Bild komplexe Informationen zeigt, stellen Sie eine Zusammenfassung zur Verfügung, die Screenreader-Nutzern und anderen hilft, die vollständige Botschaft zu verstehen.

Navigation und Interaktion

Ihre Website muss ohne Maus funktionieren, um verschiedene Eingabemodalitäten zu unterstützen. Dies bedeutet, dass Sie bedienbare Benutzerschnittstellenkomponenten schaffen müssen:

• Logische Tabulatorreihenfolge auf der Webseite;
• Sichtbare Fokusindikatoren, die zeigen, wo man sich auf einer Seite befindet;
• Keine Tastaturfallen, in denen die Benutzer stecken bleiben;
• Komponenten, die es dem Benutzer ermöglichen, die Funktionen mit der Tastatur zu bedienen;

Verwenden Sie, wenn möglich, Standard-HTML-Auszeichnungssprachen - sie funktionieren am besten mit Hilfstechnologien wie Bildschirmlesegeräten und werden standardmäßig von der Barrierefreiheit unterstützt. Wenn Sie benutzerdefinierte Komponenten für die Benutzeroberfläche erstellen, stellen Sie sicher, dass Tastaturbenutzer die Funktionen genauso bedienen können wie Mausbenutzer und dass die einzelnen Erfolgskriterien für die Bedienbarkeit erfüllt werden.

Vermeiden Sie Inhalte, die bei Bewegung des Benutzers automatisch dargestellt werden, oder bieten Sie einfache Steuerelemente zum Anhalten und Stoppen. Wenn die Bewegung nicht gestoppt werden kann, sollten Sie den Benutzern die Möglichkeit geben, sie zu beenden. Dies hilft Menschen mit kognitiven Behinderungen und Mobilitätseinschränkungen.

Formulare erfordern besondere Aufmerksamkeit:

• Verbinden Sie Beschriftungen mit Formularfeldern, damit eine gleichwertige Verbindung zwischen ihnen besteht.
• Geben Sie klare Anweisungen.
• Markieren Sie erforderliche Felder.
• Geben Sie hilfreiche Fehlermeldungen aus, die erklären, wie man Fehler korrigiert.

Gute Formulare verringern die Zahl der Supportanrufe und helfen Menschen mit Mobilitätseinschränkungen oder kognitiven oder Lernschwächen, Aufgaben erfolgreich zu erledigen. Sie sind in erster Linie dazu gedacht, die Benutzer bei der Erreichung ihrer Ziele zu unterstützen.

Klarer und einfacher Inhalt

Verwenden Sie eine einfache Sprache und gliedern Sie den Inhalt vorhersehbar. Überschriften, eine klare Navigation und ein einheitliches Layout der Website helfen den Nutzern, sich in Ihren digitalen Inhalten zurechtzufinden. Erläutern Sie bei Fehlern, was schief gelaufen ist und wie man den Fehler beheben kann - sparen Sie sich den Fachjargon.

Wählen Sie lesbare Schriftarten mit großzügigen Abständen. Einfache Designentscheidungen helfen Menschen mit kognitiven Einschränkungen oder Lernschwierigkeiten, Ihre Inhalte besser zu verstehen.

Stellen Sie sicher, dass Ihre Webseite auf mobilen Geräten in jeder Display-Ausrichtung (Hoch- oder Querformat) funktioniert. Die gleiche Seite sollte unabhängig von der Art des Zugriffs gut funktionieren. Denken Sie daran, dass künftige Benutzeragenten und Informations- und Kommunikationstechnologien Ihre Inhalte auch unter Verwendung verschiedener Auszeichnungssprachen korrekt interpretieren müssen.

Erstellen und Testen Ihrer Website

Schreiben von zugänglichem Code

Beginnen Sie mit sauberem HTML und Standard-Formularsteuerelementen. Sie sind die zuverlässigste Grundlage für die Kompatibilität mit Screenreadern und anderen Hilfstechnologien. Fügen Sie nur dann ARIA (speziellen Code für Barrierefreiheit) hinzu, wenn Standard-HTML nicht ausreicht und Sie keine konforme Alternativversion erstellen können, die die Erfolgskriterien erfüllt.

Steuern Sie bei interaktiven Anwendungen, wohin der Fokus geht, wenn sich der Inhalt ändert. Verwenden Sie ARIA-Live-Regionen, um Aktualisierungen anzukündigen, die den Nutzern helfen, zu verstehen, was passiert ist, um sicherzustellen, dass Webinhalte für alle zugänglich sind.

Behandeln Sie Tastaturunterstützung und Fokusverhalten als Anforderungen, die Sie testen müssen, und nicht als optionale Funktionen. Machen Sie die Zugänglichkeit von Websites zum Bestandteil Ihrer Checkliste für die Codeüberprüfung - prüfen Sie, ob einzelne Erfolgskriterien erfüllt sind, bevor Sie Änderungen genehmigen. So stellen Sie sicher, dass Ihr robuster Inhalt die WCAG-Standards erfüllt.

Testen auf Barrierefreiheit

Automatisierte Tools sind hilfreich, aber sie können nicht alles erfassen. Tools wie Axe DevTools, WAVE und Lighthouse finden häufig auftretende Probleme mit der Barrierefreiheit schnell - sie eignen sich hervorragend für automatisierte Tests in Ihrem Erstellungsprozess. Aber diese automatisierten Tools können nicht feststellen, ob Ihre Bildbeschreibung sinnvoll ist, ob die Reihenfolge der Registerkarten logisch ist oder ob Ihre Fehlermeldungen den Benutzern tatsächlich helfen.

Deshalb brauchen Sie auch manuelle Tests:

• Gehen Sie mit verschiedenen Eingabemethoden und nur mit der Tastatur durch Ihre Website.
• Testen Sie mit einem Bildschirmlesegerät (NVDA, JAWS, VoiceOver).
• Prüfen Sie, wie die Seite aussieht, wenn sie vergrößert oder mit größerem Text dargestellt wird.
• Testen Sie sie mit verschiedenen Eingabemethoden auf mobilen Geräten.

Verwenden Sie automatisierte Tools, um offensichtliche Probleme schnell zu finden, und führen Sie dann manuelle Tests durch, um die subtilen Probleme zu erkennen und eine echte WCAG-Konformität sicherzustellen. Diese Kombination hilft Ihnen, die Anforderungen an die Barrierefreiheit umfassend zu erfüllen.

Machen Sie Barrierefreiheit zum Teil Ihres Prozesses

Digitale Barrierefreiheit ist kein einmaliges Projekt, sondern eine fortlaufende Praxis. Integrieren Sie WCAG 2.1 Level AA-Prüfungen in Ihr Designsystem und Ihren Entwicklungsablauf. Erstellen Sie eine Bibliothek mit barrierefreien Website-Komponenten, die von der Barrierefreiheit unterstützt werden, mit einer klaren Dokumentation, der die Teams leicht folgen können. Die Einhaltung der Web Content Accessibility Guidelines während des gesamten Prozesses sorgt für eine verbesserte Zugänglichkeit.

So funktioniert's:

• Beziehen Sie die Überprüfung der Zugänglichkeit von Webinhalten in die Entwurfsprüfung ein.
• Testen Sie die Zugänglichkeit, bevor Sie Codeänderungen genehmigen.
• Schulen Sie Ihre Teams in den grundlegenden Zugänglichkeitsanforderungen und den Zugänglichkeitsrichtlinien für Web-Inhalte.
• Nehmen Sie dies in Ihre Qualitäts-Checkliste auf.

Studien zeigen, dass über 90 % der Websites immer noch erkennbare WCAG-Mängel aufweisen. Die häufigsten Probleme? Geringer Kontrast und fehlender Alt-Text. Es ist viel billiger, diese Barrieren während des Entwurfs und der Entwicklung zu erkennen, als sie nach dem Start zu beheben, zumal sich die Gesetze zur Barrierefreiheit und die Anforderungen des Americans with Disabilities Act ständig weiterentwickeln.

Abschließende Überlegungen

Wenn Sie die Zugänglichkeit gemäß den Web Content Accessibility Guidelines in Ihren Prozess einbauen, werden Ihre Produkte:

• Sie sind für jeden leichter zu benutzen und bieten gleichen Zugang.
• Kostengünstigerer Support mit weniger Problemen bei der Zugänglichkeit.
• Geringeres rechtliches Risiko aufgrund von Zugänglichkeitsgesetzen.
• Sie erfüllen die WCAG 2.1 Stufe AA und die Normen zur Einhaltung der Zugänglichkeit.

Beginnen Sie mit der Stufe AA als Ihrem Ziel. Konzentrieren Sie sich zunächst auf die Grundlagen - ausreichender Kontrast, Tastaturnavigation, klare Beschriftungen und Textalternativen. Diese Maßnahmen beseitigen die größten Barrieren für die Zugänglichkeit und ermöglichen einen gleichberechtigten Zugang für Benutzer mit Behinderungen.

Bei der Einhaltung der WCAG geht es nicht nur darum, Regeln zu befolgen oder die neuen Erfolgskriterien zu erfüllen. Es geht darum, digitale Inhalte zu erstellen, die für jeden funktionieren, unabhängig von seinen Fähigkeiten oder der Art und Weise, wie er auf Ihre barrierefreie Website zugreift. Wenn Barrierefreiheit im Internet zum Standard gehört, profitieren alle davon - und das ist gut für die Nutzer, gut für die Wirtschaft und das Richtige.