Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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. Eine Ausnahme besteht dann, wenn man das überdeckende Element mit ESC schließen kann.
Kurzbeschreibung:
Wenn deine Webseite Funktionen bietet, die Drag-and-drop-Gesten voraussetzen, müssen diese eine einfachere Alternative, wie das Klicken eines Buttons, haben.
Kurzbeschreibung:
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.
Kurzbeschreibung:
Wenn du Statusnachrichten oder Benachrichtigungen einblendest, müssen diese auch assistiven Technologien automatisch mitgeteilt werden.
Kurzbeschreibung:
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.
Kurzbeschreibung:
Wenn du ein grafisches CAPTCHA einsetzt, musst du mindestens eine Alternative dafür bereitstellen.
Kurzbeschreibung:
Überschriften müssen auch als solche im Code ausgezeichnet sein und sollten die richtige Reihenfolge einhalten (keine <h5> nach einer <h2> usw.).
Kurzbeschreibung:
Zitate (zum Beispiel von Kund*innen) benötigen die richtige Auszeichnung als <blockqoute>, oder <q> für kurze Zitate in Fließtext.
Kurzbeschreibung:
Deine Datentabellen müssen mit den richtigen HTML-Elementen ausgezeichnet sein, um auch von assistiven Technologien verstanden zu werden.
Kurzbeschreibung:
Die Köpfe von Tabellen müssen als <th> ausgezeichnet werden. Für komplexere Tabellen benötigst du außerdem das »scope«-Attribut.
Kurzbeschreibung:
Wenn deine Webseite noch HTML-Tabellen fürs Layout nutzt, ist eh schon alles verloren…
Kurzbeschreibung:
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.
Kurzbeschreibung:
Die visuelle Reihenfolge deiner Elemente sollte sich mit der Reihenfolge decken, wie man sie mit der Tastatur (Tab/Shift-Tab) oder dem Screenreader erlebt.
Kurzbeschreibung:
Nutzende müssen deine Webseite oder App im vertikalen und horizontalen Format anschauen können.
Kurzbeschreibung:
Wenn deine Webseite automatisch Geräusche abspielt, die länger als drei Sekunden dauern, musst du Nutzer*innen ermöglichen, sie abzuschalten.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
Formularfelder (auch Checkboxen) benötigen sinnvolle Beschriftungen (Labels). Diese sollten dauerhaft angezeigt werden, weshalb Platzhalter nicht ausreichend sind.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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).
Kurzbeschreibung:
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.
Kurzbeschreibung:
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).
Kurzbeschreibung:
Wenn deine Webseite einzelne Zeichen (Buchstaben, Ziffern, Sonderzeichen) mit Funktionen belegt, müssen diese anpassbar oder abschaltbar sein.
Kurzbeschreibung:
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).
Kurzbeschreibung:
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).
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
Deine Webseite darf keine Inhalte beinhalten, die schneller als dreimal in einer Sekunde aufblitzen. Darunter fallen etwa wild blinkende Buttons oder hektische GIFs.
Kurzbeschreibung:
Wenn Nutzende persönliche Daten, wie Name, Adresse oder Passwort, eingeben sollen, müssen die »autocomplete«-Attribute an den Eingabefeldern die richtigen Werte haben.
Unser Plakat der WCAG 2.2. Richtlinien als digitale Version. Die Auflösung ist 360dpi und sollte hoffentlich problemlos zoom-bar sein!Alle Erlöse deiner Bestellung gehen an: Lupus Erythematodes Selbsthilfegemeinschaft e. V.Zur Verkaufsseite des WCAG-Posters
