WCAG 2.0, 3.3.2, A

Beschriftungen (Labels) oder Anweisungen

  • WCAG: 2.0
  • Stufe: A
  • Thema: Hilfestellung bei Interaktionen

Beschriftungen und Anweisungen in Formularen müssen aussagekräftig und mit den entsprechenden Eingabefeldern verknüpft sein. Dies ermöglicht assistierenden Technologien (z.B. Screenreadern) die Ausgabe derselben (unabhängig von der visuellen Ebene), so dass auch visuell beeinträchtigte Menschen die Eingabefelder anforderungsgemäss ausfüllen können.

Verstehen

Wenn Anweisungen ein Formular näher beschreiben (etwa Angaben zum Eingabeformat, oder ob ein Feld eine Eingabe erfordert), so müssen diese für alle Nutzenden erfahrbar und das zugehörige Eingabefeld identifizierbar sein. Räumliche Gruppierung reicht für visuell beeinträchtigte Menschen mit Screenreader nicht aus.

Verwenden Sie sinngemäss die in 3.3.1 vorgestellten Techniken rund um <label>-Element und aria-describedby-Attribut. Stellen Sie sicher, dass Labels auch bei Eingabe sichtbar bleiben: ein placeholder-Attribut allein reicht nicht aus, da es bei der Eingabe verschwindet. Spezifische Eingabeformate und Konventionen müssen erklärt werden, etwa wenn für die Bezeichnung von Pflichtfeldern ein Asterisk (*) eingesetzt wird, oder wenn ein Passwort ein bestimmtes Format haben muss. Weitere Attribute wie etwa required oder invalid können ebenfalls eingesetzt werden. Zur Handhabung von Formularen generell siehe auch 1.3.1c.

Verantwortlichkeiten

  • Das Designteam definiert ein gut wahrnehmbares visuelles Design für Beschriftungen und Anweisungen.
  • Das Entwicklungsteam setzt die vom Designteam definierten Vorgaben korrekt um.

WCAG-Text

Wenn der Inhalt eine Eingabe durch den Benutzer verlangt werden Beschriftungen (Labels) oder Anweisungen bereitgestellt.

Code-Beispiel

<style>
/* Schiebt das Element aus dem sichtbaren Bereich des Bildschirms, ohne es tatsächlich zu entfernen */
.visually-hidden {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.required {
  color: red;
}
</style>

<!-- Beschreibung des Pflichtfeld-Asterisk (*) mittels verstecktem Text -->
<form>
  <label for="name">
    Name
    <span class="required">*</span>
    <span class="visually-hidden">(Pflichtfeld)</span>
  </label>
  <input id="name" type="text" />

  <p>
    <span class="required">*</span>
    Pflichtfeld
  </p>
</form>

<!-- Beschreibung des Pflichtfeld-Asterisk (*) mittels aria-describedby -->
<form>
  <label for="name">
    Name
    <span class="required">*</span>
  </label>
  <input aria-describedby="required-description" id="name" type="text" />

  <p id="required-description">
    <span class="required">*</span>
    Pflichtfeld
  </p>
</form>

<!-- Beschreibung eines Eingabeformats mittels aria-describedby -->
<form>
  <label for="password">
    Passwort
  </label>
  <input aria-describedby="password-description" id="name" type="password" />

  <p id="password-description">
    Verwenden Sie mindestens 8 Gross- und Kleinbuchstaben, Zahlen sowie Sonderzeichen.
  </p>
</form>

<!-- Beschreibung des Pflichtfelds mittels required-Attribut -->
<form>
  <label for="name">
    Name
    <span class="required">*</span>
  </label>
  <input required id="name" type="text" />

  <p>
    <span class="required">*</span>
    Pflichtfeld
  </p>
</form>