Archive: WCAG-Kriterien

  • Es werden 2 Login-Formulare gezeigt. Ein mal hat man die Möglichkeit durch einen Passwort-Manager oder Copy-Paste die Daten auszufüllen. Beim zweiten Formular gibt man nur seinen Benutzernamen ein und bekommt eine E-Mail mit dem Passwort.

    Barrierefreie Authentifizierung

    7. Oktober 2023
    Wenn Nutzende ihre Identität bestätigen müssen, sollte für keinen Schritt ein kognitiver Funktionstest nötig sein. Das ist nur in Ordnung,…
  • Es sind zwei Formulare mit einem Feld zu sehen. Die Eingabe des Namens wiederholt sich bei den Feldern. Das sollte nicht passieren.

    Doppelte Eingabe

    7. Oktober 2023
    Informationen, die Nutzende schon mal eingegeben haben, sollten sie nicht noch einmal eingeben müssen. Die Webseite sollte diese Informationen allein…
  • 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.

    Zielgröße

    7. Oktober 2023
    Deine Buttons sollten mindestens 24 × 24 Pixel groß sein, um sicherzustellen, dass User ohne Schwierigkeiten die gewünschte Aktion auslösen…
  • 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.

    Konsistente Hilfe

    7. Oktober 2023
    Damit Nutzende sich zurechtfinden, sollten Hilfsangebote auf deiner Seite einfach zu finden sein. Stelle sicher, dass sie immer an derselben…
  • Eine Sticky-Header überdeckt einen Button.

    Fokus nicht verdeckt

    7. Oktober 2023
    Ein Button, ein Formularfeld oder eine andere Komponente darf, wenn sie den Fokus hat, nicht vollständig von anderen Inhalten verdeckt…
  • 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.

    Ziehende Bewegungen

    7. Oktober 2023
    Du solltest dich nicht darauf verlassen, dass User Inhalte ziehen können. Biete zusätzlich zu Drag-and-drop, eine einfache Zeiger-Alternative an.
  • Codebeispiel einer selbstgeschriebenen Checkbox

    Name Rolle Wert

    13. September 2023
    Fast alle nativen HTML-Elemente bringen alles mit, was es braucht, um sie mit assistiven Technologien zu bedienen. Wenn du selbst…
  • Ein Beispiel von einer Statusmeldung, die von einem Screenreader vorgelesen wird.

    Statusmeldungen

    13. September 2023
    Wenn du auf der Seite eine Statusnachricht, etwa eine Notifikation, anzeigst, muss diese assistiven Technologien mitgeteilt werden, ohne dass der…
  • 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.

    Konsistente Bezeichnung

    13. September 2023
    Die Beschriftungen deiner Navigations- beziehungsweise Interaktionselemente (Buttons, Icons, Formularfelder und so weiter) sollten immer gleich sein.
  • Logo auf einer Webseite. Darunter eine Illustratorin von einem Roboter-Gesicht, das einen Screenreader darstellt. Dazu steht das, was der Screenreader vorliest: "Link, Bild. Logo verlinkt zur Startseite."

    Alternativtexte-Bedienelemente

    13. September 2023
    Wenn deine Logos oder deine Bilder klickbar sind und an einen anderen Ort führen oder eine Funktion auslösen, benötigen diese…