How to fix aria dialog name on Shopify Plus

Add a visible or programmatic accessible name to every dialog element so screen readers can announce what the dialog is about when it opens.

Steps for Shopify Plus

  1. Shopify Plus uses the same theme-editing flow as standard Shopify.
  2. Go to Online Store → Themes → Edit code, then locate your dialog/modal/cart-drawer Liquid snippets (e.g. snippets/cart-drawer.liquid, snippets/modal.liquid).
  3. If you use a custom storefront or headless build via Shopify Storefront API, edit the React/Vue/Svelte component that renders the modal and add aria-labelledby or aria-label to the outermost dialog element.
  4. For third-party apps that inject dialogs (e.g. upsell popups), contact the app developer or use a custom Script Tag / Theme App Extension to patch the ARIA attributes after the element is inserted into the DOM.
  5. Verify with axe DevTools or a screen reader after each change.
Official Shopify Plus documentation ↗

What is aria dialog name?

Any popup, modal, or overlay that uses `role="dialog"` or `role="alertdialog"` must have an accessible name — a short label that tells users what the dialog is for. This name is provided either by pointing to the dialog's own heading with `aria-labelledby`, or by writing the label directly into an `aria-label` attribute on the dialog element itself. Without it, a screen reader user hears something like "dialog" with no context when the popup opens, giving them no idea whether it's a cart, a cookie notice, a sign-in prompt, or anything else.

Screen reader users — including many people with visual impairments — rely entirely on the announced name of a dialog to orient themselves when it opens. A nameless dialog is effectively invisible to them: they may not know a popup has appeared, what it contains, or how to close it, which can block them from completing a purchase or any other task. This violates WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value) at Level A — the most basic level of conformance — creating real legal exposure under the ADA (US), EN 301 549 (EU), and equivalent laws in many other countries. Fixing it also signals to Google that your site is well-structured, and it prevents cart-abandonment from users who cannot interact with a broken modal (e.g., a checkout popup or cookie consent dialog).

See the complete Aria dialog name guide for every platform and the full background.

Not sure if your Shopify Plus store has this?

Run a free SEOLZ scan — we’ll find aria dialog name and every other issue across your whole site.

Scan my site free

Fix aria dialog name on another platform