Web-Accessibility Richtlinien effizient und ohne Abstriche beim Look & Feel umsetzen
Dies ist eine Checkliste für die Umsetzung wichtiger Accessibility-Richtlinien der Web Content Accessibility Guidelines (WCAG) 2.1. Die Checkliste begleitet Software-Entwickelnde durch ein Projekt, von der Planung über die Implementierung bis zum Release. Die Umsetzung dieser Richtlinien schränkt weder das Look & Feel einer Benutzungsschnittstelle ein, noch deren Funktionalität.
Accessibility-Prinzipien
Bei der Umsetzung von Accessibility-Richtlinien sollten Software-Entwickler:innen die 4 Accessibility-Prinzipien berücksichtigen: Wahrnehmbarkeit, Nutzbarkeit, Verständlichkeit, Robustheit.
Accessibility-Aspekte zum Projektstart
Lege die Konformitätsstufe fest, die deine Nutzungsschnittstelle erreichen soll:
- Grundlegende, dringend notwendige Aspekte (Stufe A)
- empfehlenswerte Aspekte (Stufe AA)
- wünschenswerte Aspekte (Stufe AAA).
Üblicherweise verlangen rechtliche Vorgaben die Erfüllung sämtlicher Richtlinien auf den Stufen A sowie AA. Accessibility-Aspekte auf Stufe A sind dabei die minimal umzusetzenden, unentbehrlichen Aspekte zur Erzeugung von Accessibility. Aspekte auf Stufe AAA stellen das Ideal in Hinblick auf Accessibility dar, sind aber kaum vollständig umsetzbar.
Accessibility-Aspekte während der Implementierung
Verwende native HTML-Elemente wann immer es möglich ist: Verwende beispielsweise den „button“-Tag, statt einen Link durch eine Umrandung und Hervorhebung grafisch als Schaltfläche darzustellen. Falls es nicht anders möglich ist, zeichne die benutzerdefinierten Elemente per WAI-ARIA semantisch aus.
Strukturiere den Inhalt so, dass man die Bereiche mit relevanten Informationen schnell erkennen kann: Verwende hierfür beispielsweise Überschriften, hohe Kontraste und Abstände.
Verwende keine Textgrafiken.
Strukturiere den Inhalt so, dass man die Bereiche mit relevanten Informationen schnell erkennen kann: Verwende hierfür beispielsweise Überschriften, hohe Kontraste und Abstände.
Verwende Heading-Tags (h1, h2, etc.) nicht, um ein bestimmtes Aussehen zu erzeugen: Benutze diese Elemente ausschließlich semantisch, also wenn es sich tatsächlich um Überschriften handelt.
Wähle eine aussagekräftige Überschrift für jeden Hauptabschnitt des Inhalts: z.B. „Umsetzen von Accessibility-Richtlinien“ statt „Accessibility“
Behalte die Hierarchie von Überschriftsebenen ein: Verwende beispielsweise nicht Überschriftsebene 2 nach Überschriftsebene 4 und dann Überschriftsebene 1.
Vermittle Informationen nicht allein durch Farbe: z.B. „Benötigte Angaben sind durch rot umrandete Eingabefelder gekennzeichnet“.
Beschreibe jede relevante, als grafikvermittelte Information in deren Alternativtext: Verwende hierzu das „alt“ Attribut innerhalb der jeweiligen Tags. Ein Logo, das die Möglichkeit bietet, auf die Homepage zurück zu gelangen, sollte beispielsweise nicht den Alternativtext „Logo“ oder „<unternehmen> Logo“ erhalten, sondern „zur Homepage“. Dass es sich um ein Logo handelt, ist hier irrelevant.
Stelle Textalternativen für jeden Nicht-Textinhalt wie Bilder oder Videos zur Verfügung.
Ermögliche die Nutzung ausschließlich per Tastatur.
Gestalte Navigationsmenüs als ungeordnete Listen mit Menüeinträgen, nicht als aufklappbare Schaltflächen.
Benenne jeden Link so, dass verständlich ist, wohin er führt und welche Aktion ausgelöst wird: Nenne Links beispielsweise nicht „Hier“ oder „Mehr“ sondern besser z.B. „Accessibility-Richtlinien finden Sie hier auf einer eigenen Webseite 'Web Content Accessibility Guidelines (WCAG) 2.1'“. Schreibe den relevanten Begriff an den Anfang des Links.
Weise jedem Formularelement ein aussagekräftiges Label zu: z.B. „Name und Vorname“ statt „Name“, wenn Vor- und Nachname gemeinsam eingetragen werden sollen.
Zeige Beispiele für die erwarteten Eingabeformate: Verwende dafür weder Platzhalter noch Mouseover-Effekte.
Helligkeitskontrast zwischen Vordergrund- und Hintergrundfarbe: Bei Text von mindestens 4,5:1. Bei interaktiven Elementen, Statusmeldungen und relevanten Bestandteilen von Grafiken von mindestens 3:1, auch wenn die Farben invertiert sind.
Zeige jedes interaktive Element in einer Größe von mindestens 44 x 44 CSS Pixeln an.
Vor dem Release
Prüfe die Gültigkeit des Quellcodes: Verwende z.B. HTML-Validator (externer Link).
Teste die Accessibility jedes Screens mit Tools: Verwende z.B. Accessibility Insights, Google Lighthouse, WAVE, axe (externer Link).
Lasse die Accessibility von Fachpersonen und Personen, die auf die Verwendung assistierender Technologien angewiesen sind, testen.
Diese Checkliste umfasst bei weitem nicht alle Richtlinien der WCAG 2.1. Sie soll als Orientierung dienen, mit der Software-Entwickelnde häufige Accessibility-Probleme verhindern können.
Quellen
Die Richtlinien in vollem Umfang in der ursprünglichen Formulierung
Vorschläge für die Umsetzung der Richtlinien
Die WAI-ARIA Authoring Practices
Eine allgemeine Einführung in das Thema „Accessibility" des Mozilla Developer Networks (MDN)