Wenn du ein grafisches CAPTCHA einsetzt, musst du mindestens eine Alternative dafür bereitstellen.

Bedienelemente, die ohne Text auskommen, wie klickbare Icons oder andere klickbare Bilder, brauchen eine Textalternative, damit sie von Screenreader ausgelesen werden können.

Ein Bild sollte ein leeres Alt-Attribut haben, wenn es einen rein visuellen Mehrwert hat oder keine nützlichen Informationen vermittelt. Im Zweifel ist es besser, einen Alt-Text zu schreiben, als ihn wegzulassen.

Jedes Bild, das Infos vermittelt oder dazu beiträgt, die Inhalte deiner Seite besser zu verstehen, benötigt einen Alternativtext bzw. eine Textalternative (zum Beispiel neben dem Bild) für Screenreader.

Für Audiodateien muss ein Text (Transkript) als Medienalternative bereitgestellt werden. Für stumme Videos brauchst du entweder ein Transkript oder eine Audiodatei als Alternative.

Aufgezeichnete Videos benötigen Untertitel. Achte dabei darauf, dass genau das in den Untertiteln steht, was auch im Audio vorkommt.

Deine Videos benötigen eine Audiodeskription, wenn wichtiger Inhalt darin vorkommt, der nicht auf der Tonspur beschrieben wird. Eine Volltext-Alternative ist nur WCAG-Level A und nicht AA.

Live-Vorträge benötigen Untertitel. Achte dabei darauf, dass genau das in den Untertiteln steht, was auch im Audio vorkommt.

Videos benötigen eine Audiodeskription, wenn sie wichtige Inhalte vermitteln, die nicht bereits über die Tonspur bereitgestellt werden.

Die Beschriftung (<label>) für Formularfelder (<input>) benötigt ein »for«-Attribut. So gibst du dem Feld einen zugänglichen Namen, damit Screenreader auch vorlesen können, um welches Feld es sich handelt.

Paragrafen und Text-Formatierungen (fett, kursiv usw.) müssen die richtigen HTML-Elemente nutzen. Du darfst keine leeren Paragrafen und doppelte Zeilenumbrüche (<br>) für Abstände nutzen.

Wenn deine Webseite noch HTML-Tabellen fürs Layout nutzt, solltest du das schnellstens ändern!

Listen müssen im HTML-Code auch als Listen ausgezeichnet sein. Sie brauchen also entweder ein <ul>, <ol> oder ein <dl>, je nachdem, für welchen Zweck du die Liste nutzt.

Deine Datentabellen müssen mit den richtigen HTML-Elementen ausgezeichnet sein, um auch von assistiven Technologien verstanden zu werden.

Die Köpfe von Tabellen müssen als <th> ausgezeichnet werden. Für komplexere Tabellen brauchst du außerdem das »scope«-Attribut.

Überschriften müssen auch als solche im Code ausgezeichnet sein und sollten die richtige Reihenfolge einhalten (keine <h5> nach einer <h2> usw.).

Zitate (zum Beispiel von Kund*innen) benötigen die richtige Auszeichnung als <blockquote>, oder <q> für kurze Zitate in Fließtext.

Die visuelle Reihenfolge deiner Elemente, sollte sich mit der Reihenfolge decken, die man mit der Tastatur (Tab/Shift-Tab) oder dem Screenreader erlebt.

Verzichte auf sensorische Hinweise. »Unten Links« kann ein Screenreader nicht finden, aber den Text eines Buttons oder Labels schon. Schreibe also eher: »Klicke auf den Button ‘Jetzt kaufen’!«

Ich muss die Möglichkeit haben, deine Website im vertikalen und horizontalen Format anzuschauen. Das Wechseln des Formats darf nicht verhindert werden.

Wenn User*innen persönliche Daten, wie Name, Adresse oder Passwort, eingeben sollen, müssen die autocomplete-Attribute an den Eingabefeldern die richtigen Werte haben.

Informationen und interaktive Elemente müssen auch ohne Farbinformationen wahrgenommen und verstanden werden können. Empfehlung: Deine Website sollte auch in Graustufen verständlich sein.

Deine Webseite muss auch bei 320px Breite so funktionieren, dass alle Inhalte und Funktionalitäten erhalten bleiben, ohne Texte zweidimensional (horizontal und vertikal) scrollen zu müssen.

Alle grafischen Elemente, mit denen man interagieren kann (zum Beispiel Icon-Buttons), oder die wichtig fürs Verständnis der Seite sind, sollten einen Kontrast von mindestens 3:1 zum Hintergrund haben.

