Was ist WCAG?
WCAG, oder Web Content Accessibility Guidelines, ist ein internationaler Standard, der vom W3C (World Wide Web Consortium) entwickelt wurde. Ihr Ziel ist es, sicherzustellen, dass Websites und digitale Inhalte für alle Nutzer/innen zugänglich sind, auch für Menschen mit Behinderungen.
Die aktuelle Version, WCAG 2.1, baut auf den Vorgängerversionen auf und enthält zusätzliche Empfehlungen für mobile Geräte und Nutzer/innen mit kognitiven Einschränkungen oder Sehbehinderungen.
Vier Prinzipien der WCAG
Die WCAG beruhen auf vier Grundprinzipien, die oft mit dem Akronym POUR bezeichnet werden:
Wahrnehmbar
Informationen müssen so dargestellt werden, dass sie von den Nutzern wahrgenommen werden können, unabhängig von ihren sensorischen Fähigkeiten. Dazu gehört auch, dass Bilder mit alternativem Text versehen werden und dass die Inhalte mit Bildschirmlesegeräten zugänglich sind.
Beispiele:
- Biete Textalternativen für alle Nicht-Text-Inhalte an;
- Biete eine alternative Form des CAPTCHA an, die den CAPTCHA-Code als Audio ausgibt;
- Untertitel und Transkripte bereitstellen, die von einem Bildschirmlesegerät oder einem Braille-Reader für Audio und Video gelesen werden können;
- Biete zusätzliche Audiobeschreibungen an, wenn der Videoton nicht ausreicht, um das Geschehen auf dem Bildschirm zu beschreiben;
- Verwende Überschriften-Tags, um die Hierarchie des Inhalts festzulegen;
- Erstelle responsive Inhalte: Die Nutzer sollten nicht auf eine bestimmte Ansicht festgelegt sein, sondern ihr Gerät zwischen Hoch- und Querformat drehen können;
- Achte auf einen ausreichenden Kontrast zwischen Textfarbe und Hintergrund;
- Verwende sowohl Farbe als auch Icons, um Fehler- und Erfolgsmeldungen anzuzeigen;
- Die Hintergrundgeräusche sollten 20 Dezibel leiser sein als die gesprochenen Stimmen, um den Dialog nicht zu stören;
Bedienbar
Die Komponenten der Benutzeroberfläche und die Navigation müssen benutzbar sein. Zum Beispiel sollten alle Funktionen über eine Tastatur erreichbar sein, und Inhalte sollten Designs vermeiden, die Krampfanfälle auslösen könnten.
Beispiele:
- Mache alle Funktionen über eine Tastatur zugänglich;
- Nutzer/innen können Modals und Pop-ups ohne Maus oder Touchpad öffnen und schließen;
- Alle Website-Besucher müssen genügend Zeit haben, den Inhalt der Seite zu lesen und zu nutzen;
- Gib eine Warnmeldung aus, bevor ein Nutzer aufgrund von Inaktivität ausgeloggt wird;
- Gib die Möglichkeit, bei zeitkritischen Aktionen mehr Zeit einzuplanen;
- Füge einem Karussell, das automatisch abgespielt wird, Pausen-/Stoppsymbole hinzu;
- Gestalte Inhalte nicht auf eine Weise, die bekanntermaßen Anfälle auslöst, und vermeide Animationen, die mehr als dreimal pro Sekunde aufblinken;
- Biete Möglichkeiten, die den Nutzern helfen, zu navigieren, Inhalte zu finden und festzustellen, wann sie sich befinden;
- Alle Seiten sollten einen Titel haben, der sich auf den Inhalt der Seite bezieht;
- Verwende eine Breadcrumb-Navigation, wenn es mehrere Ebenen von verschachtelten Seiten gibt;
- Vermeide zweideutige Linktexte wie “hier klicken” oder “mehr erfahren”;
Verständlich
Der Inhalt und das Verhalten der Benutzeroberfläche müssen klar und vorhersehbar sein. Das bedeutet, dass wir eine einfache Sprache verwenden und sicherstellen, dass die Nutzer die Website leicht verstehen und nutzen können.
Beispiele:
- Mache Textinhalte lesbar und verständlich;
- Vermeide Fachjargon;
- Setze das Attribut lang im html-Tag ( <html lang=”en”>);
- Globale Elemente wie die Kopf-, Navigations- und Fußzeile sind auf jeder Seite gleich;
- Nagivierungslinks sind auf jeder Seite gleich und immer in der gleichen Reihenfolge;
- Verwende eine einheitliche Sprache, wenn du Dinge beschriftest;
- Gib Beschriftungen für alle Eingaben und Beispiele (Platzhalter) an, wenn Daten auf eine bestimmte Weise formatiert werden müssen;
- Wenn ein Formular falsch ausgefüllt wird, gib Anweisungen, wie man den Fehler beheben kann;
- Gib Erfolgs-/Fehlermeldungen aus, wenn ein Formular abgeschickt wird;
- Gib den Nutzern eine zweite Chance, eine Aktion zu bestätigen oder abzubrechen, vor allem, wenn diese Aktion unumkehrbar ist;
Robuste
Die Inhalte müssen von einer Vielzahl von Geräten und Hilfstechnologien zuverlässig interpretiert werden, sowohl jetzt als auch in Zukunft.
Beispiele:
- Maximale Kompatibilität mit aktuellen und zukünftigen User Agents, einschließlich unterstützender Technologien;
- Schreibe semantisches, gültiges HTML;
- Nutze ARIA, um dein HTML bei Bedarf zu erweitern;
- Integriere Zugänglichkeitstests in deinen Entwicklungsprozess;
13 Richtlinien und 78 Erfolgskriterien
Zu jedem der vier Prinzipien gehören mehrere Richtlinien – insgesamt 13. Diese Richtlinien werden durch Erfolgskriterien unterstützt – spezifische, überprüfbare Anforderungen, die dabei helfen, festzustellen, ob eine Website die Zugänglichkeitsstandards erfüllt.
Die WCAG 2.1 enthalten 78 Erfolgskriterien, die in drei Konformitätsstufen unterteilt sind:
Stufe A – Grundanforderungen, muss angepasst werden
Stufe AA – Empfohlen für die meisten Websites
Stufe AAA – Höchste Stufe, schwierig für alle Inhalte zu erfüllen
Für die meisten Websites ist das Erreichen der WCAG 2.1 Stufe AA ein starkes und realistisches Ziel.
Warum WCAG wichtig ist
Die WCAG bieten einen strukturierten, international anerkannten Rahmen für die Erstellung barrierefreier digitaler Inhalte. Sie basiert auf vier Prinzipien – wahrnehmbar, bedienbar, verständlich und robust – und umfasst 13 Richtlinien und 78 Erfolgskriterien, die sicherstellen, dass deine Website von allen genutzt werden kann.
Die Einhaltung der WCAG hilft:
- Websites für Menschen mit verschiedenen Behinderungen (visuell, motorisch, kognitiv usw.) nutzbar zu machen
- Das allgemeine Benutzererlebnis zu verbessern
- Einhaltung der Gesetze zur Barrierefreiheit in vielen Ländern
- Verbessert die Suchmaschinenoptimierung und macht deine Inhalte zukunftssicher für neue Technologien
