WCAG A/AA requirement Priority: Minor
Some elements use outdated accessibility roles
Some elements use roles that the accessibility standard (WAI-ARIA) has deprecated, for example role="directory".
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Browsers and screen readers are dropping support for these roles. The element may then be announced without its intended meaning, for example a list of links is no longer presented as a list.
Who is affected
- screen reader users
How to fix it
Replace the deprecated role with its current equivalent (for example role="list" instead of role="directory") or, better, use the matching native HTML element such as <ul>. If the role adds nothing, remove it.
On Shopify
Uncommon; usually an older theme or app. Search the theme's Liquid and JavaScript files for the role and replace it; check whether a newer theme or app version already fixes it.
On Shoptet (CZ)
Uncommon. If it appears, report it to Shoptet or a Shoptet partner so the template code can be updated.
On PrestaShop
Usually an older theme or module. Replace the role in the .tpl templates or update the module.
On WooCommerce
Usually an older theme, page builder or plugin. Update them first; if the role remains, fix it in a child theme or report it 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 aria-deprecated-role.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
An image button has no text description
WCAG 1.1.1 A
-
Some form fields have more than one label
WCAG 3.3.2 A
-
Some headings are only bold or large text
WCAG 1.3.1 A
-
Some links do not say where they go
WCAG 2.4.4 A