Gehirngerecht Digital

Archive: WCAG-Kriterien

  • Ein Formular zudem ein Fehler durch Text angezegit wird.

    13. September 2023
    Fehlermeldungen bei Formularen müssen als solche erkennbar sein. Dafür müssen betroffene Felder gekennzeichnet und mit einer aussagekräftigen Beschreibung des Fehlers…
  • Zwei Formularfelder. Das erste hat keine Beschriftungen, das zweite schon.

    13. September 2023
    Formularfelder (auch Checkboxen) benötigen sinnvolle Beschriftungen (Labels). Diese sollten dauerhaft angezeigt werden, weshalb Platzhalter nicht ausreichend sind.
  • 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
    Wenn du mir einen Fehler auf deiner Webseite anzeigst, schreibe den Fehlertext so, dass ich auch weiß, was ich tun…
  • 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.

    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 Kontrast liegt bei mindestens 4,5:1 für Texte unter…
  • 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
    Schreibe keine Infos als Text in Bilder. Nutzende können diese nicht anpassen und assistive Technologien können sie nicht lesen. Ausnahmen…
  • Ein Text, der sich richtig anpasst, wenn man zoomt.

    13. September 2023
    Deine Webseite muss bei 1280 px Breite und 400 % Zoom oder bei 320 px Breite so funktionieren, dass alle Inhalte und…
  • 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.

    13. September 2023
    Alle Elemente, mit denen ich interagieren kann (etwa Buttons), oder die wichtig fürs Verständnis sind, sollten sich über ein Kontrastverhältnis…
  • 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
    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…