WCAG-A/AA-Anforderung Priorität: Schwerwiegend
Einige Schalter und Kontrollkästchen haben keinen Namen
Einige selbst gebaute Umschalter (Kontrollkästchen, Schalter, Optionsfelder oder Menüoptionen mit ARIA-Rollen) haben keine lesbare Beschriftung.
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 „Kontrollkästchen“ oder „Schalter“, ohne zu erfahren, wofür: AGB akzeptieren, Newsletter abonnieren, einen Filter oder Geschenkverpackung. Sie übersehen womöglich ein Pflichtfeld im Checkout oder wählen die falsche Option.
Wen es betrifft
- blinde Kundinnen und Kunden
- Screenreader-Nutzer
- Nutzer von Sprachsteuerung
So beheben Sie es
Geben Sie jedem Element mit role="checkbox", "switch", "radio", "menuitemcheckbox" oder "menuitemradio" einen Namen: sichtbaren Text im Element, aria-labelledby mit Verweis auf die sichtbare Beschriftung oder aria-label. Wo möglich, verwenden Sie native <input type="checkbox"> oder <input type="radio"> mit <label>.
Bei Shopify
Meist selbst gebaute Filterschalter, Cookie-Banner oder App-Widgets (Abos, Geschenkoptionen). Ergänzen Sie Beschriftungen in den Liquid-Snippets des Themes; bitten Sie App-Entwickler, Schalter aus ihren Apps zu beschriften.
Bei Shoptet (CZ)
Meist in Add-ons oder eigenem Code (Cookie-Banner, Filter). Bitten Sie den Add-on-Anbieter, Shoptet oder eine Partneragentur, Beschriftungen zu ergänzen.
Bei PrestaShop
Meist in Modulen für Cookie-Einwilligung, Facettensuche oder Produktoptionen. Ergänzen Sie Beschriftungen in überschriebenen .tpl-Templates der Module oder wenden Sie sich an den Modulentwickler.
Bei WooCommerce
Häufig in Cookie-, Filter- und Produktoptions-Plugins sowie in Toggles von Page Buildern. Prüfen Sie die Plugin-Einstellungen auf Beschriftungen; sonst korrigieren Sie es im Child-Theme oder melden es dem Plugin-Entwickler.
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 aria-toggle-field-name.
dequeuniversity.com, github.com, www.w3.org