Aria tooltip name
Moderate effortFound on 1% of audited stores.
Give every tooltip element an accessible name so screen readers can announce its content to users who cannot see the screen.
What it is
An ARIA tooltip is a small pop-up element that provides extra context when a user hovers over or focuses on something — for example, an explanation next to a form field or a help icon. The `role="tooltip"` attribute tells screen readers "this element is a tooltip," but a screen reader also needs a text label (an accessible name) to actually read aloud to the user. When a tooltip has no accessible name, the screen reader announces the role but says nothing useful — or silently skips it entirely — so the information is completely hidden from blind and low-vision users.
Why it matters
WCAG 2.x Success Criterion 4.1.2 (Name, Role, Value) requires that every user interface component — including tooltips — has a name that assistive technology can identify. Failing this criterion means your store is inaccessible to millions of people who use screen readers, exposing you to legal risk under the ADA, Section 508, EN 301 549, and similar laws worldwide. Beyond compliance, inaccessible tooltips directly hurt conversions: if a visually impaired shopper cannot read your shipping-policy tooltip, size-guide hint, or promo-code explanation, they may abandon their cart. Search engines also crawl and index accessible text; burying information in unnamed tooltips means that content may never be indexed.
How to fix it
- Identify every element on your site that has role="tooltip" — search your theme/template files and any third-party widget HTML for that attribute.
- Ensure each tooltip element contains visible, descriptive text inside its opening and closing tags (e.g., <div role="tooltip">Ships within 2–3 business days</div>). Visible inner text automatically becomes the accessible name.
- If the tooltip must remain visually empty or contains only an icon, add an aria-label attribute directly on the tooltip element: aria-label="Ships within 2–3 business days".
- If the tooltip text already exists elsewhere in the DOM, link it with aria-labelledby pointing to the ID of that text element, so the name is not duplicated in the source.
- Verify the triggering element (the button, icon, or input that shows the tooltip) references the tooltip via aria-describedby="tooltip-id" so screen readers announce the tooltip content in context.
- Test with a free screen reader (NVDA + Firefox on Windows, VoiceOver + Safari on Mac/iOS) to confirm the tooltip text is announced when focus or hover reaches the trigger element.
Fix it on your platform
Pick your platform for the exact steps.
How to fix aria tooltip name on Shopify
- In your Shopify admin, go to Online Store → Themes → (your active theme) → Actions → Edit code.
- Search all .liquid files (Sections, Snippets, Templates) for role="tooltip" using the search bar in the code editor.
- For each match, ensure the element contains descriptive inner text, or add aria-label="[description]" directly on that element.
- If a tooltip is rendered by a third-party app (e.g., a size-guide or product-options app), open the app's settings or contact its support to request accessible tooltip markup.
- Save your changes, then preview the theme and use the Chrome axe DevTools browser extension to confirm no aria-tooltip-name violations remain.
How to fix aria tooltip name on WooCommerce
- In WordPress admin, go to Appearance → Theme File Editor (or use a child theme and edit via FTP/SFTP).
- Search all theme PHP/HTML template files for role="tooltip" — common locations: woocommerce/templates/, your theme's inc/ folder, and any custom shortcode output.
- Edit the template to wrap tooltip content in descriptive text, or add aria-label="[description]" to the tooltip element.
- If the tooltip is from a plugin (e.g., WooCommerce Product Add-Ons, WPForms), check the plugin's settings for an accessibility label field, or use a Custom CSS/JS plugin to inject aria-label via JavaScript as a temporary fix.
- Install the free axe DevTools browser extension, reload the affected page, and run a scan to confirm the violation is resolved.
How to fix aria tooltip name on BigCommerce
- In your BigCommerce control panel, go to Storefront → My Themes → (active theme) → Advanced → Edit Theme Files.
- Search Handlebars (.html) templates and any custom JS files for role="tooltip".
- Add descriptive inner text to the tooltip element, or add an aria-label attribute directly on the element with a plain-language description.
- If tooltips are injected by a third-party widget script (e.g., a review or chat app), contact the vendor or override the output via Storefront → Script Manager by appending a small JS snippet that sets element.setAttribute('aria-label', 'Your description') on DOMContentLoaded.
- Use BigCommerce's built-in Preview mode and run the axe browser extension to verify the fix.
How to fix aria tooltip name on Wix
- Open the Wix Editor for your site and click on the element that contains or triggers the tooltip.
- If the tooltip is a built-in Wix widget (e.g., a hover tooltip on a Wix form field), open its Settings panel — look for a 'Tooltip text' or 'Accessibility label' field and enter a clear description.
- If you added a custom tooltip using Velo (Wix's dev platform), open the Velo code panel and set $w('#tooltipElement').label = 'Your description'; or add the aria-label via the element's accessibility settings in the inspector.
- For tooltips in custom HTML iframes (Added via 'Embed Code'), edit the HTML directly to include descriptive inner text or aria-label on the role="tooltip" element.
- Publish your site, then test with VoiceOver or NVDA, or run the axe browser extension on the live page.
How to fix aria tooltip name on Squarespace
- In the Squarespace editor, navigate to the page containing the tooltip and click the block or section that generates it.
- If the tooltip is a native Squarespace feature (e.g., form field tooltip or image caption), use the block's Content settings to add or update the label/description text — Squarespace uses this as the accessible name.
- For custom-coded blocks (Code Block or Inject Code), go to Pages → (page) → Edit → add a Code Block, then edit the HTML to include descriptive inner text or aria-label on the tooltip element.
- To inject a global fix, go to Settings → Advanced → Code Injection → Footer and add a small <script> that finds all role="tooltip" elements and sets their aria-label if missing.
- Preview the page and confirm with the axe browser extension that no aria-tooltip-name violations appear.
How to fix aria tooltip name on Webflow
- Open your project in the Webflow Designer and locate the element with role="tooltip" in the Navigator panel.
- Select the element, open the Element Settings panel (the gear icon), and scroll to the Custom Attributes section.
- If the tooltip contains inner text, verify that text is descriptive. If not, add a custom attribute: Name = aria-label, Value = your plain-language tooltip description.
- If the tooltip is dynamically bound to a CMS collection, use the CMS binding button next to the aria-label value field to pull the description from a CMS field.
- Publish the site and run the axe DevTools browser extension on the live URL to confirm the fix.
How to fix aria tooltip name on Adobe Commerce (Magento)
- SSH into your server (or use your hosting file manager) and locate the relevant .phtml template file — tooltip elements are commonly found in Magento_Ui/view/frontend/templates/ or your custom theme under app/design/frontend/<Vendor>/<Theme>/.
- Search for role="tooltip" across templates: grep -r 'role="tooltip"' app/design/ vendor/magento/.
- Edit the identified template to ensure each tooltip element has descriptive inner text, or add the aria-label attribute: <div role="tooltip" aria-label="Ships in 2–3 business days">...</div>.
- If tooltips are rendered by a UI component (Magento_Ui), override the component's .html knockout template in your custom theme directory and add the aria-label binding: attr: {'aria-label': tooltipText}.
- Run bin/magento cache:flush, clear static content (bin/magento setup:static-content:deploy), reload the page, and verify with the axe browser extension.
Does your site have this issue?
Run a free SEOLZ scan to find aria tooltip name — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Aria tooltip name?
An ARIA tooltip is a small pop-up element that provides extra context when a user hovers over or focuses on something — for example, an explanation next to a form field or a help icon. The `role="tooltip"` attribute tells screen readers "this element is a tooltip," but a screen reader also needs a text label (an *accessible name*) to actually read aloud to the user. When a tooltip has no accessible name, the screen reader announces the role but says nothing useful — or silently skips it entirely — so the information is completely hidden from blind and low-vision users.
Why does aria tooltip name matter?
WCAG 2.x Success Criterion 4.1.2 (Name, Role, Value) requires that every user interface component — including tooltips — has a name that assistive technology can identify. Failing this criterion means your store is inaccessible to millions of people who use screen readers, exposing you to legal risk under the ADA, Section 508, EN 301 549, and similar laws worldwide. Beyond compliance, inaccessible tooltips directly hurt conversions: if a visually impaired shopper cannot read your shipping-policy tooltip, size-guide hint, or promo-code explanation, they may abandon their cart. Search engines also crawl and index accessible text; burying information in unnamed tooltips means that content may never be indexed.
How do I fix aria tooltip name?
Give every tooltip element an accessible name so screen readers can announce its content to users who cannot see the screen.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN