Recommended practice Priority: Moderate
A text block hides the links or buttons inside it
An element marked with role="text" contains a link, button or other element that can receive focus. role="text" is a non-standard role that tells some screen readers to read everything inside as plain text. 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
In screen readers that support role="text", notably VoiceOver on iPhone and Mac, the link or button inside may be read as plain text. The shopper does not know it can be activated, or cannot reach it at all. If it wraps a price link or an "Add to cart" button, it can block a purchase.
Who is affected
- screen reader users
- VoiceOver users on iPhone, iPad and Mac
How to fix it
Use role="text" only on elements that contain plain text, for example to stop a split price such as "€19<sup>99</sup>" from being read in pieces. Remove role="text" from any element that contains links, buttons, form fields or elements with tabindex, or move those interactive elements outside it.
On Shopify
Usually from custom price or badge markup in Liquid snippets, or from an app. Remove role="text" from elements that contain links or buttons.
On Shoptet (CZ)
Usually from custom code. Remove role="text" from elements that contain links or buttons; if the template adds it, ask Shoptet or a partner.
On PrestaShop
Usually from customised product-list or price .tpl templates or modules. Remove role="text" around interactive elements, preferably via an override.
On WooCommerce
Usually from custom price templates, page-builder widgets or plugins. Fix it in a child theme template or ask the plugin author.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule aria-text.
dequeuniversity.com, github.com