Empfohlene Praxis Priorität: Mittel
Einträge in einem Baummenü haben keinen Namen
Einige Einträge in einem baumartigen Menü, etwa einem aufklappbaren Kategoriebaum, haben keinen Text, den assistive Technologien vorlesen können. Das ist eine empfohlene Praxis, keine Anforderung der WCAG-Stufe AA.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Wer mit einem Screenreader durch den Kategoriebaum geht, hört nur „Baumelement“ ohne Kategorienamen und weiß nicht, welcher Zweig zu den gesuchten Produkten führt. Viele brechen die Suche ab und verlassen den Shop.
Wen es betrifft
- Screenreader-Nutzende
- blinde Menschen
- Menschen mit Sprachsteuerung
So beheben Sie es
Geben Sie jedem Element mit role="treeitem" einen zugänglichen Namen: sichtbaren Text im Element oder aria-label / aria-labelledby, wenn der Eintrag nur ein Symbol zeigt. Der Name sollte dem entsprechen, was Sehende sehen. Ist das Widget eigentlich kein Baum, entfernen Sie die Baum-Rollen und verwenden Sie eine einfache verschachtelte Linkliste.
Bei Shopify
Baum-Rollen stammen meist aus einer Mega-Menü-, Filter- oder Kategorie-App, nicht aus dem Theme. Prüfen Sie die Einstellungen der App oder fragen Sie deren Entwickler; setzt das Menü-Snippet des Themes selbst role="treeitem", korrigieren Sie es in diesem Liquid-Snippet.
Bei Shoptet (CZ)
Hängt vom Template oder einem Add-on ab. Prüfen Sie, ob eine neuere Template-Version den Kategoriebaum korrigiert; sonst wenden Sie sich an Shoptet oder einen Partner.
Bei PrestaShop
Kommt meist von einem Kategoriebaum- oder Menümodul. Überschreiben Sie das .tpl-Template des Moduls in Ihrem Theme, damit jeder Eintrag den Kategorienamen enthält, oder fragen Sie den Modulautor.
Bei WooCommerce
Kommt meist von einem Kategorie-Widget, Menü- oder Filter-Plugin. Aktualisieren Sie das Plugin, prüfen Sie seine Barrierefreiheitsoptionen oder überschreiben Sie sein Template in einem Child-Theme, damit jeder Eintrag seinen Text ausgibt.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel aria-treeitem-name.
dequeuniversity.com, github.com, www.w3.org