Recommended practice Priority: Moderate
A pop-up window has no name
A dialog such as a cart drawer, cookie banner, newsletter pop-up or quick-view window is marked with role="dialog" or role="alertdialog" but has no accessible name. This is a recommended practice, not a WCAG AA requirement by itself.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
When the window opens, a screen reader just says "dialog" without saying what it is about. Shoppers have to explore it to find out whether it is the cart, a discount offer or a cookie question, which is confusing at key moments such as adding to cart.
Who is affected
- screen reader users
- blind and partially sighted shoppers
How to fix it
Give every element with role="dialog" or role="alertdialog" a name: point aria-labelledby at the dialog's visible heading, or add an aria-label such as aria-label="Shopping cart". While you are there, move focus into the dialog when it opens and back to the trigger when it closes.
On Shopify
Usually from the cart drawer, search, quick-view or pop-up apps. Add aria-labelledby or aria-label in the relevant Liquid section or snippet; for app pop-ups, ask the app developer.
On Shoptet (CZ)
Usually from template pop-ups or third-party scripts such as cookie banners or chat. Fix your own custom code; for template elements, report it to Shoptet or a partner.
On PrestaShop
Usually from theme modal windows (add-to-cart confirmation, quick view) or modules. Add aria-labelledby to the modal markup in the .tpl templates, preferably via an override.
On WooCommerce
Usually from cookie consent, pop-up, mini-cart or quick-view plugins. Check the plugin settings for an accessibility option, add the name 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-dialog-name.
dequeuniversity.com, github.com, www.w3.org