SEOLZ

Aria dialog name

Moderate effort

Found on 2% of audited stores.

Add a descriptive accessible name to every dialog and alertdialog element using aria-label or aria-labelledby so screen-reader users know what the dialog is about.

What it is

Any time your store shows a popup, modal, or overlay — such as a cookie notice, quick-view product panel, cart drawer, age-verification gate, or newsletter signup — that element needs an accessible name. An "accessible name" is a short label that screen readers announce when the dialog opens, telling the user what the popup is for. It is provided either by pointing to a visible heading inside the dialog (aria-labelledby) or by writing a brief label directly on the element (aria-label). Without one, screen-reader users land in the dialog with no context about its purpose.

Why it matters

Screen readers used by blind and low-vision shoppers announce the accessible name of a dialog the moment it opens. Without a name, a user hears only "dialog" — with no indication of whether it is a cart, a promo, a warning, or something else — making the popup effectively unusable. This violates WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value), which is a legal requirement under the ADA, the European Accessibility Act, and similar laws in many countries. Beyond legal risk, an inaccessible checkout or cart modal directly reduces conversions among the estimated 7–8 % of online shoppers who rely on assistive technology. Fixing this also benefits keyboard-only users and voice-control software that rely on the same label.

How to fix it

  1. Identify every HTML element on your store that uses role="dialog" or role="alertdialog" (modals, cart drawers, cookie banners, quick-view panels, age gates, etc.).
  2. Check whether the dialog contains a visible heading element (h1–h6) or a clear title element. If it does, add an aria-labelledby attribute on the dialog element whose value matches the id of that heading — this is the preferred approach because the name stays in sync with the visible text.
  3. If there is no visible heading (e.g. a bare icon-only or image-only dialog), add an aria-label attribute directly on the dialog element with a concise, human-readable description (e.g. aria-label="Shopping cart").
  4. Never leave aria-label empty (aria-label="") — an empty string is treated the same as no name and will still fail the audit.
  5. Test with a screen reader (NVDA + Chrome on Windows, VoiceOver + Safari on macOS/iOS, or TalkBack on Android): open the dialog and confirm the announced name matches its purpose.
  6. Re-run your accessibility scanner to verify the aria-dialog-name rule now passes.
<div role="dialog" aria-modal="true" aria-labelledby="cart-dialog-title">
  <h2 id="cart-dialog-title">Your Shopping Cart</h2>
  <!-- dialog content -->
</div>

<!-- OR, when no visible heading exists -->
<div role="dialog" aria-modal="true" aria-label="Newsletter signup">
  <!-- dialog content -->
</div>

Fix it on your platform

Pick your platform for the exact steps.

How to fix aria dialog name on Shopify
  1. From your Shopify Admin, go to Online Store → Themes → click 'Customize' on your active theme.
  2. To edit the underlying HTML, go to Online Store → Themes → click the '…' menu → Edit code.
  3. Open the relevant Liquid snippet — common locations are snippets/cart-drawer.liquid, snippets/modal.liquid, sections/header.liquid, or a similar file depending on your theme (Dawn theme uses snippets/cart-drawer.liquid).
  4. Find the outermost element of the dialog (look for role="dialog", <dialog>, or a class like 'modal', 'cart-drawer', 'popup').
  5. If the dialog has a visible heading (e.g. <h2 class="cart-title">Your Cart</h2>), add an id to that heading (id="cart-dialog-title") and add aria-labelledby="cart-dialog-title" to the dialog element.
  6. If there is no visible heading, add aria-label="[purpose of the dialog]" directly to the dialog element (e.g. aria-label="Shopping cart").
  7. Save the file and preview the theme; use a screen reader or the axe DevTools browser extension to verify the dialog is now named.
