Gehirngerecht Digital

WCAG-Kriterien für: Designer

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
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:

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

Kurzbeschreibung:

Deine Buttons sollten mindestens 24 × 24 Pixel groß sein, um sicherzustellen, dass User ohne Schwierigkeiten die gewünschte Aktion auslösen können.

Mehr Informationen:
Erfolgskriterium 2.5.8
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:

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

Kurzbeschreibung:

Damit Nutzende sich zurechtfinden, sollten Hilfsangebote auf deiner Seite einfach zu finden sein. Stelle sicher, dass sie immer an derselben Stelle und gut organisiert ist. Das schließt auch die Kontaktdaten ein.

Mehr Informationen:
Erfolgskriterium 3.2.6
Illustration von einem Menü-Symbol plus einem Lupen-Symbol. Darunter noch mal ein Menü-Symbol plus einem Sitemap-Symbol.

Merksatz:

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

Kurzbeschreibung:

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.

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:

"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 von zwei Buttons. Der Erste hat einen Fokus-Rahmen, der andere nicht. Das Zweite ist ein Fehler.

Merksatz:

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

Kurzbeschreibung:

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.

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

Merksatz:

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

Kurzbeschreibung:

Deine Navigation sollte auf deiner Webseite immer an der gleichen Stelle zu finden sein. Einfach gesagt: einmal oben rechts, immer oben rechts!

Ein Formular zudem ein Fehler durch Text angezegit wird.

Merksatz:

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

Kurzbeschreibung:

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.

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

Merksatz:

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

Kurzbeschreibung:

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

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:

"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 weiß, was ich tun muss, um den Fehler zu beheben.

Illustration von einem Überweisungs-Formular mit IBAN und Betrag. Daneben eine Illustration von einem Modal, das aufkommt, wenn man auf den Button im Formular klickt. Man muss noch mal bestätigen, dass man die Überweisung wirklich machen will.

Merksatz:

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

Kurzbeschreibung:

Wenn ich eine Transaktion oder eine ähnliche Interaktion ausführe, die negative Konsequenten haben kann, muss es eine Möglichkeit geben, den Vorgang zu bestätigen oder ihn rückgängig zu machen.

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

Merksatz:

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

Kurzbeschreibung:

Die Kontraste von Texten zum Hintergrund muss stark genug sein. Der vorgeschriebene Kontrast der WCAG liegt bei mindestens 4,5:1, bei unter 24px und mindestens 3:1 bei Schriftgrößen darüber.

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:

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

Kurzbeschreibung:

Schreibe keine wichtigen Infos als Text in Bilder. Nutzerinnen können die Texte weder anpassen noch können assistive Technologien sie lesen. Ausnahme, wenn Bilder der Dokumentation dienen (wie hier!).

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:

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

Kurzbeschreibung:

Alle Elemente, mit denen ich interagieren kann (Icon-Buttons / Buttons) oder die sonst wie wichtig fürs Verständnis sind, müssen sich vom Kontrast ausreichend vom Hintergrund abheben (min. 3:1).

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

Merksatz:

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

Kurzbeschreibung:

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

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

Merksatz:

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

Kurzbeschreibung:

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.

Drei Zustände eines Buttons, die flackern symbolisieren sollen.

Merksatz:

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

Kurzbeschreibung:

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

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