Ratgeber Formularfeldern fehlen Labels

Der Fehler weist darauf hin, dass einige deiner Formularfelder keine zugeordneten Labels haben. Labels sind notwendig, um Nutzern den Zweck eines Formularfeldes klar zu machen. Sie sind insbesondere für Menschen mit Sehbeeinträchtigungen oder Nutzer von Screenreadern essenziell, da sie eine klare Zuordnung zwischen Eingabefeld und Beschreibung herstellen.

• Barrierefreiheit: Nutzer von Screenreadern können ohne Labels die Bedeutung eines Feldes nicht erfassen.
• Schlechte Benutzererfahrung: Nutzer könnten unsicher sein, welche Informationen sie in ein Feld eingeben sollen.
• Rechtliche Anforderungen: Viele Barrierefreiheitsstandards, wie die WCAG, verlangen die Nutzung von Labels.
• Fehlende Validität: Fehlende Labels können die Validierung von Formularen erschweren oder ungenaue Eingaben verursachen.

1. Identifiziere Felder ohne Labels:
   • Überprüfe den HTML-Code deiner Website und suche nach Eingabefeldern (<input>, <textarea>, <select>), die kein zugeordnetes <label>-Tag besitzen.
   • Beispiel für ein fehlerhaftes Feld:

     <input type="text" id="name">

2. Füge Labels hinzu:
   • Verwende das <label>-Tag und verbinde es mit dem Eingabefeld über das for-Attribut. Das for-Attribut muss den gleichen Wert wie die id des Eingabefeldes haben.
   • Beispiel:

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

3. Nutze Platzhalter (Placeholder) nur ergänzend:
   • Placeholder-Text allein ist nicht ausreichend, da er bei der Eingabe verschwindet und von Screenreadern oft nicht vorgelesen wird.
4. Prüfe interaktive Elemente:
   • Vergewissere dich, dass auch alle Checkboxen, Radiobuttons und Dropdown-Menüs ein Label besitzen. Beispiel:

     <label for="option1">Option 1</label>  
     <input type="checkbox" id="option1">

5. Teste die Barrierefreiheit:
   • Verwende Tools wie Axe oder Lighthouse, um sicherzustellen, dass alle Formularfelder korrekt beschriftet sind.
   • Teste die Formulare mit einem Screenreader, um die Nutzererfahrung zu prüfen.
6. Verwende visuell versteckte Labels bei Bedarf:
   • Falls Labels aus Designgründen nicht sichtbar sein sollen, nutze CSS, um sie nur visuell auszublenden, aber für Screenreader verfügbar zu lassen:

     .sr-only {   
         position: absolute;   
         width: 1px;   
         height: 1px;   
         margin: -1px;   
         padding: 0;   
         overflow: hidden;   
         clip: rect(0, 0, 0, 0);   
         border: 0;   
     }

     <label for="email" class="sr-only">E-Mail-Adresse</label>   
     <input type="email" id="email">

Beispiele & Best Practices

• Nur Placeholder-Text verwenden: Placeholder ist kein Ersatz für Labels.
• Fehlendes for-Attribut: Stelle sicher, dass das for-Attribut immer mit der id des Feldes übereinstimmt.
• Design-Labels ignorieren: Auch wenn Labels nicht sichtbar sind, sollten sie im Code vorhanden sein.

• Das for-Attribut eines Labels muss mit der id des zugehörigen Eingabefeldes übereinstimmen.
• Nutze semantisches HTML, um eine klare und barrierefreie Struktur zu gewährleisten.
• Vermeide es, Labels nur mit CSS-Positionierungen von Eingabefeldern zu trennen.

• WCAG Richtlinien für Labels
• MDN Web Docs: HTML Label
• Google Lighthouse für Barrierefreiheit