Gehirngerecht Digital

Archive: WCAG-Kriterien

  • Ein Formular zudem ein Fehler durch Text angezegit wird.

    13. September 2023
    Fehler sollten leicht erkennbar sein und nicht nur durch Farben hervorgehoben werden. Du benötigst zusätzlichen Text, um sie zu beschreiben.
  • Zwei Formularfelder. Das erste hat keine Beschriftungen, das zweite schon.

    13. September 2023
    Formularfelder (auch Checkboxen) brauchen sinnvolle Beschriftungen (Labels). Diese sollten dauerhaft angezeigt werden. Platzhalter sind darum nicht ausreichend.
  • 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.

    13. September 2023
    Schreibe den Text einer Fehlermeldung möglichst konkret. Gib dazu an, wie ich den Fehler beheben kann.
  • Modal, in dem steht: Du hast gerade erfolgreich 1 Millionen an Gehirngerecht überwiesen. Darunter befinden sich zwei Buttons, mit dem linken kann man die Aktion rückgängig machen, mit dem rechten bestätiogt man "Sie haben's verdient!"

    13. September 2023
    Beim Ausführen einer Transaktion oder einer Interaktion, die negative Konsequenzen haben kann, muss es eine Möglichkeit geben, die Aktion vor…
  • Zwei Texte. Einer ist sehr hell und hat nicht genug Kontrast, der andere ist schwarz und der Kontrast ist ausreichend.

    13. September 2023
    Das Kontrastverhältnis von Text zu Hintergrund muss hoch genug sein. Der vorgeschriebene Mindestkontrast liegt bei 4,5:1 für Texte unter 24…
  • Illustration einer Webseite. Einmal mit normaler Textgröße und einmal mit 200 % Textgröße.

    13. September 2023
    Stelle sicher, dass auf 200 % vergrößert werden kann. Dabei dürfen Texte oder andere Inhalte nicht verdeckt werden oder sogar…
  • 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!

    13. September 2023
    Zeige keine Informationen als Text in Bild. Nutzende können diese nicht anpassen und assistive Technologien können sie nicht lesen.
  • Ein Text, der sich richtig anpasst, wenn man zoomt.

    13. September 2023
    Deine Webseite muss auch bei 320px Breite so funktionieren, dass alle Inhalte und Funktionalitäten erhalten bleiben, ohne Texte zweidimensional (horizontal…
  • Ein Vergleich von zwei Icons. Das Erste ist gelb und erfüllt nicht die Kontrast-Anforderungen von 3 zu 1 zum Hintergrund. Das zweite Icon schon.

    13. September 2023
    Alle grafischen Elemente, mit denen man interagieren kann (zum Beispiel Icon-Buttons), oder die wichtig fürs Verständnis der Seite sind, sollten…
  • Dreimal der gleiche Text. Ein mal mit 150 % Zeilenabstand. Ein mal mit größerem Zeilenabstand und noch mal mit größerem Zeilenabstand. Der letzte Text wird unten abgeschnitten. Das ist ein Fehler und soll zeigen, dass das nicht passieren darf.

    13. September 2023
    Wenn ich den Zeilen- oder Buchstabenabstand vergrößere, dürfen die Texte der Website nicht abgeschnitten oder verdeckt werden.