Gehirngerecht Digital

Archive: WCAG-Kriterien

  • Eine Illustration von einem Kontaktformular. Man sieht das Input-Feld für Vorname. Darüber ist ein Beschriftung des Feldes, die durch das HTML "for"-Element mit dem Input-Feld darunter verknüpft ist.

    13. September 2023
    Die Beschriftung (<label>) für Formularfelder (<input>) benötigt ein »for«-Attribut. So gibst du dem Feld einen zugänglichen Namen, damit Screenreader auch…
  • Illustration einer Webseite, in der die Elemente mit Zahlen benannt sind, um die Reihenfolge anzuzeigen.

    13. September 2023
    Die visuelle Reihenfolge deiner Elemente sollte sich mit der Reihenfolge decken, wie man sie mit der Tastatur (Tab/Shift-Tab) oder dem…
  • Ein Ok-Zeichen neben dem Text: "Klicke auf den Button "Jetzt bestellen". Ein Fehler Zeichen neben dem Text: Klicke auf den gelben, runden Knopf unten. Beide beschreiben den Button darunter, auf dem "Jetzt bestellen" steht.

    13. September 2023
    Verzichte auf sensorische Hinweise. »Unten Links« kann ein Screenreader nicht finden, aber den Text eines Buttons oder Labels schon. Schreibe…
  • Zwei Illustrationen von einem Handy. Ein mal steht es und ein mal liegt es. Darin ist ein Kontaktformular gezeigt, dass seine Anordnung ändert, wenn das Handy anders gehalten wird.

    13. September 2023
    Nutzende müssen deine Webseite oder App im vertikalen und horizontalen Format anschauen können.
  • Ein Audio-Symbol mit einem Pause-Symbol dazu.

    13. September 2023
    Wenn deine Webseite automatisch Geräusche abspielt, die länger als drei Sekunden dauern, musst du Nutzer*innen ermöglichen, sie abzuschalten.
  • Illustration von zwei Buttons. Auf dem einen steht "Hier klicken" auf dem anderen "Zur Produktübersicht". Der erste ist nicht klar genug und ein Fehler.

    13. September 2023
    Der Text eines Links (und auch der Alternativtext eines verlinkten Bildes) sollte den Zweck des Links verständlich machen. Er sollte…
  • Illustration von einem Menü-Symbol plus einem Lupen-Symbol. Darunter noch mal ein Menü-Symbol plus einem Sitemap-Symbol.

    13. September 2023
    Die Unterseiten deiner Webseite müssen auf mehr als einem Weg erreichbar sein. Zusätzlich zur Navigation musst du eine Suche oder…
  • 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.

    13. September 2023
    Verlasse dich nicht darauf, dass User Farben sehen können. Vermeide es, Dinge nur durch Farben zu zeigen oder zu beschreiben.…
  • Eine Überschrift sagt: jetzt kommen Services. Darunter sieht man eine Aufzählung von 3 Services.

    13. September 2023
    Deine Überschriften müssen klar den Inhalt oder den Zweck des Inhalts beschreiben, der auf sie folgt. Ebenso müssen die Beschriftungen…
  • Illustration von zwei Buttons. Der Erste hat einen Fokus-Rahmen, der andere nicht. Das Zweite ist ein Fehler.

    13. September 2023
    Interaktive Elemente, wie Links, Buttons oder Formularfelder, müssen klar erkennbar sein und sich vom Normalzustand unterscheiden, wenn sie mit der…