WCAG-A/AA-Anforderung Priorität: Mittel
Einige Beschriftungen stehen dort, wo Screenreader sie ignorieren
Einige Elemente verwenden Barrierefreiheits-Attribute, die für ihren Typ nicht erlaubt sind, meist aria-label auf einem einfachen <div> oder <span> ohne Rolle.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Screenreader überspringen solche Beschriftungen oft. Eine Sternebewertung als aria-label="4,5 von 5", ein „Sale“-Symbol oder ein Verfügbarkeits-Hinweis sagt dann nichts oder etwas anderes, als sehende Kundinnen und Kunden sehen.
Wen es betrifft
- Screenreader-Nutzer
- blinde Kundinnen und Kunden
So beheben Sie es
Setzen Sie aria-label oder aria-labelledby nicht auf Elemente ohne passende Rolle (einfache div, span, p oder Elemente mit role="presentation"). Geben Sie die Information stattdessen als Text aus, etwa in einem visuell versteckten <span>, oder geben Sie dem Element eine passende Rolle, zum Beispiel role="img" für eine Sternebewertung aus Icons.
Bei Shopify
Meist Bewertungs-, Badge- oder Icon-Code im Theme oder in Apps. Ändern Sie das Liquid-Snippet auf visuell versteckten Text oder role="img"; App-Widgets melden Sie dem Entwickler.
Bei Shoptet (CZ)
Meist Bewertungen, Badges oder Icons im Template oder in Add-ons. Melden Sie es Shoptet oder einer Partneragentur.
Bei PrestaShop
Meist Bewertungen, Labels oder Icons im Theme oder in Modulen. Korrigieren Sie es in den .tpl-Templates oder in überschriebenen Modul-Templates.
Bei WooCommerce
Meist Sternebewertungen, Badges oder Icons im Theme, Page-Builder oder in Bewertungs-Plugins. Korrigieren Sie es im Child-Theme oder melden Sie 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-prohibited-attr.
dequeuniversity.com, github.com, www.w3.org
Ähnliche Prüfungen
-
Einige Beschriftungen stehen dort, wo Screenreader sie ignorieren
WCAG 4.1.2 A
-
Klickbare Elemente sind ineinander verschachtelt
WCAG 4.1.2 A
-
Der Titel einer Tabelle steht in einer Tabellenzelle
WCAG 1.3.1 A
-
Klickbare Bildbereiche haben keine Beschreibung
WCAG 2.4.4 A