Fehlende Formularbeschriftungen: Warum Platzhaltertext nicht ausreicht

Ein sehender Nutzer, der einen Blick auf ein Anmeldeformular wirft, sieht "E-Mail" direkt über einem Textfeld geschrieben und versteht den Zusammenhang sofort – die visuelle Nähe erledigt die Arbeit. Ein Screenreader sieht keine Nähe. Er benötigt eine tatsächliche, programmatische Verknüpfung zwischen dem Beschriftungstext und dem Eingabefeld, sonst kündigt er das Feld nur als "Bearbeitungstext" ohne jeden Hinweis darauf an, was einzugeben ist.

Dies ist das zweithäufigste zitierte Problem in ADA-Klagen zur Web-Barrierefreiheit – etwa 72 % der Beschwerden verweisen darauf, direkt hinter fehlendem Alternativtext.

Warum Platzhaltertext dies nicht behebt

Platzhaltertext (der ausgegraute Hinweis in einem leeren Eingabefeld) wird oft mit einer Beschriftung verwechselt, scheitert aber aus zwei Gründen: Er verschwindet in dem Moment, in dem der Nutzer zu tippen beginnt, sodass jeder, der unterbrochen wird, den Kontext verliert, und – wichtiger für diesen konkreten Verstoß – manche Kombinationen aus Screenreader und Browser kündigen Platzhaltertext gar nicht zuverlässig als Namen des Feldes an. Ein placeholder-Attribut ist kein Ersatz für ein <label>.

Wie man es behebt

Die robusteste Lösung ist ein explizites <label> mit einem for-Attribut, das der id des Eingabefelds entspricht:

<!-- Vorher: sieht visuell gut aus, wird als "Bearbeitungstext" angekündigt -->
<span>E-Mail-Adresse</span>
<input type="email" name="email">

<!-- Nachher: programmatisch verknüpft -->
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email">

Das Eingabefeld in die Beschriftung einzubetten funktioniert ebenfalls und erfordert keine übereinstimmende id:

<label>
  E-Mail-Adresse
  <input type="email" name="email">
</label>

Wenn eine sichtbare Beschriftung genuin nicht Teil des Designs ist (etwa ein Feld mit nur einem Such-Symbol), verwenden Sie aria-label, um ihm einen barrierefreien Namen zu geben, ohne das visuelle Layout zu ändern:

<input type="search" name="q" aria-label="Website durchsuchen">

<select>-Elemente benötigen genau dieselbe Behandlung – ein Dropdown ohne zugeordnete Beschriftung hat das identische Problem wie ein Texteingabefeld.

Ein verwandter Fehler: die Nur-Titel-Beschriftung

Manche Formulare verwenden allein das title-Attribut (keine sichtbare Beschriftung, kein aria-label), um ein Feld zu benennen. Dies gibt assistiver Technologie technisch etwas, aber WCAG behandelt eine reine Titel-Beschriftung als für sich allein unzureichend – Titeltext wird über Screenreader hinweg inkonsistent angekündigt und verschwindet in dem Moment, in dem kein sichtbarer Bildschirmtext zum Abgleich vorhanden ist, sodass ein sehender Nutzer und ein Screenreader-Nutzer am Ende ein unterschiedliches Verständnis des Formulars haben.

Offizielle Referenzen

• Deque University: label
• Deque University: select-name
• W3C Technique H44
• W3C Technique H65