Wenn ich den Zeilen- oder Buchstabenabstand vergrößere, dürfen die Texte der Website nicht abgeschnitten oder verdeckt werden.

Eingeblendete Elemente (wie Menüs) sollten sich per ESC-Taste schließen lassen. Außerdem dürfen sie sich weder von alleine schließen, noch wenn man sich mit der Maus über sie bewegt.

Wenn deine Website automatisch Geräusche macht, die länger als drei Sekunden dauern, musst du die Möglichkeit geben, sie abzuschalten.

Das Kontrastverhältnis von Text zu Hintergrund muss hoch genug sein. Der vorgeschriebene Mindestkontrast liegt bei 4,5:1 für Texte unter 24 px Schriftgröße und bei 3:1 für Texte über 24 px Schriftgröße.

Stelle sicher, dass auf 200 % vergrößert werden kann. Dabei dürfen Texte oder andere Inhalte nicht verdeckt werden oder sogar ganz verschwinden. Alle Funktionen der Website müssen nutzbar bleiben.

Zeige keine Informationen als Text in Bild. Nutzende können diese nicht anpassen und assistive Technologien können sie nicht lesen.

Deine Website muss vollständig mit der Tastatur bedient werden können. Dabei müssen alle Seiten erreichbar bleiben und es darf keine Funktionalität verloren gehen.

Wenn ich etwas mit Tastatur ansteuern kann, muss sichergestellt werden, dass ich: a) nicht steckenbleibe und immer weg-navigieren kann und b) überall wieder hinkomme (z.B. zurück in ein Modal).

Wenn deine Webseite einzelne Zeichen (Buchstaben, Ziffern, Sonderzeichen) mit Funktionen belegt, müssen diese anpassbar oder abschaltbar sein.

Haben Inhalte oder Funktionen auf deiner Seite zeitliche Begrenzungen, müssen diese abschaltbar, anpassbar oder verlängerbar sein.

Animationen, die auf deiner Website automatisch starten, müssen pausiert, gestoppt oder versteckt werden können, wenn sie länger als fünf Sekunden dauern.

Deine Website darf keine Inhalte beinhalten, die schneller als drei Mal in einer Sekunde aufblitzen. Darunter fallen zum Beispiel wild blinkende Buttons oder hektische GIFs.

Auf deiner Seite muss es möglich sein, sich wiederholende Bereiche (wie Header und Footer) zu überspringen. Nutze dafür zum Beispiel Sprunglinks, Landmarks und eine gute Überschriften-Struktur.

Interaktive Elemente dürfen, wenn sie per Tastatur fokussiert sind, nicht von anderen Inhalten verdeckt werden. Sticky-Header, aufklappbare Menüs oder Dialoge können zum Beispiel zu Problemen führen.

Jede Seite benötigt einen sinnvollen HTML-Titel, damit ich sie im Browser leichter finden kann. Der Titel sollte den »Namen der momentanen Seite« plus den »Namen der ganzen Webseite« beinhalten.

Mit Tastatur (Tab-Taste) sollten die Inhalte deiner Website in einer sinnvollen Reihenfolge angesteuert werden können. Im Normalfall folgt die Tab-Reihenfolge der visuellen Reihenfolge.

Der Text eines Links (und auch der Alternativtext eines verlinkten Bildes) sollte den Zweck des Links verständlich machen. Er sollte sagen, wohin der Link führt. Wenn das nicht geht, sollte der Linktext zumindest aus dem Kontext Sinn ergeben. Der Kontext kann die Überschrift vor dem Link sein oder wenn der Link sich im gleichen <p>-Tag, wie der beschreibende Text befindet.

Die Unterseiten deiner Webseite müssen auf mehr als einem Weg erreichbar sein. Zusätzlich zur Navigation musst du eine Suche oder eine Sitemap anbieten.

Deine Überschriften müssen klar den Inhalt oder den Zweck des Inhalts beschreiben, der auf sie folgt. Auch die Beschriftungen von Formularen und Formularfeldern müssen Sinn ergeben.

Alle interaktiven Elemente, wie Links, Buttons oder Formularfelder, benötigen einen visuellen Zustand, der deutlich macht, dass das Element per Tastatur fokussiert ist. Wir empfehlen, einen Fokusrahmen zu nutzen, da dieser sehr deutlich zu erkennen ist und auf jedem Elemente konsistent gleich aussieht.

