WCAG-A/AA-Anforderung Priorität: Schwerwiegend
Selbst gebaute Menüs oder Listen sind fehlerhaft aufgebaut
Einige selbst gebaute Komponenten wie Menüs, Tab-Leisten oder Auswahllisten enthalten nicht die Einträge, die sie benötigen.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Screenreader-Nutzer hören womöglich ein leeres Menü oder eine leere Liste oder können nicht zwischen Tabs und Optionen wechseln. Navigation und Filter werden dadurch schwer bedienbar.
Wen es betrifft
- Screenreader-Nutzer
- blinde Kundinnen und Kunden
So beheben Sie es
Geben Sie jedem ARIA-Container die erforderlichen untergeordneten Rollen, zum Beispiel role="menuitem" in role="menu", role="tab" in role="tablist", role="option" in role="listbox". Ist die Komponente kein echtes Menü, entfernen Sie stattdessen die Rolle.
Bei Shopify
Meist Theme-Menüs, Tabs oder App-Widgets mit ARIA-Rollen. Korrigieren Sie die Rollen in den Liquid-Sections und im JavaScript des Themes; App-Widgets melden Sie dem App-Entwickler.
Bei Shoptet (CZ)
Meist Menüs oder Tabs des Templates. Melden Sie es Shoptet oder einer Partneragentur.
Bei PrestaShop
Meist Menüs, Tabs oder Module der Facettensuche. Korrigieren Sie es in den Templates und im JavaScript des Themes oder Moduls.
Bei WooCommerce
Meist Menüs, Tabs oder Slider aus dem Theme, aus Page-Buildern oder Plugins. Korrigieren Sie es im Child-Theme-Code oder melden Sie es dem Plugin-Entwickler.
Standards
| Standard | Abschnitt |
|---|---|
| WCAG 2.2 | 1.3.1 (A) Info and Relationships |
| WCAG 2.1 | 1.3.1 (A) Info and Relationships |
| WCAG 2.0 | 1.3.1 (A) Info and Relationships |
| EN 301 549 4.1.1 | 9.1.3.1 |
| EN 301 549 3.2.1 | 9.1.3.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.3.1 |
Automatische Prüfung: axe-core-Regel aria-required-children.
dequeuniversity.com, github.com, www.w3.org
Ähnliche Prüfungen
-
Der verborgene Name von Schaltflächen weicht vom sichtbaren Text ab
WCAG 2.5.3 A
-
Textabstände lassen sich nicht anpassen
WCAG 1.4.12 AA
-
Links im Fließtext sehen aus wie normaler Text
WCAG 1.4.1 A
-
Die Website funktioniert nur in einer Bildschirmausrichtung
WCAG 1.3.4 AA