Kurzbeschreibung:
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.
Kurzbeschreibung:
Ich sollte Informationen nur einmal eingeben müssen. Die Website sollte die Infos dann beim nächsten Mal von alleine 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, aufklappbare Menüs oder Dialoge können zum Beispiel zu Problemen führen.
Kurzbeschreibung:
Wenn deine Website Funktionen bietet, die Drag-and-Drop-Gesten voraussetzen, müssen diese eine einfachere Alternative haben, wie das Klicken eines Buttons.
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:
Bedienelemente, die ohne Text auskommen, wie klickbare Icons oder andere klickbare Bilder, brauchen eine Textalternative, damit sie von Screenreader ausgelesen werden können.
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 <blockquote>, 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 brauchst du außerdem das »scope«-Attribut.
Kurzbeschreibung:
Wenn deine Webseite noch HTML-Tabellen fürs Layout nutzt, solltest du das schnellstens ändern!
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, die man mit der Tastatur (Tab/Shift-Tab) oder dem Screenreader erlebt.
Kurzbeschreibung:
Ich muss die Möglichkeit haben, deine Website im vertikalen und horizontalen Format anzuschauen. Das Wechseln des Formats darf nicht verhindert werden.
Kurzbeschreibung:
Wenn deine Website automatisch Geräusche macht, die länger als drei Sekunden dauern, musst du die Möglichkeit geben, 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:
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.
Kurzbeschreibung:
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.
Kurzbeschreibung:
Funktionen, die durch Bewegung (von Mensch oder Gerät) ausgelöst werden können, brauchen 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:
Mit der Tastatur den Fokus auf ein Element zu setzen, darf keine unerwartete Funktion auslösen. Stelle sicher, dass Funktionen zum Beispiel erst bei Bestätigung per Enter, Space oder Mausklick ausgeführt werden.
Kurzbeschreibung:
Eine Eingabe in einem Textfeld oder das Klicken von zum Beispiel Checkboxen darf keine Kontext-Änderung auslösen, die nicht bekannt gemacht wurde oder erwartbar ist.
Kurzbeschreibung:
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.
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:
Fehler sollten leicht erkennbar sein und nicht nur durch Farben hervorgehoben werden. Du benötigst zusätzlichen Text, um sie zu beschreiben.
Kurzbeschreibung:
Formularfelder (auch Checkboxen) brauchen sinnvolle Beschriftungen (Labels). Diese sollten dauerhaft angezeigt werden. Platzhalter sind darum nicht ausreichend.
Kurzbeschreibung:
Schreibe den Text einer Fehlermeldung möglichst konkret. Gib dazu an, wie ich den Fehler beheben kann.
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 Website müssen nutzbar bleiben.
Kurzbeschreibung:
Deine Webseite muss auch bei 320px Breite so funktionieren, dass alle Inhalte und Funktionalitäten erhalten bleiben, ohne Texte zweidimensional (horizontal und vertikal) scrollen zu müssen.
Kurzbeschreibung:
Wenn ich den Zeilen- oder Buchstabenabstand vergrößere, dürfen die Texte der Website nicht abgeschnitten oder verdeckt werden.
Kurzbeschreibung:
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.
Kurzbeschreibung:
Deine Website muss vollständig mit der Tastatur bedient werden können. Dabei müssen alle Seiten erreichbar bleiben und es darf keine Funktionalität verloren gehen.
Kurzbeschreibung:
Wenn ich etwas mit Tastatur ansteuern kann, muss sichergestellt werden, dass ich: a) nicht steckenbleibe und immer weg-navigieren kann und b) überall wieder hinkomme (z.B. 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 verlängerbar sein.
Kurzbeschreibung:
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.
Kurzbeschreibung:
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.
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 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.
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 Website darf keine Inhalte beinhalten, die schneller als drei Mal in einer Sekunde aufblitzen. Darunter fallen zum Beispiel wild blinkende Buttons oder hektische GIFs.
Kurzbeschreibung:
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.
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
