How to fix aria dialog name on BigCommerce

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 BigCommerce

  1. Go to Storefront → Themes → click Customize on your active theme, then switch to the Edit Theme Files tab (available in Stencil themes via the Theme Editor or locally via Stencil CLI).
  2. Search template files (templates/components/ and templates/pages/) for role="dialog" — common locations are the cart preview modal, search overlay, and age-gate popups.
  3. Add a unique id to the heading inside each dialog and add aria-labelledby="that-id" to the role="dialog" element, or add aria-label="[Dialog purpose]" if there is no heading.
  4. Commit and push changes if using Stencil CLI (stencil push), or save directly in the Theme Editor.
  5. Preview changes and test with the axe DevTools browser extension.
Official BigCommerce 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 BigCommerce 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