Gehirngerecht Digital

Archive: WCAG-Kriterien

  • Ein Formular zudem ein Fehler durch Text angezegit wird.

    13. September 2023
    Wenn Fehler auf der Website auftreten, sollten sie leicht erkennbar sein und nicht nur durch Farben hervorgehoben werden. Zusätzlich brauchst…
  • Zwei Formularfelder. Das erste hat keine Beschriftungen, das zweite schon.

    13. September 2023
    Formularfelder sollten sichtbare Beschriftungen haben, am besten über das <label>-Tag. Die Beschriftung sollte dauerhaft sichtbar sein. Deshalb empfehlen wir, Placeholder-Texte…
  • 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
    Die Texte einer Fehlermeldung sollten möglichst konkret sein, damit man auch weiß, wie der Fehler behoben werden 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
    Bei einer Transaktion oder Interaktion, die negative Folgen haben kann, sollte es möglich sein, die Aktion entweder vor dem Absenden…
  • Zwei Texte. Einer ist sehr hell und hat nicht genug Kontrast, der andere ist schwarz und der Kontrast ist ausreichend.

    13. September 2023
    Alle Texte (Fließtext, Labels, Placeholder usw.) brauchen das richtige Kontrastverhältnis zum Hintergrund. Der Mindestkontrast liegt bei 4,5:1 für Texte unter…
  • Illustration einer Webseite. Einmal mit normaler Textgröße und einmal mit 200 % Textgröße.

    13. September 2023
    Eine Webseite muss auf 200 % vergrößert werden können, ohne dass dabei Texte oder andere Inhalte verdeckt werden oder ganz verschwinden.…
  • 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 wichtige Infos nicht (nur) als Text in Pixelgrafiken. User können diese Texte nicht nach ihren Bedürfnissen anpassen, und auch…
  • Ein Text, der sich richtig anpasst, wenn man zoomt.

    13. September 2023
    Deine Website muss auch bei 320 px Breite (oder 400 % Zoom bei 1280 px) so funktionieren, dass alle Inhalte und Funktionalitäten erhalten…
  • Ein Vergleich von zwei Icons. Das Erste ist gelb und erfüllt nicht die Kontrast-Anforderungen von 3 zu 1 zum Hintergrund. Das zweite schwarze Icon erfüllt sie.

    13. September 2023
    Alle grafischen Elemente, mit denen man interagieren kann (zum Beispiel Icon-Buttons) oder die fürs Verständnis wichtig sind, brauchen einen Mindestkontrast…
  • 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 User den Zeilen- oder Buchstabenabstand von Texten vergrößern, dürfen die Texte nicht abgeschnitten oder verdeckt werden.