Gehirngerecht Digital

Archive: WCAG-Kriterien

  • Ein Formular zudem ein Fehler durch Text angezegit wird.

    Fehlererkennung

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

    Formularfelder Namen

    13. September 2023
    Wenn ein User auf deiner Webseite etwas eingeben muss, musst du ihn anleiten, was er eingeben soll. So brauchen zum…
  • 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.

    Hilfe bei Fehlern

    13. September 2023
    Wenn du mir einen Fehler auf deiner Webseite anzeigst, schreibe den Fehlertext so, dass ich weiß, was ich tun muss,…
  • 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.

    Fehlervermeidung

    13. September 2023
    Wenn ich eine Transaktion oder eine ähnliche Interaktion ausführe, die negative Konsequenten haben kann, muss es eine Möglichkeit geben, den…
  • Zwei Texte. Einer ist sehr hell und hat nicht genug Kontrast, der andere ist schwarz und der Kontrast ist ausreichend.

    Kontraste von Texten ausreichend

    13. September 2023
    Die Kontraste von Texten zum Hintergrund muss stark genug sein. Der vorgeschriebene Kontrast der WCAG liegt bei mindestens 4,5:1, bei…
  • Es ist zweimal "Text" zu lesen. Der zweite Text ist größer. Daneben ist ein Pfeil und es steht 200% dran.

    Text auf 200 Prozent

    13. September 2023
    Stelle sicher, dass man Text auf bis zu 200 % vergrößern kann, ohne dass Teile des Textes oder der Webseite…
  • 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!

    Keine Schriftgrafiken

    13. September 2023
    Schreibe keine wichtigen Infos als Text in Bilder. Nutzerinnen können die Texte weder anpassen noch können assistive Technologien sie lesen.…
  • Ein Text, der sich richtig anpasst, wenn man zoomt.

    Inhalte brechen um

    13. September 2023
    Wenn ich deine Webseite auf 400 % vergrößere, muss sie sich so gut anpassen, dass bei Texten beziehungsweise Absätzen kein…
  • 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.

    Kontraste grafische Bedienelemente

    13. September 2023
    Alle Elemente, mit denen ich interagieren kann (Icon-Buttons / Buttons) oder die sonst wie wichtig fürs Verständnis sind, müssen sich…
  • 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.

    Textabstände anpassbar

    13. September 2023
    Wenn ich den Zeilen- oder Buchstabenabstand vergrößere, dürfen dabei die Inhalte deiner Webseite oder App nicht abgeschnitten oder verdeckt werden.