Ein Nachschlagewerk der Web Content Accessibility Guidelines (A & AA) inklusive der neuen WCAG 2.2. Kriterien. So lernst du schnell und einfach was wichtig ist, um eine barrierefreie Website oder App zu erstellen.
Bilder, die rein visuellen Mehrwert liefern und keine wichtigen Informationen vermitteln, brauchen keine Textalternative. Sie müssen auch vor assistiven Technologien versteckt werden. Bei <img>: Das Alt-Attribut leer lassen. Bei <svg>: aria-hidden nutzen.
Bilder und Grafiken, die wichtige Infos vermitteln, brauchen eine Textalternative. Diese kann im Alt-Attribut oder auch als Text neben dem Bild stehen. Zu wichtigen Infos zählen auch Bilder, die Emotionen vermitteln.
Grafische Bedienelemente, wie klickbare Icons oder klickbare Bilder, benötigen einen Namen, damit auch Screenreader-User die Funktion der Grafik verstehen. Das geht zum Beispiel mit Text im Alt-Attribut oder einem aria-label.
CAPTCHAs brauchen Alternativen. Ein Audio-CAPTCHA braucht ein Bild-CAPTCHA als Alternative und umgekehrt. Bildbasierte CAPTCHAs brauchen auch einen Text im Alt-Attribut, der den Zweck des CAPTCHAs beschreibt.
Audiodateien brauchen eine Alternative in Form von Text. Stumme Videos können als Alternative eine Beschreibung der Inhalte in Textform oder in Form einer Audiodatei haben.
Aufgezeichnete Videos benötigen synchrone Untertitel. Zu einem vollständigen Untertitel gehören nicht nur gesprochene Worte, sondern auch die Namen der Sprecher, menschliche Laute und wichtige Geräusche wie Musik.
Deine Videos benötigen eine Audiodeskription oder Volltext-Alternative, wenn wichtiger Inhalt darin vorkommt, der nicht auf der Tonspur beschrieben wird.
Live-Übertragungen brauchen synchrone Untertitel. Dabei sollten nicht nur der Inhalt wiedergegeben werden, sondern auch, wer gerade spricht und welche wichtigen Geräusche zu hören sind.
Wenn ein Video wichtige Infos nur visuell, aber nicht über Ton vermittelt, braucht es eine Audiodeskription. So ein Inhalt kann schon der Name des Sprechers sein, wenn er nur im Bild gezeigt, aber nicht gesagt wird.
Inhalte, die optisch wie Listen aussehen, müssen im HTML auch als Listen ausgezeichnet sein. Dafür kannst du entweder <ul>, <ol> oder <dl> nutzen, je nachdem, wofür die Liste gedacht ist.
Formulare müssen so aufgebaut sein, dass ihre Struktur und Zusammenhänge auch im Code richtig hinterlegt sind. Dazu gehört, dass jedes Feld einen verständlichen Namen hat und Gruppen von Feldern programmatisch als Einheit ausgezeichnet werden.
Für Absätze und formatierte Texte (fett oder kursiv) müssen die richtigen HTML-Tags verwendet werden. Im Fließtext dürfen keine Abstände mit doppelten Zeilenumbrüchen (<br><br>) erzeugt werden.
Wenn eine Webseite HTML-Tabellen für das Layout benutzt, dürfen diese keine Semantik (<table>, <th>, <td>) haben, damit Screenreader sie nicht als Tabellen auslesen.
Informationen, die visuell in Tabellenform dargestellt werden, müssen auch im HTML als Tabelle ausgezeichnet sein. So können assistive Technologien die Inhalte richtig auslesen.
Die Header von Tabellen müssen als <th> und die Inhalte als <td> ausgezeichnet werden. Bei komplexen Tabellen mit mehreren Headern brauchst du außerdem das »scope«-Attribut, um die Zusammenhänge klarzumachen.
Überschriften müssen auch im HTML als solche ausgezeichnet sein (<h1> bis <h6>) und sollten in der richtigen Reihenfolge stehen – also zum Beispiel keine <h5> direkt nach einer <h2>.
Alleinstehende Zitate müssen als <blockquote> ausgezeichnet sein. Das können etwa Feedbacks von Kund*innen sein, die einzeln auf der Webseite stehen. Im Fließtext braucht ein Zitat dagegen nicht unbedingt eine Auszeichnung.
Die visuelle Anordnung (z. B. mit CSS-Grids) darf die logische Reihenfolge von Inhalten nicht beeinflussen. Zusammengehörende Elemente, wie eine Überschrift und ein Text, müssen auch so von Screenreadern gelesen werden können.
Verzichte auf sensorische Hinweise in deinen Texten. “Unten Links” kann ein Screenreader-User oft nicht finden, aber den Text eines Buttons oder Labels schon. Schreibe also eher: “Klicke auf den Button ‘Jetzt kaufen’!”
Man muss eine Website sowohl im Hoch- als auch im Querformat anschauen können. Das Wechseln des Formats darf nicht blockiert werden.
Wenn User persönliche Daten (Name, Adresse, Passwort) eingeben müssen, brauchen die Formularfelder ein autocomplete-Attribut mit den richtigen Werten. Beispiel für den Namen: autocomplete=”given-name”
Eine Website muss auch für Menschen mit Farbsehschwäche funktionieren. Wird etwas nur über Farbe vermittelt? (Beispiel: grüner Punkt = aktiv, rot = inaktiv). Dann braucht es zusätzliche grafische Elemente oder Text.
Deine Website muss auch bei 320 px Breite (oder 400 % Zoom bei 1280 px) so funktionieren, dass alle Inhalte und Funktionalitäten erhalten bleiben und Texte nicht horizontal und vertikal gescrollt werden müssen.
Alle grafischen Elemente, mit denen man interagieren kann (zum Beispiel Icon-Buttons) oder die fürs Verständnis wichtig sind, brauchen einen Mindestkontrast von 3:1 zum Hintergrund.
Wenn User den Zeilen- oder Buchstabenabstand von Texten vergrößern, dürfen die Texte nicht abgeschnitten oder verdeckt werden.
Elemente, die per Fokus oder Hover eingeblendet werden (wie Untermenüs), sollten per ESC-Taste zu schließen sein. Außerdem dürfen sie sich weder von selbst wieder schließen noch während man mit der Maus über sie fährt.
Wenn deine Website automatisch Ton abspielt, der länger als drei Sekunden dauert, musst du eine Möglichkeit bieten, den Ton abzuschalten.
Alle Texte (Fließtext, Labels, Placeholder usw.) brauchen das richtige Kontrastverhältnis zum Hintergrund. Der Mindestkontrast liegt bei 4,5:1 für Texte unter 24 Pixel und bei 3:1 für Texte über 24 Pixel.
Eine Webseite muss auf 200 % vergrößert werden können, ohne dass dabei Texte oder andere Inhalte verdeckt werden oder ganz verschwinden. Alle wichtigen Funktionen der Webseite müssen weiterhin bedienbar bleiben.
Schreibe wichtige Infos nicht (nur) als Text in Pixelgrafiken. User können diese Texte nicht nach ihren Bedürfnissen anpassen, und auch assistive Technologien können sie nicht auslesen.
Eine Website muss komplett mit der Tastatur bedienbar sein. Dabei muss man alle Inhalte erreichen können, und alle wichtigen Funktionen müssen ausgeführt werden können.
Wenn ein Element den Fokus über die Tastatur erhalten kann, muss es auch möglich sein, den Fokus per Tastatur wieder wegzubewegen. Man muss also mit der Tab-Taste, den Pfeiltasten, ESC oder Enter das Element wieder verlassen können.
Wenn deine Website einzelne Zeichen (Buchstaben, Ziffern, Sonderzeichen) mit Funktionen belegt, sollten diese Tastenkürzel anpassbar oder abschaltbar sein.
Zeitliche Begrenzungen auf einer Seite müssen abschaltbar oder verlängerbar sein. Man darf User also nicht einfach ausloggen, ohne sie zu warnen oder ihnen zu ermöglichen, die Zeit zu verlängern.
Animationen, die auf deiner Website automatisch starten und länger als 5 Sekunden dauern, müssen pausiert, gestoppt oder ausgeblendet werden können.
Deine Website darf keine Elemente enthalten, die größer als 148 × 148 Pixel (Richtwert) sind und öfter als dreimal pro Sekunde aufblitzen. Dazu gehören zum Beispiel blinkende GIFs oder flackernde Sequenzen in Videos.
Auf einer Website muss es möglich sein, wiederholende Bereiche (wie Header und Footer) zu überspringen. Nutze dafür am besten versteckte Sprunglinks oder HTML-Landmarks.
Interaktive Elemente dürfen, wenn sie per Tastatur fokussiert sind, nicht vollständig von anderen Inhalten verdeckt werden. Sticky-Header, aufklappbare Menüs oder Dialoge dürfen zum Beispiel keine fokussierten Elemente überdecken.
Jede Unterseite muss einen sinnvollen HTML-Titel haben, damit man sie im Browser leicht finden kann. Der Titel sollte den »Namen der aktuellen Seite« plus den »Namen der ganzen Webseite« enthalten.
Mit der Tastatur (Tab-Taste) muss man die Inhalte deiner Website in einer sinnvollen Reihenfolge ansteuern können. Normalerweise folgt die Tab-Reihenfolge der visuellen Reihenfolge.
Die Texte von Links sollten alleine aussagekräftig sein. Ein Link darf vage sein („Mehr erfahren“), wenn der Kontext das Ziel klarmacht. Als Kontext zählt zum Beispiel eine vorhergehende Überschrift oder ein <p>-Tag um den Link herum.
Die Unterseiten deiner Website müssen auf mehr als einem Weg erreichbar sein. Zusätzlich zur Navigation solltest du zum Beispiel eine Suche oder eine Sitemap anbieten.
Überschriften müssen den Inhalt oder den Zweck des Inhalts, der auf sie folgt, klar beschreiben. Auch die Beschriftungen von Formularfeldern müssen deutlich machen, was man in das Feld eintragen soll.
Interaktive Elemente (Buttons, Links usw.) brauchen einen Fokuszustand. Es muss immer sichtbar sein, welches Element auf der Seite den Tastaturfokus hat.
Jede Funktion einer Website muss per einfacher Eingabe zu bedienen sein. Komplexere Gesten wie Swipen oder Aktionen mit mehreren Fingern brauchen eine »klickbare« Alternative (Maus, Touch, Enter).
Das Drücken und Halten eines Buttons oder Links (mit Maus oder Finger) darf nicht direkt eine Aktion auslösen. Erst das Loslassen darf die Aktion ausführen, damit sie noch abgebrochen werden kann.
Wenn du versteckte Texte nutzt, um Links, Buttons oder Formularfelder für Screenreader genauer zu beschreiben, muss der sichtbare Text zumindest im versteckten Text enthalten sein. Am besten startet er auch genau so.
Funktionen, die durch die Bewegung eines Geräts ausgelöst werden, müssen auch über eine einfache Eingabe (Maus, Touch, Enter) auslösbar sein. Zudem muss die Aktivierung durch Bewegung abgeschaltet werden können.
Wenn es Funktionen auf der Website gibt, die nur über Drag-and-drop-Gesten ausgelöst werden, müssen diese eine einfache Eingabe als Alternative haben. Dazu zählt zum Beispiel das Klicken eines Buttons.
Bedienelemente wie Buttons oder Links müssen eine klickbare Fläche von mindestens 24 × 24 px haben, die sich nicht mit der klickbaren Fläche anderer bedienbarer Elemente überschneidet.
Der <html>-Tag muss ein »lang«-Attribut mit der Sprache der Seite haben. So können assistive Technologien die Seite in der richtigen Sprache wiedergeben, und auch die automatische Übersetzung im Browser funktioniert richtig.
Wenn auf einer Website Sätze, Phrasen, Zitate oder Ähnliches in einer anderen Sprache verwendet werden, muss der anderssprachige Text mit dem »lang«-Attribut und der richtigen Sprache ausgezeichnet werden.
Den Tastaturfokus auf ein Element zu setzen, darf keine Funktion auslösen, die den Kontext verändert. Funktionen sollen erst bei Bestätigung, zum Beispiel per Enter, Leertaste oder Mausklick ausgeführt werden.
Das Interagieren mit einem Formularelement (z. B. Checkbox) darf keine unerwartete Kontextänderung, wie eine Verschiebung des Tastaturfokus, auslösen. Eine Kontextänderung ist erlaubt, wenn der User vorher gewarnt wurde.
Die Navigations-Mechanismen (Menü, Breadcrumbs, Suche und Ähnliches) auf deiner Website müssen immer an der gleichen Stelle zu finden sein, damit die Navigation durch die Unterseiten einfacher wird.
Die Benennung von Bedienelementen (wie Links, Buttons, Formularfelder) muss einheitlich sein, wenn sie auf mehreren Unterseiten die gleiche Funktion haben. Das sollte auch fürs Aussehen gelten.
Wenn eine Website eine Hilfe anbietet, sollte diese leicht und schnell zu finden sein. Achte darauf, dass sie auf allen Unterseiten immer an derselben Stelle platziert ist. Als Hilfe zählt zum Beispiel schon die Angabe einfacher Kontaktdaten.
Wenn ein Eingabefehler in einem Formular auftritt, muss der Fehler dem User in Textform beschrieben werden.
Formularfelder sollten sichtbare Beschriftungen haben, am besten über das <label>-Tag. Die Beschriftung sollte dauerhaft sichtbar sein.
Die Texte einer Fehlermeldung sollten möglichst konkret sein, damit man auch weiß, wie der Fehler behoben werden kann.
Bei einer Transaktion oder Interaktion, die negative Folgen haben kann, sollte es möglich sein, die Aktion entweder vor dem Absenden zu prüfen, sie noch einmal zu bestätigen oder sie rückgängig zu machen.
User sollten Daten nur einmal eingeben müssen. Werden die Daten erneut gebraucht? Dann sollte die Website sie automatisch ausfüllen oder es ermöglichen, sie einfach zu übernehmen (Beispiel: Lieferdaten = Rechnungsdaten).
Wenn User ihre Identität bestätigen müssen, darf das keinen kognitiven Funktionstest erfordern. Copy-and-paste oder das Ausfüllen über einen Passwort-Manager sollte problemlos möglich sein.
Alle interaktiven Elemente auf einer Website müssen so programmiert sein, dass Name, Rolle und Wert (oder Zustand) von assistiven Technologien ermittelt werden können und auch Änderungen aktualisiert werden.
Wenn eine Webseite Statusnachrichten oder Benachrichtigungen einblendet, sollten diese auch von Screenreader-Usern automatisch vorgelesen werden – ohne den Fokus zu verschieben. Dafür kannst du ARIA-Live-Regions verwenden.
Unser Plakat der WCAG 2.2. Richtlinien als digitale Version. Die Auflösung ist 360dpi und sollte hoffentlich problemlos zoom-bar sein!Alle Erlöse deiner Bestellung gehen an: Lupus Erythematodes Selbsthilfegemeinschaft e. V.Zur Verkaufsseite des WCAG-Posters
Sie sehen gerade einen Platzhalterinhalt von Google Maps. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie müssen den Inhalt von reCAPTCHA laden, um das Formular abzuschicken. Bitte beachten Sie, dass dabei Daten mit Drittanbietern ausgetauscht werden.
Mehr InformationenSie müssen den Inhalt von Turnstile laden, um das Formular abzuschicken. Bitte beachten Sie, dass dabei Daten mit Drittanbietern ausgetauscht werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von X. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
