Gehirngerecht Digital

Die WCAG-Kriterien

WCAG 3.3.2: Label oder Anweisungen

Zurück zu allen WCAG-Kriterien

ÜBERBLICK

Umsetzbarkeit:

  • Komplexität:Einfach
  • Dauer:Schnell

Wichtig für Rolle:

Design, Entwicklung

Worum geht's?

Formulare und Eingabefelder brauchen klar erkennbare, sichtbare Beschriftungen und bei Bedarf zusätzliche erläuternde Hinweise.

Zwei Formularfelder. Das erste hat keine Beschriftungen, das zweite schon.

Umsetzung

Nutze die für deine Situation passende Technik, um das Erfolgskriterium zu erfüllen.

  • Drei Formularfelder. Alle drei haben eine zusätzliche Beschriftung, die auf das erforderliche Format, das eingegeben werden soll, hinweist. Bei dem Obersten steht dieser Hinweis in Klammern hinter dem Label. Bei dem Mittleren steht er als Placeholder-Text im Inputfeld. Und bei dem Dritten steht er als Text direkt unter dem Inputfeld.

    Sichtbare Beschriftungen für Formularelemente

    Jedes Formularfeld braucht ein sichtbares Label. Dazu zählen auch Checkboxen, Radio-Groups oder selbst gebaute Komponenten wie Range-Slider.

    Pflichtfelder müssen klar gekennzeichnet sein, z. B. durch den Zusatz »Pflichtfeld«. Wenn Pflichtfelder nur mit Sternchen (*) gekennzeichnet werden, sollte die Bedeutung erklärt sein (am besten am Anfang des Formulars).

    Zusätzliche Hinweise, etwa zum erforderlichen Eingabeformat, sollten direkt am und über dem Eingabefeld stehen. Wenn sie visuell und im Code unter dem Feld steht, muss sie über aria-describedby mit dem Feld verknüpft sein.

    Ein Text im placeholder-Attribut reicht nicht als sichtbare Beschriftung aus.

    WCAG-Technik(en) in Englisch:

    Anmerkungen

        • Illustration von zwei Suchfeldern. Das Obere hat einen Button mit dem Namen: Suche, das Untere hat einen Button mit einem Lupen-Icon.

          Hinweis: Suche ist eine Ausnahme

          Suchfelder sind eine Ausnahme und brauchen kein sichtbares Label. Weil es so ein bekanntes Muster ist, reicht das Icon für sehende Nutzer aus. Aber es muss weiterhin ein programmatisch ermittelbares Label für Screenreader geben.

          DAs Accessbility-Center

          Teste selbstständig auf digitale Barrierefreiheit! 

          Mit unserem manuellen Test-Tool prüfst du deine Website selbstständig, schnell und effizient auf digitale Barrierefreiheit!

          • Alle Prüfschritte leicht erklärt
          • Teile und exportiere Prüfberichte
          • Teste direkt auf der Live-Webseite!
          Zum Accessibility-Center