WCAG A/AA requirement Priority: Serious
Some expandable sections have no name
The clickable header of an expandable section (a <summary> element) has no readable text, for example a product details accordion, a filter group, an FAQ item or a menu opened by an icon.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users hear only that something can be expanded, not what it is. They may not find the mobile menu, the filters, or the shipping and size information.
Who is affected
- blind customers
- screen reader users
- voice control users
How to fix it
Give every <summary> visible text that describes the section, such as "Shipping and returns" or "Menu". If the summary shows only an icon, add an aria-label to it or visually hidden text inside it, and mark the icon itself as decorative with aria-hidden="true".
On Shopify
Common: many current themes use <details> and <summary> for the mobile menu, search, filters and product accordions. Check the header and product section Liquid files for summaries that contain only an icon, and make sure every accordion block has a heading filled in.
On Shoptet (CZ)
Can appear in templates or in custom HTML with expandable sections. Check whether a newer template version fixes it; otherwise ask Shoptet or a partner to add labels.
On PrestaShop
Appears when the theme or modules use <details> for menus, filters or product tabs. Add text or an aria-label to the <summary> in the theme's .tpl templates or overridden module templates.
On WooCommerce
Less common; appears in themes, FAQ or accordion blocks and page builder widgets that use <details>. Fill in the block title or add an aria-label in the child-theme template; report plugin issues to the plugin author.
Standards
| Standard | Clause |
|---|---|
| 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 |
Automated check: axe-core rule summary-name.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
The whole page is hidden from screen readers
WCAG 1.3.1 A
-
Accessibility attributes are used in the wrong situation
WCAG 4.1.2 A
-
Form fields have no label
WCAG 4.1.2 A
-
Some progress bars have no name
WCAG 1.1.1 A