Label (HTML5)

Für die Beschriftung von Formularelementen wird in der Regel das label-Element verwendet. Um eine Beschriftung explizit einem bestimmten Formularelement zuzuordnen, wird sie über das for-Attribut ihres label-Elements dem entsprechenden Formularelement zugewiesen. Der Wert des for-Attributs muss hierbei mit dem Wert des id-Attributs für das betreffende Formularelement übereinstimmen.

Quelle: BITV-Test, Prüfschritt 9.1.3.1h - Beschriftung von Formularelementen programmatisch ermittelbar

Anwendungsgebiete

Elemente, für die das label-Element verwendet werden kann:

• input type="text"
• input type="checkbox"
• input type="radio"
• input type="file"
• input type="password"
• textarea
• select

Beispiel für die korrekte Verwendung

• Textfeld:
  <label for="vorname">Vorname:</label>
<input type="text" name="firstname" id="vorname" />

• Check-Box:
  <input type="checkbox" id="html" name="computerskills" checked>

  <label for="html">HTML</label>

ARIA

Das label-Element kann nicht verwendet werden für:

• Schaltflächen, die Daten senden (input type=“submit“) oder zurücksetzen (input type=“reset“),
• Schaltflächen, die aus einem Icon oder Bild bestehen (input type=“image“) sowie <button>- und
• Skriptschaltflächen (button-Elemente, input type=“button“)

In solchen Situationen kann sich ARIA als nützlich erweisen. Folgende ARIA-Auszeichnungen können für Beschriftungszwecke verwendet werden:

• aria-label
• aria-labelledby

aria-labelledby wird dann verwendet, wenn das Element, auf das es sich bezieht, eine sichtbare Bezeichnung hat. Im Gegensatz dazu wird aria-label verwendet, wenn keine sichtbare Bezeichnung vorhanden ist.
Optional kann aria-describedby den Zweck eines Feldes beschreiben. Das Attribut aria-describedby ähnelt dem aria-labelledby. Der Unterschied liegt darin, dass die Beschriftung (aria-labelledby) kurz und präzise sein soll, während eine Beschreibung (aria-describedby) ausführlichere Informationen liefert.

Beispiele für die korrekte Verwendung

• Werden Schaltflächen ausschließlich mit Grafik und ohne zusätzliche sichtbare Beschriftung verwendet, so wird an dem Element der Schaltfläche das Attribut "aria-label" angebracht.

  <button aria-label="Hinzufügen" onclick="myDialog.open()">

  <i class="iconfont-ui-add">

  </button>

• Beschriftung eines Textfeldes durch einen nebenstehenden Button:

  <input name="suche" type="text" aria-labelledby="suchebutton"><input name="suchebutton" id="suchebutton" type="submit" value="Suche">

• Beschreibung einer Kalenderanwendung durch aria-describedby:

  <div role="application" aria-labelledby="calendar" aria-describedby="info">

  <h1 id="calendar">Kalender</h1>

  <p id="info">

  Dieser Kalender zeigt die Abwesenheiten der Teammitglieder

  </p>

  ...

  </div>

Stand: 11.01.2024