Formularfeld ohne Beschriftung (label)

Die Regel label meldet Textfelder, Checkboxen, Radiobuttons und Textbereiche ohne zugänglichen Namen. Ein Screenreader sagt dann nur „Eingabefeld“ – aber nicht, was hineingehört. Die Lösung ist ein sichtbares <label>, das mit dem Feld verbunden ist: über for und id oder indem das Label das Feld umschließt.

Was die Regel bedeutet

Jedes Formularfeld braucht einen Namen, den assistive Technik vorlesen kann, und der sollte zur sichtbaren Beschriftung passen. Die Regel prüft <input> (außer versteckten Feldern und Buttons, für die es eigene Regeln gibt) und <textarea>. Sie lässt ein Feld bestehen, das seinen Namen auf einem dieser Wege bekommt:

• ein <label>, dessen for zur id des Felds passt, oder ein <label>, das das Feld umschließt,
• aria-label oder aria-labelledby,
• ein title- oder placeholder-Attribut.

Gemeldet wird ein Feld ohne all das – und ein Feld, dessen einziges Label mit display: none versteckt ist, denn damit ist es auch für Screenreader weg.

Beachten Sie, was durchkommt: axe akzeptiert einen Platzhalter als Namen, weil Browser ihn als solchen weitergeben. Eine Beschriftung ist er trotzdem nicht. Er verschwindet beim ersten Tastendruck, ist meist hellgrau, und wer sich schwer etwas merken kann, weiß mitten im Tippen nicht mehr, wofür das Feld war. Ob eine Beschriftung gut genug ist, entscheidet die Regel nicht – deshalb steht im Kasten oben „teilweise“.

Wen es betrifft

Blinde Menschen mit Screenreader hören „Eingabefeld, leer“ und müssen raten. Wer per Sprache steuert, kann nicht „Klick auf E-Mail-Adresse“ sagen, wenn das Feld keinen Namen hat. Menschen mit kognitiven Einschränkungen und alle, die ein langes Formular am Smartphone ausfüllen, brauchen Beschriftungen, die sichtbar bleiben. Fehlende Formularbeschriftungen gehören zu den häufigsten Fehlern im Web: Die WebAIM Million 2026 fand sie auf 51,0 % der eine Million meistbesuchten Startseiten ^[5].

Warum die Prüfung anschlägt

• Text neben dem Feld in einem <span>, <div> oder <p>, der wie eine Beschriftung aussieht, aber nicht mit dem Feld verbunden ist.
• Suchfelder im Header, neben denen nur ein Lupen-Icon steht.
• Ein for, das ins Leere zeigt – die id des Felds wurde geändert oder von einer Komponentenbibliothek erzeugt, das Label nicht angepasst.
• Seitenbaukästen und Formular-Plugins, die den Beschriftungstext als Überschrift über das Feld setzen.
• Labels mit display: none für ein kompaktes Design – damit fallen sie aus dem Barrierefreiheitsbaum.
• Newsletter- und Cookie-Banner-Formulare, die Skripte von Drittanbietern einfügen.

So beheben Sie es

1. Geben Sie jedem Feld eine sichtbare Beschriftung und verbinden Sie beide: for am Label, derselbe Wert als id am Feld.
2. Wo das Design wirklich keinen Platz für sichtbaren Text hat – etwa ein Suchfeld mit eindeutig beschriftetem Button –, verstecken Sie das Label nur optisch per CSS-Klasse, nicht mit display: none.
3. Beheben Sie es in der Formularkomponente oder im Template. Dann ist jedes Formular, das sie nutzt, auf einmal korrigiert.

<!-- Vorher: sieht aus wie eine Beschriftung, ist aber nicht verbunden -->
<span class="form-label">E-Mail-Adresse</span>
<input class="form-input" type="email" name="email">
<div class="form-label">Ihre Nachricht</div>
<textarea class="form-input" name="nachricht" rows="4"></textarea>

<!-- Nachher: jedes Label ist über for und id mit seinem Feld verbunden -->
<label class="form-label" for="kontakt-email">E-Mail-Adresse</label>
<input class="form-input" id="kontakt-email" type="email" name="email">
<label class="form-label" for="kontakt-nachricht">Ihre Nachricht</label>
<textarea class="form-input" id="kontakt-nachricht" name="nachricht" rows="4"></textarea>

Ein Suchfeld, dessen Button schon „Suchen“ sagt, darf sein Label außerhalb des sichtbaren Bereichs haben:

<!-- Das Label ist nur optisch versteckt, nicht für Screenreader -->
<form class="site-search" role="search" action="/suche/">
  <label class="visually-hidden" for="site-search-q">Im Shop suchen</label>
  <input id="site-search-q" type="search" name="q">
  <button type="submit">Suchen</button>
</form>

/* Optisch versteckt, vom Screenreader weiter vorgelesen */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

So prüfen Sie es von Hand

1. Klicken Sie auf jeden Beschriftungstext. Springt der Cursor nicht ins Feld, sind die beiden nicht verbunden.
2. Öffnen Sie in den Entwicklertools Ihres Browsers (Chrome, Edge, Firefox) den Bereich „Barrierefreiheit“ und wählen Sie das Feld: Der „Name“ sollte der sichtbaren Beschriftung entsprechen.
3. Tippen Sie in jedes Feld. Verschwindet der einzige Hinweis, verlässt sich das Feld auf einen Platzhalter – ergänzen Sie eine echte Beschriftung.
4. Gehen Sie mit einem Screenreader (NVDA unter Windows, VoiceOver unter macOS) per Tab durch das Formular: Sagt jedes Feld, was einzugeben ist und ob es Pflicht ist?

Zugehöriges WCAG-Kriterium

Die Regel ist drei Kriterien zugeordnet, und ein Feld ohne Namen berührt meist alle drei: 1.3.1 Info und Beziehungen, weil die sichtbare Verbindung zwischen Text und Feld im Code fehlt; 3.3.2 Beschriftungen oder Anweisungen, weil niemandem gesagt wird, was einzugeben ist; und 4.1.2 Name, Rolle, Wert, weil das Bedienelement keinen Namen hat. Alle drei sind Stufe A. Verwandt: 2.5.3 Beschriftung im Namen – der Name im Code muss die Wörter der sichtbaren Beschriftung enthalten, sonst scheitert die Sprachsteuerung.

So meldet Reviseberg diese Regel

Reviseberg führt label auf jeder gecrawlten Seite bei 1280 px aus. In der Befundliste sehen Sie die Regel mit Schweregrad, WCAG-Kriterien und Stufe, der Zahl der betroffenen Felder und Seiten und den Punkten, die ein Fix zurückbringt. Im Detail stehen der CSS-Selektor, der HTML-Ausschnitt und jede Seite, auf der das Feld vorkommt. Ein Suchfeld im Header erscheint auf jeder Seite – ein Fix im Template behebt alle Vorkommen.

Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert. Ein Ergebnis ohne Befund markiert 1.3.1, 3.3.2 oder 4.1.2 nie als bestanden: Ob die Beschriftungen das Richtige sagen, prüft ein Mensch und hält es als manuelles Ergebnis fest.

Verwandte Regeln

• undefined – dasselbe Problem bei einer <select>-Auswahlliste.
• undefined – eigene Felder mit ARIA-Rollen, die keinen Namen haben.
• undefined – Felder zur Person mit ungültigem autocomplete-Wert.
• undefined – Absende- und Zurücksetzen-Buttons ohne Text.

Alle unbeschrifteten Formularfelder Ihrer Website finden – kostenloser Scan