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 gehts?

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

Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.

  • 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.

    Formularelemente haben eine sichtbare Beschriftung

    Jedes Formularfeld braucht eine sichtbare Beschriftung, am besten durch ein <label>. Das gilt auch für 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 durch Sternchen (*) gekennzeichnet werden, sollte die Bedeutung erklärt sein (am besten am Beginn des Formulars).

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

    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 braucht kein sichtbares Label

          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 zugängliches 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