Barrierefreiheits-Attribute werden in der falschen Situation verwendet

Einige Elemente verwenden Barrierefreiheits-Attribute, die für ihren Typ nur unter bestimmten Bedingungen erlaubt sind, zum Beispiel aria-checked auf einer echten Checkbox oder Baumtabellen-Attribute auf einer normalen Tabellenzeile.

Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.

Warum das für Ihre Kunden wichtig ist

Ein Screenreader kann einen anderen Zustand ansagen als auf dem Bildschirm zu sehen ist, etwa „nicht aktiviert“ bei einem angehakten Feld „Ich akzeptiere die AGB“ oder einer Filteroption, oder Tabellenzeilen als Ebenen eines Baums vorlesen. Kundinnen und Kunden treffen dann womöglich falsche Auswahlen in Filtern oder im Checkout.

Wen es betrifft

Screenreader-Nutzer
blinde Kundinnen und Kunden

So beheben Sie es

Entfernen Sie aria-checked von nativen Checkboxen; der Zustand des input-Elements genügt. Verwenden Sie Zeilen-Attribute wie aria-level, aria-posinset, aria-setsize und aria-expanded auf Tabellenzeilen nur innerhalb von role="treegrid". Bevorzugen Sie wo möglich native HTML-Elemente statt ARIA.

Bei Shopify

Meist eigener Filter-, Varianten- oder Checkbox-Code im Theme oder in einer App. Suchen Sie das Element in den Liquid- und JavaScript-Dateien des Themes und entfernen Sie das widersprüchliche Attribut; App-Widgets melden Sie dem Entwickler.

Bei Shoptet (CZ)

Meist Filter oder Formulare des Templates oder Add-ons. Melden Sie es Shoptet oder einer Partneragentur.

Bei PrestaShop

Meist Module für Facettensuche, Produktoptionen oder Formulare. Korrigieren Sie es in den .tpl- und JavaScript-Dateien des Themes oder in überschriebenen Modul-Templates.

Bei WooCommerce

Meist Filter-, Produktoptionen- oder Formular-Plugins oder ein Page-Builder. Korrigieren Sie es im Child-Theme oder melden Sie es dem Plugin-Entwickler.

Standards

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-conditional-attr. dequeuniversity.com, github.com, www.w3.org

Einige Links sagen nicht, wohin sie führen
WCAG 2.4.4 A
Eine Bezeichnung oder ein Wert steht außerhalb ihrer Liste
WCAG 1.3.1 A
Versteckte Elemente sind per Tastatur weiterhin erreichbar
WCAG 4.1.2 A
Selbst gebaute Eingabefelder haben keine Beschriftung
WCAG 4.1.2 A

Alle Regeln, die wir prüfen