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, die man mit der Tastatur (Tab/Shift-Tab) oder dem Screenreader…
  • 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
    Ich muss die Möglichkeit haben, deine Website im vertikalen und horizontalen Format anzuschauen. Das Wechseln des Formats darf nicht verhindert…
  • Ein Audio-Symbol mit einem Pause-Symbol dazu.

    13. September 2023
    Wenn deine Website automatisch Geräusche macht, die länger als drei Sekunden dauern, musst du die Möglichkeit geben, 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 Website 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
    Informationen und interaktive Elemente müssen auch ohne Farbinformationen wahrgenommen und verstanden werden können. Empfehlung: Deine Website sollte auch in Graustufen…
  • 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. Auch die Beschriftungen von…
  • Illustration von zwei Buttons. Der Erste hat einen Fokus-Rahmen, der Zweite nicht. Der Erste ist richtig, der Zweite ist ein Fehler.

    13. September 2023
    Alle interaktiven Elemente, wie Links, Buttons oder Formularfelder, benötigen einen visuellen Zustand, der deutlich macht, dass das Element per Tastatur…