Wenn Nutzende ihre Identität bestätigen müssen, sollte für keinen Schritt ein kognitiver Funktionstest nötig sein. Das ist nur in Ordnung, wenn es eine barrierefreie Alternative oder Unterstützung bei der Lösung gibt. Ausnahmen sind Tests, die Objekterkennung testen, oder der User nicht textuelle Inhalte identifizieren muss, die er selbst bereitgestellt hat.

Daten, die man schon mal eingegeben hat, sollte man nicht erneut eingeben müssen. Die Webseite sollte diese Daten dann von selbst eintragen oder beim Eintragen helfen, indem sie Vorschläge macht. Ausnahmen: Eingabe von sicherheitsrelevanten Daten.

Ein Button, ein Formularfeld oder eine andere Komponente darf, wenn sie den Fokus hat, nicht vollständig von anderen Inhalten verdeckt sein.

Du solltest dich nicht darauf verlassen, dass User Inhalte ziehen können. Biete zusätzlich zu Drag-and-drop, eine einfache Zeiger-Alternative an.

Fast alle nativen HTML-Elemente bringen alles mit, was es braucht, um sie mit assistiven Technologien zu bedienen. Wenn du selbst Komponenten entwickelst, musst du sicherstellen, dass deine Komponenten das auch können.

Wenn du auf der Seite eine Statusnachricht, etwa eine Notifikation, anzeigst, muss diese assistiven Technologien mitgeteilt werden, ohne dass der Nutzende aktiv etwas dafür tun muss.

Wenn deine Logos oder deine Bilder klickbar sind und an einen anderen Ort führen oder eine Funktion auslösen, benötigen diese Elemente einen Alternativ-Text, damit sie von Screenreadern verstanden werden.

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

Überschriften müssen die richtige Reihenfolge einhalten. Keine H3 vor einer H2 und so weiter. Eine H1 darf übrigens öfter vorkommen, wenn sie die Seite sinnvoll strukturiert!

Zitate von Leuten (auch von Kunden) benötigen die richtige Auszeichnung als <blockqoute>.

Deine Datentabellen benötigen die richtigen Auszeichnungen und HTML-Tags, um von assistiven Technologien verstanden zu werden.

Bei einfachen Tabellen (Bild) sollten die Köpfe mit einem “scope”-Attribute ausgezeichnet sein (theoretisch reicht <th>). Bei komplexen Tabellen müssen sie mit dem “scope”-Attribute sein.

Wenn deine Webseite noch HTML-Tabellen fürs Layout nutzt, ist ohnehin schon alles verloren …

Beschriftungen für Formularfelder benötigen ein “for“-Attribut im HTML, um Screenreadern anzuzeigen, auf welches Formularfeld sie sich beziehen.

Sorge einfach für eine saubere Struktur deiner Seite. Vermeide es insbesondere Leerzeilen und harte Umbrüche zu benutzen, um Inhalte visuell zu gliedern. Nutze dafür die richtigen Elemente wie Tabellen.

Ich muss die Möglichkeit haben, deine Webseite im vertikalen und horizontalen Format anzuschauen, ohne dass Inhalte verdeckt werden oder verschwinden.

Wenn deine Webseite Geräusche macht, musst du mir eine Möglichkeit geben, diese auszuschalten.

Gib mir immer mehr als einen Weg, um auf die Inhalte deiner Seite zuzugreifen. Zusätzlich zur Navigation kannst du mir eine Suche oder eine Sitemap anbieten.

Elementen, mit denen der User interagieren kann (Buttons, Links etc.), brauchen einen Fokus-Rahmen. Wir empfehlen, dass dieser Rahmen deutlich sichtbar ist und am besten im CSS als Border umgesetzt wird.

Muss ich mit meinem Finger auf einen Bildschirm drücken und dann ziehen, um eine Aktion auszuführen? Dann braucht es eine Alternative, die auch von assistiven Technologien ausgeführt werden kann.

Alle Funktionen, die ich durch Bewegungen des Geräts auslösen kann, müssen Alternativen haben, damit sie auch von assistiven Technologien ausgelöst werden können.

Gib im HTML-Dokument das “lang”-Attribut an, damit assistive Technologien die Seite in der richtigen Sprache wiedergeben.

Nur weil ich beispielsweise mit Tastatur oder Screenreader einen Fokus auf ein Menü setze oder meinen Finger draufhalte, sollte es nicht den Link betätigen.

