Gehirngerecht Digital

Archiv: WCAG-Kriterien

  • Illustration von einem Handy. Darin ist eine Illustration von einem Dreieck, dass sexy sein soll. Darüber steht: swipe nach links oder rechts. Darunter ist zwei Buttons, die Ja und Nein symbolisieren. Daneben steht, dass eine Wischen-Aktion nur barrierefrei ist, wenn es Knöpfe zum Klicken als Alternative gibt.

    13. September 2023
    Jede Funktion einer Website muss per einfacher Eingabe zu bedienen sein. Komplexere Gesten wie Swipen oder Aktionen mit mehreren Fingern…
  • Illustration von einem Handy, welches geschüttelt wird. Daneben ein Plus und ein Button, der da sein muss, um die gleiche Aktion auszuführen, die mit dem Schütteln ausgeführt wird.

    13. September 2023
    Funktionen, die durch die Bewegung eines Geräts ausgelöst werden, müssen auch über eine einfache Eingabe (Maus, Touch, Enter) auslösbar sein.…
  • Ein Link, der "Mehr erfahren" sagt. Darunter zwei Illustrationen von einem Roboter-Kopf, der einen Screenreader darstellt. Ein mal sagt der Screenreader:"Lerne mehr, zum Thema Barrierefreiheit". Und das zweite Mal sagt er: "Mehr erfahren zum Thema Barrierefreiheit." Das Zweite stimmt, weil die Worte am Anfang sich mit dem Wortlaut des Links decken.

    13. September 2023
    Wenn du versteckte Texte nutzt, um Links, Buttons oder Formularfelder für Screenreader genauer zu beschreiben, muss der sichtbare Text zumindest…
  • Illustration des HTML-Tags mit dem HTML-Sprachen-Attribut für Deutschland.

    13. September 2023
    Der <html>-Tag muss ein »lang«-Attribut mit der Sprache der Seite haben. So können assistive Technologien die Seite in der richtigen…
  • Ein Beispiel von einem Paragrafen, in dem eine englischsprachige Phrase verwendet wird.

    13. September 2023
    Wenn auf einer Website Sätze, Phrasen, Zitate oder Ähnliches in einer anderen Sprache verwendet werden, muss der anderssprachige Text mit…
  • Der Absende-Button eines Kontakt-Formulars hat den Fokus. Dadurch darf das Formular noch nicht abgesendet werden.

    13. September 2023
    Den Tastatur-Fokus auf ein Element zu setzen, darf keine unerwartete Funktion auslösen. Funktionen müssen zum Beispiel erst bei Bestätigung per…
  • Eine Illustration einer Checkbox. Diese löst unerwartet Kontextänderungen aus, wenn man sie anklickt. Sie bewegt den Fokus weg oder öffnet einen neuen Tab.

    13. September 2023
    Das Interagieren mit einem Formularelement (z. B. Checkbox) darf keine unerwartete Kontext-Änderung, wie eine Verschiebung des Tastaturfokus, auslösen. Eine Kontext-Änderung ist…
  • Auf dem Bild steht: Navigation nicht an gleicher Stelle! Darunter sind zwei Webseiten. Auf einer Seite ist die Navigation oben und auf der zweiten Seite unten.

    13. September 2023
    Die Navigations-Mechanismen (Menü, Breadcrumbs, Suche und Ähnliches) auf deiner Website müssen immer an der gleichen Stelle zu finden sein, damit…
  • Beispiel einer ungeordneten Liste und den richtigen HTML-Elementen dafür.

    13. September 2023
    Inhalte, die optisch wie Listen aussehen, müssen im HTML auch als Listen ausgezeichnet sein. Dafür kannst du entweder <ul>, <ol>…
  • Beispiel von zwei Paragrafen, die jeweils einen eigenen p-Tag haben.

    13. September 2023
    Für Absätze und formatierte Texte (fett oder kursiv) müssen die richtigen HTML-Tags verwendet werden. Im Fließtext dürfen keine Abstände mit…