WCAG-A/AA-Anforderung Priorität: Mittel · experimentelle Prüfung: ggf. manuell nachsehen
Der verborgene Name von Schaltflächen weicht vom sichtbaren Text ab
Einige Schaltflächen oder Links zeigen auf dem Bildschirm einen Text, haben aber einen anderen verborgenen Namen (aria-label), der die sichtbaren Wörter nicht enthält, etwa eine Schaltfläche „Jetzt kaufen“ mit dem Namen „Absenden“.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Wer sein Gerät per Sprache steuert, sagt, was er sieht: „Klicke Jetzt kaufen“. Ist der verborgene Name anders, passiert nichts, und die Person kommt nicht weiter. Auch Screenreader-Nutzer mit Restsehvermögen hören Wörter, die nicht zum Sichtbaren passen, und das verwirrt.
Wen es betrifft
- Nutzer von Sprachsteuerung
- Menschen mit motorischen Einschränkungen, die keine Maus nutzen können
- Screenreader-Nutzer mit Restsehvermögen
- Menschen mit kognitiven Einschränkungen
So beheben Sie es
Der zugängliche Name muss den sichtbaren Text enthalten, am besten am Anfang und in derselben Reihenfolge. Oft ist es am einfachsten, das aria-label zu entfernen, damit der sichtbare Text zum Namen wird. Brauchen Sie zusätzlichen Kontext, setzen Sie ihn hinter die sichtbaren Wörter: Aus dem sichtbaren „In den Warenkorb“ wird aria-label „In den Warenkorb: Blaues T-Shirt“. Prüfen Sie auch übersetzte Seiten: Ein englisch gebliebenes aria-label auf einer deutschen Seite ist ebenfalls ein Fehler.
Bei Shopify
Meist aria-label-Attribute in Theme-Snippets (Produktkarten, Warenkorb-Buttons) oder in Apps. Ändern Sie das Liquid-Snippet so, dass das aria-label den sichtbaren Text enthält, oder entfernen Sie es, und prüfen Sie, ob die Übersetzungen des Themes diese Bezeichnungen abdecken.
Bei Shoptet (CZ)
Meist im Markup des Templates, das sich nur teilweise ändern lässt. Melden Sie das Problem dem Shoptet-Support; entfernen Sie in eigenen HTML-Blöcken das aria-label oder passen Sie es an den sichtbaren Text an.
Bei PrestaShop
Meist in den .tpl-Templates des Themes oder in Modulen. Ändern Sie das aria-label im Template so, dass es den sichtbaren Text enthält, und prüfen Sie seine Übersetzungen in den Übersetzungseinstellungen des Themes.
Bei WooCommerce
Meist Theme-Templates oder Plugins, die „In den Warenkorb“-Buttons und Links ein aria-label geben. Überschreiben Sie das Template in einem Child-Theme oder wenden Sie sich an den Plugin-Entwickler, und prüfen Sie, ob die Übersetzungen die aria-label-Texte abdecken.
Standards
| Standard | Abschnitt |
|---|---|
| WCAG 2.2 | 2.5.3 (A) Label in Name |
| WCAG 2.1 | 2.5.3 (A) Label in Name |
| EN 301 549 4.1.1 | 9.2.5.3 |
| EN 301 549 3.2.1 | 9.2.5.3 |
| ДСТУ EN 301 549 2022 | 9.2.5.3 |
Automatische Prüfung: axe-core-Regel label-content-name-mismatch.
dequeuniversity.com, github.com, www.w3.org
Ähnliche Prüfungen
-
Links im Fließtext sehen aus wie normaler Text
WCAG 1.4.1 A
-
Eine Liste aus Bezeichnungen und Werten ist falsch aufgebaut
WCAG 1.3.1 A
-
Ein Auswahlmenü hat keine Beschriftung
WCAG 4.1.2 A
-
Der verborgene Name von Schaltflächen weicht vom sichtbaren Text ab
WCAG 2.5.3 A