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

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

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.

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 dass Gruppen von Feldern programmatisch als Einheit ausgezeichnet werden.

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!

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>.

Das visuelle Anordnen von Elementen darf die logische Reihenfolge der Elemente nicht so beeinflussen, dass sie für Screenreader-User keinen Sinn mehr ergeben.

Eine Website sollte sowohl im Hoch- als auch im Querformat funktionieren. Wenn du also Inhalte auf deinem Handy (oder auf anderen Geräten) betrachtest und es um 90 Grad drehst, muss sich die Webseite auch anpassen.

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.

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

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.

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.

Deine Website muss vollständig mit der Tastatur bedient werden können. Das heißt, dass alle Inhalte per Tastatur erreicht und alle notwendigen Funktionalitäten bedient werden können.  

Wenn per Tastatur eine Komponente der Seite erreicht werden kann, muss ich die Komponente auch wieder verlassen können. Man darf also nicht steckenbleiben und dadurch zum Beispiel gezwungen werden, die Seite neu zu laden.

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.

Auf Webseiten sollten Inhalte nicht mehr als dreimal pro Sekunde blinken. Darunter fallen zum Beispiel 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 der 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.

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.

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.

Funktionen, die durch Bewegung des Geräts (z. B. Schütteln, Neigen, Drehen) 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.

Gib im <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 man mit der Tastatur den Fokus auf ein Element setzt, darf dadurch keine unerwartete Funktion ausgelöst werden. Funktionen sollen nur durch Bestätigung per Enter, Space oder Mausklick ausgeführt werden.

Das Interagieren mit Formularelementen wie Textfeldern oder Checkboxen führt nicht zu einer Kontextänderung, es sei denn, der Benutzer wurde vor der Nutzung des Elements über dieses Verhalten informiert.

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

Formularfelder, einschließlich Checkboxen, brauchen klare und aussagekräftige Beschriftungen (Labels). Diese sollten immer sichtbar sein.

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 allein 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 sie 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.