How to fix aria dialog name on Squarespace

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 Squarespace

  1. Squarespace popups (Promotional Pop-Ups and Quick View panels) are generated by the platform. Go to Pages → Not Linked → Promotional Pop-Up (or Marketing → Promotional Pop-Up) to configure your popup content.
  2. Add a descriptive heading block as the first element inside the popup so it serves as a visible title.
  3. To inject the ARIA attribute, go to Settings → Advanced → Code Injection and add a small JavaScript snippet that runs after page load to set aria-labelledby or aria-label on the dialog element (see code snippet below).
  4. For Quick View dialogs on product pages, use the same Code Injection approach targeting the Quick View modal's role="dialog" element.
  5. After publishing, verify with the axe DevTools browser extension in a real browser.
Official Squarespace 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 Squarespace 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