Eine Eingabe in einem Formular sollte keine unerwarteten Kontextänderungen auslösen. Der Fokus sollte zum Beispiel nicht einfach auf ein anderes Element springen oder sich ein neuer Tab öffnen.

Deine Listen müssen die richtigen HTML-Elemente haben. Sie müssen also entweder eine <ul> oder eine <ol> sein, je nachdem, ob sie eine geordnete Liste sind oder nicht.

Deine Paragrafen so wie Auszeichnungen in deinen Paragrafen (em, strong) müssen die richtigen HTML-Elemente haben, damit sie verständlich für assistive Technologien sind.

Fehlermeldungen sollten leicht erkennbar sein und nicht nur durch Farben dargestellt werden. Du benötigst zusätzlichen Text, um sie zu beschreiben. Dieser Text muss auch für Screenreader lesbar sein.

Wenn ein User auf deiner Webseite etwas eingeben muss, musst du ihn anleiten, was er eingeben soll. So brauchen zum Beispiel Eingabefelder eine Beschreibung (wir empfehlen: sichtbare Labels).

Wenn du mir einen Fehler auf deiner Webseite anzeigst, schreibe den Fehlertext so, dass ich weiß, was ich tun muss, um den Fehler zu beheben.

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.

Stelle sicher, dass man Text auf bis zu 200 % vergrößern kann, ohne dass Teile des Textes oder der Webseite davon verdeckt werden oder ganz verschwinden. Wir empfehlen relative Einheiten wie rem oder em.

Wenn ich deine Webseite auf 400 % vergrößere, muss sie sich so gut anpassen, dass bei Texten beziehungsweise Absätzen kein horizontaler Scrollbalken entsteht.

Wenn ich den Zeilen- oder Buchstabenabstand vergrößere, dürfen dabei die Inhalte deiner Webseite oder App nicht abgeschnitten oder verdeckt werden.

Eingeblendete Elementen (etwa Menüs oder Modale) sollten: a) Mit der Maus überfahrbar sein, ohne zu verschwinden. b) Sich nicht nach einer Zeit allein schließen. c) Sich schließen lassen, ohne den Fokus zu verschieben (zum Beispiel mit ESC oder Aktivieren des auslösenden Elements).

Deine Webseite muss für mich bedienbar sein, auch wenn ich keine Maus nutzen kann.

Wenn ich etwas mit Tastatur ansteuern kann, musst du sicherstellen, dass ich: a) nicht steckenbleibe und immer weg-navigieren kann und b) ich auch überall wieder hinkomme (zurück in ein Modal).

Wenn du Tasten mit Funktionen ausgestattet hast (oft in Apps), mach sie anpassbar oder abschaltbar, sonst kann es mit Tastaturnavigation Probleme geben.

Lasse Meldungen nicht automatisch verschwinden und logge Nutzer nicht automatisch aus. Gibt es zeitliche Begrenzungen? Dann mache sie verlängerbar – außer sie sind essenziell (Beispiel: Auktionen oder Online-Prüfungen).

Ich muss Animationen auf deiner Webseite stoppen können, wenn sie über 5 Sekunden dauern. Es sei denn, sie sind zwingend notwendig. (Animation einer Zeitanzeige für Sicherheitsaspekte.)

Dein HTML sollte es ermöglichen, Bereiche zu überspringen, die sich auf einer Webseite wiederholen (Beispiel: Header). Nutze dazu eine oder mehrere Dinge wie Sprunglinks, Listen, Überschriften, Main-Tag etc.

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.

Navigiere ich mit der Tastatur, sollten deine Elemente in einer nachvollziehbaren Reihenfolge sein. Ich sollte also zum Beispiel nicht vom Header zuerst in den Footer springen und dann zurück in den Hauptbereich.

Wenn du mit dem Finger einen Button auf deinem Telefon drückst und kurz hältst, sollte das nicht direkt die Aktion auslösen. Auch ein Link sollte dich bei der Aktion nicht gleich weiterleiten.

Verzichte auf Elemente, die schnell hintereinander aufblitzen. Darunter fallen etwa wild blinkende Buttons oder auch hektische GIFs.

Wenn User persönliche Daten eingeben müssen, sollten die Eingabefelder mit dem richtigen Autocomplete-Attribut versehen sein.