0Pricing
HTML Academy · Lektion

Das label-Element und Barrierefreiheit

Verknüpfen Sie Labels mit Inputs, um Screenreader zu unterstützen.

Das label-Element und Barrierefreiheit ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Labels wichtig sind

Das Element <label> verknüpft eine Textbeschreibung mit einem Formularsteuerelement:

  • Screenreader kündigen das Label an, wenn das Eingabefeld fokussiert wird
  • Durch Klicken auf das Label wird das zugehörige Eingabefeld aktiviert
  • Ohne Label wissen Screenreader-Benutzer nicht, wofür ein Feld vorgesehen ist

Explizites Label mit for

Das Attribut for verknüpft ein Label über die id mit einem Eingabefeld:

<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- for="email" matches id="email" -->
<!-- Clicking "Email address" moves focus to the input -->
<!-- Required for proper accessibility -->

Implizites Label (Umschließen)

Wenn Sie das Eingabefeld in das Label einschließen, entsteht eine implizite Verknüpfung:

<!-- No for/id needed — input is inside label -->
<label>
  Email address
  <input type="email" name="email">
</label>

<!-- Works fine but explicit association is more robust
     (especially when label and input are far apart in the DOM) -->

Label und Eingabefeld getrennt

Wenn Label und Eingabefeld nicht nebeneinander stehen können, verwenden Sie aria-labelledby:

<h2 id="section-title">Billing Details</h2>
<input type="text" name="name" aria-labelledby="section-title">
<!-- The heading serves as the accessible label for the input -->

aria-label als Alternative

Wenn ein sichtbares Label nicht möglich ist, verwenden Sie aria-label:

<!-- Search form with icon button -->
<form>
  <input type="search" name="q" aria-label="Search the site">
  <button type="submit" aria-label="Submit search">
    <svg><!-- magnifier icon --></svg>
  </button>
</form>

Ein Label pro Eingabefeld

Jedes Eingabefeld sollte genau ein Label haben. Mehrere Eingabefelder sollten separate Labels erhalten:

<!-- BAD: one label for multiple inputs -->
<label>First and last name
  <input type="text" name="first">
  <input type="text" name="last">
</label>

<!-- GOOD: separate labels -->
<label for="first">First name</label>
<input type="text" id="first" name="first">

<label for="last">Last name</label>
<input type="text" id="last" name="last">

Kennzeichnung erforderlicher Felder

Kennzeichnen Sie erforderliche Felder barrierefrei:

<!-- Visual + accessible required indicator -->
<label for="email">
  Email address
  <span aria-hidden="true">*</span>         <!-- visual asterisk -->
  <span class="sr-only">(required)</span>    <!-- screen reader text -->
</label>
<input type="email" id="email" name="email" required>

Fieldset und Legend für Gruppen

Gruppieren Sie zusammengehörige Eingabefelder mit <fieldset> und <legend>:

<fieldset>
  <legend>Shipping address</legend>

  <label for="addr-street">Street</label>
  <input type="text" id="addr-street" name="street" autocomplete="address-line1">

  <label for="addr-city">City</label>
  <input type="text" id="addr-city" name="city" autocomplete="address-level2">
</fieldset>

Fieldset für Radiogruppen

Gruppen von Radiobuttons benötigen immer ein Fieldset und eine Legende:

<fieldset>
  <legend>Preferred contact method</legend>

  <label>
    <input type="radio" name="contact" value="email"> Email
  </label>
  <label>
    <input type="radio" name="contact" value="phone"> Phone
  </label>
  <label>
    <input type="radio" name="contact" value="text"> Text message
  </label>
</fieldset>

Ein Platzhalter ist kein Label

Ein Platzhalter verschwindet, sobald der Benutzer etwas eingibt — er kann ein Label nicht ersetzen:

<!-- BAD: placeholder used as a label -->
<input type="email" placeholder="Email address">
<!-- Screen readers may announce the placeholder, but many skip it -->
<!-- User cannot see the field purpose while typing -->

<!-- GOOD: -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">

Visuell ausgeblendete Labels

Wenn das Design kein sichtbares Label vorsieht, blenden Sie es visuell aus, behalten Sie es aber für Screenreader bei:

<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">

/* sr-only utility class: */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

Schnelltest

Wie verknüpfen Sie ein Label über eine explizite Zuordnung mit einem Eingabefeld?

Zusammenfassung: Barrierefreiheit von Labels

Die wichtigsten Punkte zu Labels:

  • Jedes Eingabefeld benötigt immer ein Label
  • <label for="id"> — explizite Zuordnung
  • Eingabefeld in ein Label einschließen = implizite Zuordnung
  • aria-labelledby verweist über die ID auf ein beliebiges Element
  • aria-label für Schaltflächen, die nur ein Symbol und keinen sichtbaren Text enthalten
  • <fieldset> + <legend> für gruppierte Steuerelemente

Häufig gestellte Fragen

Ist die Lektion „Das label-Element und Barrierefreiheit“ kostenlos?

Ja — der vollständige Text von „Das label-Element und Barrierefreiheit“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Das label-Element und Barrierefreiheit“?

Verknüpfen Sie Labels mit Inputs, um Screenreader zu unterstützen. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Das label-Element und Barrierefreiheit“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Das form-Element: action, method und enctype
  2. Input-Typen: text, password, email, number und tel
  3. Das label-Element und Barrierefreiheit
  4. Das button-Element: submit, reset und button
← Zurück zu HTML Academy