Gehirngerecht Digital

Archive: WCAG-Kriterien

  • Login-Formular, in das man die Daten per Copy-Paste oder per Password-Manager einfügen kann.

    7. Oktober 2023
    Wenn User ihre Identität bestätigen müssen, darf das keinen kognitiven Funktionstest erfordern. Copy-and-paste oder das Ausfüllen über einen Passwort-Manager sollte…
  • Es sind zwei Formulare mit einem Feld zu sehen, Schritt 1 und Schritt 2. Die Eingabe des Namens wiederholt sich bei dem 2. Schritt. Das sollte nicht passieren.

    7. Oktober 2023
    User sollten Daten nur einmal eingeben müssen. Werden die Daten erneut gebraucht? Dann sollte die Website sie automatisch ausfüllen oder…
  • Es sind zwei Schaltflächen mit Icons zu sehen. Die Erste ist nur 16 mal 16 Pixel und damit zu klein. Die Zweite ist 24 mal 24 Pixel und damit groß genug.

    7. Oktober 2023
    Bedienelemente wie Buttons oder Links müssen eine klickbare Fläche von mindestens 24 × 24 px haben, die sich nicht mit der…
  • Es sind ein Screen zu sehen. Unten rechts ist ein Gesicht mit einer Sprechblase, in der steht "Wie kann ich helfen?". Der Screen wird dann genau so noch mal wiederholt, um zu verdeutlichen, dass die Hilfe an der gleichen Stelle bleiben soll.

    7. Oktober 2023
    Wenn eine Website eine Hilfe anbietet, sollte diese leicht und schnell zu finden sein. Achte darauf, dass sie auf allen…
  • Ein Sticky-Header überdeckt einen Button.

    7. Oktober 2023
    Interaktive Elemente dürfen, wenn sie per Tastatur fokussiert sind, nicht vollständig von anderen Inhalten verdeckt werden. Sticky-Header, aufklappbare Menüs oder…
  • Ein Beispiel eines Feldes, in das der Nutzende eine Datei reinziehen kann. Dazu gibt es noch die Alternative Möglichkeit über einen Button eine Datei hochzuladen.

    7. Oktober 2023
    Wenn es Funktionen auf der Website gibt, die nur über Drag-and-drop-Gesten ausgelöst werden, müssen diese eine einfache Eingabe als Alternative…
  • Eine Checkbox mit dem Output des Accessibility-Trees daneben. Man sieht Namen, Rolle und Zustand der Checkbox angegeben.

    13. September 2023
    Alle interaktiven Elemente auf einer Website müssen so programmiert sein, dass Name, Rolle und Wert (oder Zustand) von assistiven Technologien…
  • Ein Beispiel von einer Statusmeldung, die von einem Screenreader vorgelesen wird.

    13. September 2023
    Wenn eine Webseite Statusnachrichten oder Benachrichtigungen einblendet, sollten diese auch von Screenreader-Usern automatisch vorgelesen werden – ohne den Fokus zu…
  • Illustration von zwei Buttons in einer Reihe, die jeweils das gleich sagen, und zwar: "Zu deinem Konto." Darunter wieder zwei Buttons, die aber jetzt jeweils anderer Beschriftung zum gleichen Ziel haben.

    13. September 2023
    Die Benennung von Bedienelementen (wie Links, Buttons, Formularfelder) muss einheitlich sein, wenn sie auf mehreren Unterseiten die gleiche Funktion haben.…
  • Zwei Pfeile. Einer hat kein Alt-Attribut, im Alt-Attribut des anderen steht: Zurück.

    13. September 2023
    Grafische Bedienelemente, wie klickbare Icons oder klickbare Bilder, benötigen einen Namen, damit auch Screenreader-User die Funktion der Grafik verstehen. Das…