Full Shopify guide →Official Shopify docs ↗
How to fix aria dialog name on 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.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix aria dialog name on WooCommerce
  1. WooCommerce dialogs are typically rendered by your WordPress theme or a page-builder plugin.
  2. For theme-provided modals (e.g. cart drawer, quick-view), go to Appearance → Theme File Editor (or edit via FTP/SFTP) and locate the relevant template file — often woocommerce/cart/mini-cart.php, or a partial in your child theme.
  3. Find the dialog's container element and add aria-labelledby pointing to the heading's id, or add aria-label with a descriptive name.
  4. If using a plugin like WooCommerce Quick View or CartFlows, check the plugin's settings for accessibility options first; if none exist, use a child theme or a small Code Snippets plugin (wp_footer hook) to patch the attribute via JavaScript after the DOM loads.
  5. Install the 'axe DevTools' browser extension, load a page with the dialog, open it, and confirm the name is announced.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix aria dialog name on BigCommerce
  1. Go to Storefront → My Themes → click 'Advanced' → Edit Theme Files (Stencil themes).
  2. Locate the relevant Handlebars template — common files are templates/components/cart/preview.html (mini-cart), templates/components/common/modal.html, or a quick-search/product-quick-view partial.
  3. Find the element with role="dialog" (or the <dialog> tag) and add aria-labelledby="[id-of-heading]" or aria-label="[dialog purpose]".
  4. If you use Page Builder widgets or third-party scripts for popups, check the widget's HTML settings panel for an ARIA label field, or add a Script Manager snippet that patches the attribute on DOMContentLoaded.
  5. Save and push changes; test with a screen reader or the axe browser extension.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix aria dialog name on Adobe Commerce (Magento)
  1. Dialogs in Adobe Commerce (Magento 2) are typically rendered via the modal UI component (Magento_Ui/js/modal/modal) or custom .phtml templates.
  2. For the built-in modal component, override the template in your custom theme at app/design/frontend/<Vendor>/<Theme>/Magento_Ui/templates/modal/modal-popup.html (or modal-slide.html) and add aria-labelledby or aria-label to the outer <div role="dialog"> element.
  3. For custom .phtml popups, edit the template file directly and add the appropriate aria attribute to the dialog container.
  4. If the dialog title is rendered inside the modal, give that element a unique id and reference it with aria-labelledby on the dialog wrapper.
  5. Run bin/magento setup:static-content:deploy after changes, clear cache (bin/magento cache:flush), then verify with axe DevTools.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix aria dialog name on Wix
  1. In the Wix Editor, click on the popup/lightbox element on your canvas (or go to Add → Lightbox to review existing lightboxes in the Pages & Lightboxes panel).
  2. Wix does not expose raw HTML editing for standard editor elements, so use Wix's Velo (Dev Mode) to patch ARIA attributes via JavaScript.
  3. Enable Velo: go to the top menu → Dev Mode → Enable Velo.
  4. In the Velo code panel, use the $w API in the page code or a masterPage.js file: $w('#myLightbox').onViewportEnter(() => { const el = document.querySelector('[role="dialog"]'); if (el) el.setAttribute('aria-label', 'Newsletter signup'); });
  5. Alternatively, use the Velo wixWindow.openLightbox callback and a MutationObserver to patch the attribute when the lightbox opens.
  6. Preview the site, open the lightbox, and use the axe DevTools browser extension to confirm the dialog now has an accessible name.
Full Wix guide →Official Wix docs ↗
How to fix aria dialog name on Wix Studio
  1. In Wix Studio, enable Dev Mode from the top toolbar.
  2. Select the panel, popup, or lightbox component that acts as a dialog.
  3. In the Properties & Events panel, check whether an aria-label field is available directly on the component (Wix Studio is expanding native ARIA support — check the latest release notes).
  4. If no native field exists, use the page's JavaScript code panel to target the rendered dialog element after it opens and set aria-label or aria-labelledby programmatically, similar to the Velo approach for standard Wix.
  5. Test using axe DevTools in your browser while previewing the published or staged site.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix aria dialog name on Squarespace
  1. Squarespace has limited direct HTML access. Go to Website → Pages and identify which page or section contains the popup/announcement bar/lightbox.
  2. For announcement bars and promotional popups, go to Marketing → Promotional Pop-Up or Website → Announcement Bar and check if an ARIA label option exists in the settings panel.
  3. For custom Code Blocks or Embed Blocks, click the block, choose Edit, and add your dialog HTML with aria-labelledby or aria-label included in the markup.
  4. For site-wide injection, go to Settings → Advanced → Code Injection, and in the Footer section add a small JavaScript snippet that runs after load and patches the aria attribute: document.querySelectorAll('[role="dialog"]').forEach(el => { if (!el.getAttribute('aria-label') && !el.getAttribute('aria-labelledby')) { el.setAttribute('aria-label', 'Site notification'); } });
  5. Publish changes and verify with axe DevTools.
Full Squarespace guide →Official Squarespace docs ↗
How to fix aria dialog name on Webflow
  1. In the Webflow Designer, select the Modal or Div Block that serves as your dialog.
  2. Open the Element Settings panel (D key) → Custom Attributes section.
  3. Click '+' to add a new attribute: set Name to role and Value to dialog (if not already set).
  4. Add another attribute: set Name to aria-labelledby and Value to the ID of the heading element inside the dialog (e.g. cart-dialog-title). Make sure the heading element has that ID set in its Element Settings.
  5. If there is no visible heading, instead add aria-label with a descriptive value like Shopping cart.
  6. Publish the site and verify with axe DevTools or a screen reader.
Full Webflow guide →Official Webflow docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find aria dialog name — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Aria dialog name?

Any time your store shows a popup, modal, or overlay — such as a cookie notice, quick-view product panel, cart drawer, age-verification gate, or newsletter signup — that element needs an accessible name. An "accessible name" is a short label that screen readers announce when the dialog opens, telling the user what the popup is for. It is provided either by pointing to a visible heading inside the dialog (aria-labelledby) or by writing a brief label directly on the element (aria-label). Without one, screen-reader users land in the dialog with no context about its purpose.

Why does aria dialog name matter?

Screen readers used by blind and low-vision shoppers announce the accessible name of a dialog the moment it opens. Without a name, a user hears only "dialog" — with no indication of whether it is a cart, a promo, a warning, or something else — making the popup effectively unusable. This violates WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value), which is a legal requirement under the ADA, the European Accessibility Act, and similar laws in many countries. Beyond legal risk, an inaccessible checkout or cart modal directly reduces conversions among the estimated 7–8 % of online shoppers who rely on assistive technology. Fixing this also benefits keyboard-only users and voice-control software that rely on the same label.

How do I fix aria dialog name?

Add a descriptive accessible name to every dialog and alertdialog element using aria-label or aria-labelledby so screen-reader users know what the dialog is about.

Authoritative references

Related Accessibility (WCAG) issues