Feldbeschriftungen

Silktide prüft, ob jedes Formularfeld und jede Schaltfläche auf Ihren Seiten einen Namen hat, den Software lesen kann. Menschen, die das Formular nicht sehen können, sind auf diese Namen angewiesen, um zu wissen, was in jedem Feld eingegeben werden soll.

Sehende Besuchende erkennen anhand des Textes in der Nähe eines Feldes, was es bedeutet. Diese visuelle Zuordnung hat im Code keine Bedeutung: Der Name muss mit dem Feld selbst verknüpft sein, in den meisten Fällen mit einem <label>-Element in .

<!-- Problem: Der Text sieht wie eine Beschriftung aus, ist aber nicht mit dem Feld verknüpft -->
<p>Vollständiger Name</p>
<input type="text">

Warum das wichtig ist

Ein gibt jedes Feld mit seinem aus, wenn Besuchende ein Formular durchlaufen. Ein unbenanntes Feld wird nur als „Text bearbeiten“ ausgegeben – Besuchende müssen anhand des Kontexts erraten, was sie eingeben sollen. Bei einem längeren Formular wird das schnell unmöglich. Unbeschriftete Felder sind einer der häufigsten Gründe, warum ein Formular ohne Sehkraft nicht ausgefüllt werden kann. Dies bedeutet verlorene Anmeldungen, Bestellungen und Anfragen.

So beheben Sie das Problem

Verknüpfen Sie jedes Feld mit einem <label>, entweder über eine ID oder indem Sie das Feld darin verschachteln:

<!-- Über ID verknüpft -->
<label for="name">Vollständiger Name</label>
<input type="text" id="name">

<!-- Oder um das Feld herum verschachtelt -->
<label>Vollständiger Name <input type="text"></label>

Schaltflächen erhalten ihren Namen über ihren Text oder value – ein Label-Element ist nicht erforderlich:

<button>Nachricht senden</button>
<input type="submit" value="Nachricht senden">

Wenn eine sichtbare Beschriftung unpraktisch ist, verwenden Sie ein -Attribut wie aria-label oder aria-labelledby. Beachten Sie, dass dies nur hilft – sehende Besuchende werden es nicht sehen.

Verlassen Sie sich nicht auf placeholder-Text als Beschriftung: Er verschwindet, sobald Besuchende mit der eingabe beginnen, und wird nicht zuverlässig als Name behandelt.

So prüft Silktide dies

Suchen Sie die Formular-Steuerelemente auf jeder Seite: Eingabefelder, Textbereiche, Dropdown-Menüs und Schaltflächen sowie Elemente, denen mit ARIA eine Formular-Steuerelementrolle zugewiesen wurde (z. B. role="button" oder role="checkbox").
Überspringen Sie Steuerelemente, die keinen Namen benötigen: ausgeblendete Eingabefelder, Felder, die von bekannten Widgets von Drittanbietern eingefügt werden (z. B. -Dienste oder die ausgeblendeten Formulare, die Tracking- und Übersetzungsskripte für ihre eigene Verwendung hinzufügen), sowie Elemente, deren ARIA-Rolle keine Beschriftung erfordert.
Ermitteln Sie den zugänglichen Namen jedes Steuerelements anhand seiner Beschriftung, ARIA-Attribute, Schaltflächentexts oder seines Werts.
Melden Sie jedes Steuerelement, dessen zugänglicher Name leer ist.

Fehlerbehebung

Neben dem Feld steht Text

Text in der Nähe benennt ein Feld nicht, sofern er nicht im Code verknüpft ist – verwenden Sie ein <label> mit einem for-Attribut oder verschachteln Sie das Feld im Label.

Das Feld ist dekorativ oder wird von einem Plugin verwaltet

Felder, die von Widgets eingefügt werden, die Sie nicht kontrollieren, können sich nur schwer direkt beheben lassen. Prüfen Sie, ob das Plugin eine Einstellung für Barrierefreiheit oder ein Update bietet. Wenn das Feld Besuchende wirklich nicht betrifft, können Sie den Fund .