Zum Inhalt springen

Formularfeld ohne Beschriftung

KritischWCAG-Kriterium 3.3.2WCAG-Kriterium 4.1.2BFSG-relevant

Was ist das Problem?

Ein Eingabefeld hat keine programmatisch verknüpfte Beschriftung (label). Screenreader-Nutzer wissen nicht, was sie eingeben sollen — bei Adress- oder Zahlungsformularen bricht die Bestellung an dieser Stelle ab. Ein nur sichtbarer Text daneben genügt nicht, wenn die Verknüpfung fehlt.

Warum ist das relevant?

WCAG 2.1 Erfolgskriterien 3.3.2 (Beschriftungen oder Anweisungen, Stufe A) und 4.1.2 (Name, Rolle, Wert, Stufe A) verlangen beschriftete Eingabefelder. Formulare sind der kritischste Pfad im Shop und für die BFSG-Bewertung besonders relevant.

So behebst du es

Verknüpfe jedes Eingabefeld mit einer Beschriftung: <label for="feld-id">Beschriftung</label> plus passender id am Feld. Platzhalter-Text ersetzt kein Label. Wo kein sichtbares Label möglich ist, aria-label verwenden — sichtbare Labels sind aber die bessere Lösung.

Shopware

Standard-Formulare (Registrierung, Kasse) sind beschriftet — betroffen sind meist eigene Formulare (Form Builder Plugins) oder Theme-Anpassungen: dort Label-Feld pflegen bzw. im Twig-Template <label for> ergänzen.

Shopware gezielt prüfen

WooCommerce

Checkout-Felder: Über Filter woocommerce_checkout_fields die Label pflegen statt sie auszublenden. Bei Formular-Plugins (Contact Form 7, WPForms …) die Label-Option aktivieren — „Label verstecken“ vermeiden oder mit korrekt verknüpftem Screenreader-Label nutzen.

WooCommerce gezielt prüfen

Shopify

Theme-Formulare (Newsletter, Suche): im Code-Editor prüfen, ob <label> mit for-Attribut existiert. Viele Themes nutzen visually-hidden-Labels — sicherstellen, dass die Verknüpfung (for/id) stimmt.

Shopify gezielt prüfen

WordPress

Formular-Plugins: Label-Feld ausfüllen und nicht ausblenden. Eigene Formulare im Theme: <label for> ergänzen. Suchformulare: get_search_form() des Themes prüfen.

WordPress gezielt prüfen

TYPO3

Formulare aus dem Form Framework haben Label-Felder in der Formular-Definition — ausfüllen statt leeren. Eigene Fluid-Formulare: <f:form.textfield> immer mit zugehörigem <label for> ausgeben.

TYPO3 gezielt prüfen

Ist deine Website betroffen?

Der kostenlose Schnell-Check prüft bis zu 5 Seiten in wenigen Minuten — ohne Registrierung.

Kostenlosen Schnell-Check starten

Verwandte Regeln

Alle Regeln