Gehirngerecht Digital

WCAG-Kriterien für: Design

Ein rotes Dreieck mit Augen, Mund und einem Hörgerät. Es hat eine Mütze schief auf, mit blauer Farbe darauf und einen Pinsel in der Hand. Es symbolisiert Designer*innen

Filter:

Merksatz:"Soll es gut bedienbar sein, mach die Dinge nicht zu klein!"

Kurzbeschreibung:

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.

Es sind zwei Schaltflächen mit Icons zu sehen. Die Erste ist nur 16 mal 16 Pixel und damit zu klein. Die Zweite ist 24 mal 24 Pixel und damit groß genug.

Merksatz:"Unterstützung und Support gehören immer an denselben Ort."

Kurzbeschreibung:

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.

Es sind ein Screen zu sehen. Unten rechts ist ein Gesicht mit einer Sprechblase, in der steht "Wie kann ich helfen?". Der Screen wird dann genau so noch mal wiederholt, um zu verdeutlichen, dass die Hilfe an der gleichen Stelle bleiben soll.

Merksatz:"Zusätzlich zur Navigation, wird sich eine Suche oder Sitemap lohn."

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.

Illustration von einem Menü-Symbol plus einem Lupen-Symbol. Darunter noch mal ein Menü-Symbol plus einem Sitemap-Symbol.

Merksatz:"Muss ich Informationen verstehen, sollte das nicht nur durch Farbe gehen."

Kurzbeschreibung:

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.

Illustration einer Webseite in Graustufen. Dazu steht: "Dieses Design funktioniert auch in Schwarz-Weiß" Darunter ist eine Illustration einer runden Figur, die Fragend nach oben schaut.

Merksatz:"Zeig mir einen Rahmen an, damit ich den Tastaturfokus erkennen kann."

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.

Illustration von zwei Buttons. Der Erste hat einen Fokus-Rahmen, der andere nicht. Das Zweite ist ein Fehler.

Merksatz:"Halte die Navigation konsistent, damit der User sie wiedererkennt."

Kurzbeschreibung:

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

Auf dem Bild steht: Nicht konsistent! Darunter sind zwei Webseiten. Auf einer Seite ist die Navigation oben und auf der zweiten Seite unten.

Merksatz:"Um Fehler wirklich zu verstehen, sollte ich Texte dazu sehen!"

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.

Ein Formular zudem ein Fehler durch Text angezegit wird.

Merksatz:"Gib Formularfeldern Beschreibungen oder Namen, um sie als User zu erahnen."

Kurzbeschreibung:

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

Zwei Formularfelder. Das erste hat keine Beschriftungen, das zweite schon.

Merksatz:"Zeigst du mir im Formular Fehler an, häng ein Lösungshinweis mit dran."

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.

Illustration von einem Login-Formular. Das Passwort ist falsch eingeben. Darunter ist eine Fehlermeldung, in der steht: Das Passwort ist falsch. Es muss mindestens 12 Zeichen enthalten.

Merksatz:"Bestätigen, rückgängig machen und korrigieren, sollte bei wichtigen Daten funktionieren."

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.

Modal, in dem steht: Du hast gerade erfolgreich 1 Millionen an Gehirngerecht überwiesen. Mit den zwei Optionen: Sie haben es verdient und Rückgängig.

Merksatz:"Kann ich Farben nicht gut erkennen, werde ich mich von deiner Seite trennen."

Kurzbeschreibung:

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.

Zwei Texte. Einer ist sehr hell und hat nicht genug Kontrast, der andere ist schwarz und der Kontrast ist ausreichend.

Merksatz:"Zeigst du wichtigen Text im Bild, dann ist das für mich zu wild!"

Kurzbeschreibung:

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

Im Bild steht: Hier im Bild sollte eigentlich kein Text stehen, sorry! Daneben ist eine grüne Figur, die fragend schaut und dazu sagt sie: Typisch!

Merksatz:"Brauch ich das Element, um den Inhalt zu verstehen, ist es wichtig, es gut zu sehen!"

Kurzbeschreibung:

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.

Drei unterschiedliche Buttons. Der Erste ist dunkelrot und hat ausreichend Kontrast zum Hintergrund. Der Zweite ist hellblau, aber der Kontrast passt, weil er einen schwarzen Rahmen hat. Der letzte ist gelb und hebt sich nicht stark genug vom Hintergrund ab. Das ist ein Fehler.

Merksatz:"Willst du Elemente bewegen? Bei unter 5 Sekunden, hast du meinen Segen. "

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

Eine Illustration von einem Slider auf einer Webseite. Der Slider hat ein Pause-Knopf, um ihn anzuhalten.

Merksatz:"Geh ich mit der Tastatur in deine Webseite rein, sollte die Reihenfolge logisch sein."

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.

Eine Seite mit Zahlen-Markierungen für die Reihenfolge, in der die Elemente angesteuert werden sollen.

Merksatz:"Blitzt ein Element häufiger als dreimal auf, nehme ich das nicht mehr in Kauf!"

Kurzbeschreibung:

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

Unser Maskottchen Tine mit Kringel-Augen und wackelnd. Ihr ist schlecht.

Filter nach Rollen:

Zurück zu allen WCAG-Kriterien

Die WCAG-Kriterien als Poster!

Das WCAG Poster stellt eine Übersicht aller WCAG A und AA Kriterien dar.

WCAG Poster (Digital)

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