Wenn deine Icons oder deine Bilder klickbar sind und irgendwo hinführen oder eine Funktion auslösen, benötigen sie eine Textalternative, damit sie von Screenreadern verstanden werden.

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.

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.

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

Für Audiodateien oder stumme Videos (Videos komplett ohne Audio) müssen Texte als Alternative bereitgestellt werden.

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.

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

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

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

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.

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 benötigst du außerdem das »scope«-Attribut.

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

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.

Die visuelle Reihenfolge deiner Elemente sollte sich mit der Reihenfolge decken, wie man sie 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’!«

Nutzende müssen deine Webseite oder App im vertikalen und horizontalen Format anschauen können.

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

Verlasse dich nicht darauf, dass User Farben sehen können. Vermeide es, Dinge nur durch Farben zu zeigen oder zu beschreiben. Wir empfehlen: Deine Webseite sollte auch in Graustufen verständlich sein.

Deine Webseite muss bei 1280 px Breite und 400 % Zoom oder bei 320 px Breite so funktionieren, dass alle Inhalte und Funktionen erhalten bleiben. Ich darf dabei bei Texten nicht zweidimensional (horizontal und vertikal) scrollen müssen. Bei Elementen, bei denen es nicht anders geht, wie Tabellen oder Videos, ist das Scrollen in zwei Dimensionen erlaubt.

Alle Elemente, mit denen ich interagieren kann (etwa Buttons), oder die wichtig fürs Verständnis sind, sollten sich über ein Kontrastverhältnis von mindestens 3:1 ausreichend vom Hintergrund abheben.

Texte auf deiner Webseite dürfen, basierend auf der Schriftgröße, mit 1,5-facher Zeilenhöhe, 2-fachem Absatz-, 0,12-fachem Buchstaben- und 0,16-fachem Wortabstand weder abgeschnitten noch überlagert 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).

Wenn deine Webseite automatisch Geräusche abspielt, die länger als drei Sekunden dauern, musst du Nutzer*innen ermöglichen, sie abzuschalten.

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

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 Webseite müssen nutzbar bleiben.

Schreibe keine Infos als Text in Bilder. Nutzende können diese nicht anpassen und assistive Technologien können sie nicht lesen. Ausnahmen gelten für Bilder, bei denen der Text essenziell ist, wie Zertifikate oder Bücher, oder wenn die Grafik zu Doku-Zwecken dient (wie bei unseren WCAG-Grafiken!).

Deine Webseite muss vollständig mit der Tastatur bedient werden können. Ich muss mit der Tastatur alle Seiten erreichen können und es darf keine Funktionalität verloren gehen.

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 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 mehrfach verlängerbar sein – außer sie sind essenziell (Beispiel: Auktionen oder Online-Prüfungen).

Animationen, die auf deiner Webseite automatisch starten, müssen pausiert, gestoppt oder versteckt werden können, wenn sie länger als fünf Sekunden dauern. Es sei denn, sie sind zwingend notwendig (wie Animation einer Zeitanzeige aus Sicherheitsaspekten).

Deine Webseite darf keine Inhalte beinhalten, die schneller als dreimal in einer Sekunde aufblitzen. Darunter fallen etwa wild blinkende Buttons oder hektische GIFs.

Auf deiner Seite muss es eine Möglichkeit geben, Bereiche, die sich wiederholen, wie Header und Footer, zu überspringen. Nutze dafür etwa 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, ausklappbare Menüs oder Dialoge können hier 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) oder einem Screenreader sollten die Inhalte deiner Webseite in einer sinnvollen Reihenfolge angesteuert werden können. Im Normalfall folgt diese 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. Ebenso müssen die Beschriftungen von Formularen und Formularfeldern Sinn ergeben.

Interaktive Elemente, wie Links, Buttons oder Formularfelder, müssen klar erkennbar sein und sich vom Normalzustand unterscheiden, wenn sie mit der Tastatur fokussiert werden. Wir empfehlen, einen Fokusrahmen zu nutzen, da diese Variante auf jedem Elemente konsistent gleich aussieht und sehr robust ist.

Jede Funktion einer Webseite muss mit einfachen Eingaben ausgelöst werden können. Komplexe Gesten wie »swippen« und »pinchen« oder Aktionen, die mehrere Finger brauchen, benötigen eine entsprechende Alternative, um sie »per Klick« auszulösen.

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 in Aria-Labels oder sonstigem Code, um Links, Buttons oder Formularfelder genauer zu beschreiben, müssen diese die gleichen Worte enthalten und mit den Worten anfangen, wie der sichtbare Text.

Funktionen, die durch Bewegung des Gerätes ausgelöst werden können, benötigen eine Alternative, die ohne Bewegung funktioniert. Die Aktivierung über Bewegung muss außerdem abgeschaltet werden können.

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

Bedienelemente, wie Buttons oder Einträge in einem ausgeklappten Untermenü, müssen eine Klickfläche von größer oder gleich 24 × 24 px haben – noch besser 48 × 48 px.

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 du auf deiner Webseite Phrasen aus einer anderen Sprache als der Hauptsprache verwendest, muss an dem entsprechenden Element das »lang«-Attribut gesetzt werden.

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

Eine einfache Eingabe in ein Textfeld oder das Klicken von Elementen, wie Checkboxen, darf keine Kontext-Änderung auslösen (etwa eine neue Seite öffnen), wenn dieses Verhalten davor nicht beschrieben wurde oder zu erwarten war.

Navigations-Mechanismen auf deiner Webseite müssen immer an der gleichen Stelle zu finden sein, um eine nachvollziehbare Navigation über alle Seiten hinweg sicherzustellen.

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

Wenn du Hilfsmechanismen, wie Kontaktdaten oder einen Chatbot auf mehreren Seiten anbietest, müssen diese immer an der selben Stelle zu finden und zu erreichen sein.

Fehlermeldungen bei Formularen müssen als solche erkennbar sein. Dafür müssen betroffene Felder gekennzeichnet und mit einer aussagekräftigen Beschreibung des Fehlers ergänzt werden.

Formularfelder (auch Checkboxen) benötigen sinnvolle Beschriftungen (Labels). Diese sollten dauerhaft angezeigt werden, weshalb Platzhalter nicht ausreichend sind.

Wenn du mir einen Fehler auf deiner Webseite anzeigst, schreibe den Fehlertext so, dass ich auch 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.

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

Wenn User*innen die Identität bestätigen müssen, darf dafür kein kognitiver Funktionstest nötig sein. Dafür darf das Einfügen oder Befüllen durch einen Passwort-Manager nicht blockiert werden.

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.