Recommended practice Priority: Moderate
Items in a tree menu have no name
Some items in a tree-style menu, for example an expandable category tree, have no text that assistive technology can read. This is a recommended practice, not a WCAG AA requirement.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
A screen reader user moving through the category tree hears only "tree item" without the category name, so they cannot tell which branch leads to the products they want. Many will stop browsing and leave the shop.
Who is affected
- screen reader users
- blind people
- voice control users
How to fix it
Give every element with role="treeitem" an accessible name: visible text inside it, or aria-label / aria-labelledby when the item shows only an icon. The name should match what sighted users see. If the widget is not really a tree, remove the tree roles and use a plain nested list of links instead.
On Shopify
Tree roles usually come from a mega-menu, filter or category app rather than the theme. Check the app's settings or ask its developer; if the theme's own menu snippet adds role="treeitem", fix it in that Liquid snippet.
On Shoptet (CZ)
Decided by the template or an add-on. Check whether a newer template version fixes the category tree; otherwise ask Shoptet or a partner.
On PrestaShop
Usually comes from a category tree or menu module. Override the module's .tpl template in your theme so every item contains its category name, or ask the module author.
On WooCommerce
Usually comes from a category widget, menu or filter plugin. Update the plugin, check its accessibility options, or override its template in a child theme so each item outputs its text.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule aria-treeitem-name.
dequeuniversity.com, github.com, www.w3.org