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 User*innen die Identität bestätigen müssen, darf dafür kein kognitiver Funktionstest nötig sein. Dafür darf das Einfügen oder Befüllen durch…
  • Es sind zwei Formulare mit einem Feld zu sehen. Die Eingabe des Namens wiederholt sich bei den Feldern. Das sollte nicht passieren.

    7. Oktober 2023
    Ich sollte Informationen nur einmal eingeben müssen. Die Webseite sollte die Informationen dann beim nächsten Mal von allein 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 Buttons oder Einträge in einem ausgeklappten Untermenü, müssen eine Klickfläche von größer oder gleich 24 × 24 px haben – noch besser…
  • 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 du Hilfsmechanismen, wie Kontaktdaten oder einen Chatbot auf mehreren Seiten anbietest, müssen diese immer an derselben Stelle zu finden…
  • 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, ausklappbare Menüs oder Modale…
  • 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 Webseite Funktionen bietet, die Drag-and-drop-Gesten voraussetzen, müssen diese eine einfachere Alternative, wie das Klicken eines Buttons, haben.
  • 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 die selbe 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…