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
    Formulare müssen so aufgebaut sein, dass ihre Struktur und Zusammenhänge auch im Code richtig hinterlegt sind. Dazu gehört, dass jedes…
  • Illustration einer Webseite, in der die Elemente mit Zahlen benannt sind, um die Reihenfolge anzuzeigen.

    13. September 2023
    Die visuelle Anordnung (z. B. mit CSS-Grids) darf die logische Reihenfolge von Inhalten nicht beeinflussen. Zusammengehörende Elemente, wie eine Überschrift…
  • 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 in deinen Texten. “Unten Links” kann ein Screenreader-User oft nicht finden, aber den Text eines Buttons…
  • 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
    Man muss eine Website sowohl im Hoch- als auch im Querformat anschauen können. Das Wechseln des Formats darf nicht blockiert…
  • Ein Audio-Symbol mit einem Pause-Symbol dazu.

    13. September 2023
    Wenn deine Website automatisch Ton abspielt, der länger als drei Sekunden dauert, musst du eine Möglichkeit bieten, den Ton 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
    Die Texte von Links sollten alleine aussagekräftig sein. Ein Link darf vage sein („Mehr erfahren“), wenn der Kontext das Ziel…
  • 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 Website müssen auf mehr als einem Weg erreichbar sein. Zusätzlich zur Navigation solltest du zum Beispiel eine…
  • 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
    Eine Website muss auch für Menschen mit Farbsehschwäche funktionieren. Wird etwas nur über Farbe vermittelt? (Beispiel: grüner Punkt = aktiv,…
  • Eine Überschrift sagt: jetzt kommen Services. Darunter sieht man eine Aufzählung von 3 Services.

    13. September 2023
    Überschriften müssen den Inhalt oder den Zweck des Inhalts, der auf sie folgt, klar beschreiben. Auch die Beschriftungen von Formularfeldern…
  • 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
    Interaktive Elemente (Buttons, Links usw.) brauchen einen Fokuszustand. Es muss immer sichtbar sein, welches Element auf der Seite den Tastaturfokus…