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.

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.

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”

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.

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.

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.

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

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.

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.

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.

Den Tastatur-Fokus auf ein Element zu setzen, darf keine unerwartete Funktion auslösen. Funktionen müssen zum Beispiel erst bei Bestätigung per Enter, Space 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.

Wenn Fehler auf der Website auftreten, sollten sie leicht erkennbar sein und nicht nur durch Farben hervorgehoben werden. Zusätzlich brauchst du einen Text, der den Fehler beschreibt.

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.