Jede Eingabe braucht ein echtes label
Verknüpfen Sie Labels und Felder, damit Tippen und Vorlesen funktionieren.
Jede Eingabe braucht ein echtes label ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Why Labels Matter
A form field with no name is a mystery box. A real label tells every user, sighted or not, exactly what to type. 🏷️
The label Element
The label element is HTML's built-in way to name a field. The browser, screen readers, and tap targets all understand it for free.
Connect With for and id
The cleanest link is for on the label matching the input's id. Now they are officially paired.
<label for="email">Email</label>
<input id="email" type="email">IDs Must Be Unique
The id you point to has to be unique on the page. Two inputs sharing one id quietly breaks the pairing.
Wrapping Also Works
You can also wrap the input inside the label. No id needed, since nesting makes the connection clear.
<label>Email
<input type="email">
</label>Bigger Click Target
A connected label gives users a larger click area. Tapping the text focuses or checks the field, which helps shaky hands and small screens.
Screen Readers Read It
When focus lands on a paired input, a screen reader speaks the label first. Without it, users hear only the field type.
title Is Not Enough
A title attribute may show on hover, but it is unreliable on touch and keyboard. It is no substitute for a real label.
Checkboxes Need Labels Too
Checkboxes and radios feel obvious visually, but a label is what makes them tappable and announced. Never leave them bare.
<input id="terms" type="checkbox">
<label for="terms">I agree</label>Visible Beats Hidden
Keep labels visible when you can. Sighted users with cognitive load benefit just as much as screen reader users do.
When You Must Hide It
If a search box has no room for text, hide the label with a visually-hidden class, never display none, so it still reaches assistive tech.
Quick Check
How does a label know which input it names?
Recap
Every input needs a real label, linked by for and id or by wrapping. That one habit makes forms tappable, readable, and clear. ✅
Häufig gestellte Fragen
Ist die Lektion „Jede Eingabe braucht ein echtes label“ kostenlos?
Ja — der vollständige Text von „Jede Eingabe braucht ein echtes label“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Jede Eingabe braucht ein echtes label“?
Verknüpfen Sie Labels und Felder, damit Tippen und Vorlesen funktionieren. Du übst Web Accessibility 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 Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility 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 1 von 4.
Wie lange dauert die Lektion „Jede Eingabe braucht ein echtes label“?
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 Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility 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
- Jede Eingabe braucht ein echtes label
- Placeholder ist kein Label
- Felder mit fieldset und legend gruppieren
- Hilfetexte und Pflichtfelder ansagen lassen