WCAG-A/AA-Anforderung Priorität: Kritisch
Formularfelder haben keine Beschriftung
Einige Formularfelder haben keine Beschriftung, die assistive Technologien vorlesen können. Es ist daher unklar, was eingegeben werden soll.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Screenreader-Nutzer hören nur „Eingabefeld“ und wissen nicht, ob Name, Telefonnummer oder Postleitzahl gefragt ist. Im Checkout führt das direkt zu abgebrochenen Bestellungen. Felder, die nur einen Platzhalter haben, verwirren außerdem ältere Kunden, sobald sie zu tippen beginnen.
Wen es betrifft
- blinde Kundinnen und Kunden
- Screenreader-Nutzer
- ältere Kundinnen und Kunden
- Menschen mit kognitiven Einschränkungen
- Nutzer von Sprachsteuerung
So beheben Sie es
Verknüpfen Sie jedes Eingabefeld mit einem sichtbaren <label for> oder umschließen Sie das Feld mit dem Label. Verwenden Sie aria-label nur, wenn ein sichtbares Label wirklich nicht möglich ist. Ein Platzhalter ist kein Label. Prüfen Sie Such-, Newsletter-, Mengen- und Checkout-Felder.
Bei Shopify
Der Checkout wird von Shopify gesteuert. Probleme liegen daher meist in Such-, Newsletter-, Kontakt- oder Mengenfeldern des Themes oder in Formularen aus Apps. Ergänzen Sie Labels in den Liquid-Templates des Themes oder in den App-Einstellungen.
Bei Shoptet (CZ)
Meist Such-, Newsletter- oder Kontaktfelder im Template. Prüfen Sie zuerst die Template-Einstellungen; tiefere Änderungen am Formular-Markup erfordern meist Shoptet oder eine Partneragentur.
Bei PrestaShop
Prüfen Sie Such-, Newsletter-, Konto- und Checkout-Templates im Theme und in Modulen. Ergänzen Sie <label>-Elemente in den .tpl-Dateien oder in überschriebenen Modul-Templates.
Bei WooCommerce
Prüfen Sie Checkout-, Konto- und Suchformulare im Theme sowie in Formular- oder Checkout-Plugins. Ergänzen Sie Labels in Child-Theme-Templates oder nutzen Sie Plugin-Optionen, die echte <label>-Elemente ausgeben.
Standards
| Standard | Abschnitt |
|---|---|
| WCAG 2.2 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.1 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.0 | 4.1.2 (A) Name, Role, Value |
| EN 301 549 4.1.1 | 9.4.1.2 |
| EN 301 549 3.2.1 | 9.4.1.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.4.1.2 |
Automatische Prüfung: axe-core-Regel label.
dequeuniversity.com, github.com, www.w3.org
Ähnliche Prüfungen
-
Einige Links sagen nicht, wohin sie führen
WCAG 2.4.4 A
-
Buttons und Links sind zu klein zum bequemen Antippen
WCAG 2.5.8 AA
-
Einige Beschriftungen stehen dort, wo Screenreader sie ignorieren
WCAG 4.1.2 A
-
Die Seite gibt zwei verschiedene Sprachen an
WCAG 3.1.1 A