WCAG-A/AA-Anforderung Priorität: Kritisch
Einige Schaltflächen haben keinen Namen
Einige Schaltflächen haben keine lesbare Beschriftung, zum Beispiel reine Icon-Buttons für „In den Warenkorb“, Suche oder Menü.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Wer einen Screenreader oder Sprachsteuerung nutzt, erkennt nicht, welche Schaltfläche in den Warenkorb legt, das Menü öffnet oder die Suche startet. Das kann einen Kauf ganz verhindern.
Wen es betrifft
- blinde Kundinnen und Kunden
- Screenreader-Nutzer
- Nutzer von Sprachsteuerung
So beheben Sie es
Geben Sie jeder Schaltfläche einen Namen: sichtbaren Text, aria-label oder aria-labelledby mit Verweis auf sichtbaren Text. Reine Icon-Buttons brauchen ein aria-label wie "In den Warenkorb" oder "Schließen". Verlassen Sie sich nicht auf title-Attribute oder reine CSS-Icons.
Bei Shopify
Meist Icon-Buttons im Theme (Menü, Suche, Menge, Schließen) oder von Apps eingefügte Buttons. Ergänzen Sie Beschriftungen in den Liquid-Snippets des Themes; bitten Sie App-Entwickler, die Buttons ihrer Apps zu korrigieren.
Bei Shoptet (CZ)
Meist Icon-Buttons im Template. Prüfen Sie, ob es eine neuere Template-Version mit Beschriftungen gibt; andernfalls bitten Sie Shoptet oder eine Partneragentur, den Template-Code anzupassen.
Bei PrestaShop
Meist Icon-Buttons im Theme oder in Modulen (Warenkorb, Suche, Menü). Ergänzen Sie aria-label in den .tpl-Templates des Themes oder in überschriebenen Modul-Templates.
Bei WooCommerce
Häufig in Themes, Page-Buildern sowie Warenkorb- oder Wunschlisten-Plugins. Ergänzen Sie Beschriftungen in den Child-Theme-Templates oder Plugin-Einstellungen; unbenannte Plugin-Buttons melden Sie 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 button-name.
dequeuniversity.com, github.com, www.w3.org
Ähnliche Prüfungen
-
Versteckte Elemente sind per Tastatur weiterhin erreichbar
WCAG 4.1.2 A
-
Einige Grafiken haben keine Textbeschreibung
WCAG 1.1.1 A
-
Videos oder Töne starten von selbst mit Ton
WCAG 1.4.2 A
-
Ein Listeneintrag steht außerhalb einer Liste
WCAG 1.3.1 A