Gehirngerecht Digital

Archive: WCAG-Kriterien

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

    7. Oktober 2023
    Wenn Nutzende ihre Identität bestätigen müssen, darf dafür kein kognitiver Funktionstest (Passwort merken) nötig sein. Das Einfügen mit Copy &…
  • 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
    Ich sollte Informationen nur einmal eingeben müssen. Die Website sollte die Infos dann beim nächsten Mal von alleine eintragen 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 zum Beispiel Buttons oder Einträge, in einem ausgeklappten Untermenü, müssen eine klickbare Fläche von mindestens 24 × 24 px haben, die sich…
  • 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 deine Seite eine Hilfe anbietet, sollte diese Hilfe einfach zu finden sein. Stelle sicher, dass diese immer an derselben…
  • Eine Sticky-Header überdeckt einen Button.

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

    7. Oktober 2023
    Wenn deine Website Funktionen bietet, die Drag-and-Drop-Gesten voraussetzen, müssen diese eine einfachere Alternative haben, wie das Klicken eines Buttons.
  • Eine Checkbox mit dem Output des Accessibility-Trees daneben. Man sieht Namen, Rolle und Zustand der Checkbox angegeben.

    13. September 2023
    Native HTML-Elemente bringen meist alles mit, um von assistiven Technologien verstanden zu werden. Entwickelst du selbst, musst du dafür sorgen,…
  • Ein Beispiel von einer Statusmeldung, die von einem Screenreader vorgelesen wird.

    13. September 2023
    Wenn du Statusnachrichten oder Benachrichtigungen einblendest, müssen diese auch assistiven Technologien automatisch mitgeteilt werden.
  • 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 Beschriftungen deiner Navigations- oder Interaktionselemente, wie Buttons, Icons, Formularfelder, müssen identisch sein, wenn sie dieselbe Funktion haben.
  • Zwei Pfeile. Einer hat kein Alt-Attribut, im Alt-Attribut des anderen steht: Zurück.

    13. September 2023
    Bedienelemente, die ohne Text auskommen, wie klickbare Icons oder andere klickbare Bilder, brauchen eine Textalternative, damit sie von Screenreader ausgelesen…