Alle Funktionen deiner Website müssen mit einfachen Eingaben ausgeführt werden können. Komplexere Gesten, wie Swipen oder Aktionen mit mehreren Fingern, brauchen eine entsprechende Alternative.

Aktionen, die über eine einfache Eingabe ausgeführt werden, dürfen nicht bereits beim Tippen oder Klicken und Halten ausgeführt werden, sondern erst beim Loslassen, damit die Aktion auch abgebrochen werden kann.

Nutzt du versteckte Texte oder Code, um Links, Buttons oder Formularfelder genauer zu beschreiben, sollten diese genau so starten, wie der sichtbare Text. Pflicht ist, dass der sichtbare Text enthalten sein muss.

Funktionen, die durch Bewegung (von Mensch oder Gerät) ausgelöst werden können, brauchen eine Alternative, die ohne Bewegung funktioniert. Die Aktivierung über Bewegung muss außerdem abgeschaltet werden können.

Wenn deine Website Funktionen bietet, die Drag-and-Drop-Gesten voraussetzen, müssen diese eine einfachere Alternative haben, wie das Klicken eines Buttons.

Bedienelemente, wie zum Beispiel Buttons oder Einträge, in einem ausgeklappten Untermenü, müssen eine klickbare Fläche von mindestens 24 × 24 px haben, die sich nicht mit der Klickfläche anderer Elemente überschneidet.

Gib am <html>-Element das »lang«-Attribut an, damit assistive Technologien die Seite in der richtigen Sprache wiedergeben oder auch die automatische Übersetzung im Browser richtig funktioniert.

Wenn auf einer Webseite Worte, Sätze oder Abschnitte in einer anderen Sprache als der Hauptsprache der Webseite vorkommen, brauchen diese Texte das richtige »lang«-Attribut.

Mit der Tastatur den Fokus auf ein Element zu setzen, darf keine unerwartete Funktion auslösen. Stelle sicher, dass Funktionen zum Beispiel erst bei Bestätigung per Enter, Space oder Mausklick ausgeführt werden.

Eine Eingabe in einem Textfeld oder das Klicken von zum Beispiel Checkboxen darf keine Kontext-Änderung auslösen, die nicht bekannt gemacht wurde oder erwartbar ist.

Mechanismen zur Navigation auf deiner Website müssen immer an der gleichen Stelle zu finden sein, um eine einfache Navigation über mehrere Seiten hinweg sicherzustellen.

Die Beschriftungen deiner Navigations- oder Interaktionselemente, wie Buttons, Icons, Formularfelder, müssen identisch sein, wenn sie dieselbe Funktion haben.

Wenn deine Seite eine Hilfe anbietet, sollte diese Hilfe einfach zu finden sein. Stelle sicher, dass diese immer an derselben Stelle platziert ist. Als Hilfe können auch einfache Kontaktdaten zählen.

Fehler sollten leicht erkennbar sein und nicht nur durch Farben hervorgehoben werden. Du benötigst zusätzlichen Text, um sie zu beschreiben.

Formularfelder (auch Checkboxen) brauchen sinnvolle Beschriftungen (Labels). Diese sollten dauerhaft angezeigt werden. Platzhalter sind darum nicht ausreichend.

Schreibe den Text einer Fehlermeldung möglichst konkret. Gib dazu an, wie ich den Fehler beheben kann.

Beim Ausführen einer Transaktion oder einer Interaktion, die negative Konsequenzen haben kann, muss es eine Möglichkeit geben, die Aktion vor dem Absenden zu prüfen oder sie im Nachgang rückgängig zu machen.

Ich sollte Informationen nur einmal eingeben müssen. Die Website sollte die Infos dann beim nächsten Mal von alleine eintragen oder Vorschläge machen. Ausnahme: Die Eingabe ist sicherheitsrelevant.

Wenn Nutzende ihre Identität bestätigen müssen, darf dafür kein kognitiver Funktionstest (Passwort merken) nötig sein. Das Einfügen mit Copy & Paste oder das Befüllen durch einen Passwort-Manager muss zum Beispiel möglich sein.

Native HTML-Elemente bringen meist alles mit, um von assistiven Technologien verstanden zu werden. Entwickelst du selbst, musst du dafür sorgen, dass die Elemente für den Accessibility-Tree zugänglich sind.

Wenn du Statusnachrichten oder Benachrichtigungen einblendest, müssen diese auch assistiven Technologien automatisch mitgeteilt werden.