Aria tooltip name

Moderate effort

Add a visible, descriptive text label to every element that has role="tooltip" so screen readers can announce its purpose.

What it is

A tooltip is a small pop-up element that appears when a user hovers over or focuses on something — think of the little "Add to wishlist" bubble that appears when you hover over a heart icon. In HTML, these are built using `role="tooltip"`. The problem flagged here (WCAG 4.1.2) is that your tooltip element has no accessible name — in other words, the tooltip contains no text (or the text is hidden from assistive technology), so a screen reader has nothing to read aloud. An accessible name is simply the label a screen reader announces when it reaches that element.

Why it matters

Screen-reader users — who may be blind, have low vision, or rely on keyboard-only navigation — depend entirely on accessible names to understand what a tooltip communicates. Without one, the tooltip is completely silent: the user either hears nothing or hears a meaningless "tooltip" announcement with no content. This is a direct failure of WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value), which is a Level AA requirement that governs legal accessibility compliance in the US (ADA), EU (EAA), UK (PSBAR), and many other jurisdictions. Inaccessible tooltips create real legal exposure for your business and exclude a significant portion of potential customers. Fixing them improves trust, usability, and demonstrates commitment to inclusive commerce.

How to fix it

Identify every element on your store that uses role="tooltip" — these are often custom-built pop-ups on product images, icon buttons (wishlist, compare, info icons), form fields, or shipping estimators.
Ensure the tooltip element itself contains visible text that describes its purpose — for example, 'Add to wishlist' or 'Free shipping on orders over $50'. Plain visible text inside the tooltip is the simplest and most robust solution.
If the tooltip must show only an icon or image with no text, add an aria-label attribute directly on the tooltip element (e.g., aria-label="Free shipping on orders over $50") to provide the accessible name programmatically.
Alternatively, if the tooltip's text content is rendered in a child element, link it to the tooltip using aria-labelledby pointing to the ID of that child element (e.g., aria-labelledby="tooltip-text-id").
Never use CSS techniques like visibility:hidden, display:none, opacity:0, or clip-path on the tooltip's text content — these hide content from screen readers as well as visual users. Use standard tooltip show/hide patterns that keep text in the DOM.
Test your fix: use a screen reader (NVDA + Chrome on Windows, VoiceOver + Safari on Mac/iOS) to trigger the tooltip by keyboard focus and confirm the descriptive text is announced.

<div role="tooltip" id="wishlist-tip" aria-label="Add to wishlist">
  Add to wishlist
</div>

<!-- OR using aria-labelledby -->
<div role="tooltip" id="shipping-tip" aria-labelledby="shipping-tip-text">
  <span id="shipping-tip-text">Free shipping on orders over $50</span>
</div>

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 → click the three-dot menu next to your active theme → Edit code.
Use the search box (top of the file tree) to search for 'role="tooltip"' across all Liquid template and snippet files.
Open each file where a tooltip is found (common locations: snippets/product-card.liquid, snippets/icon-wishlist.liquid, sections/header.liquid).
Ensure the tooltip's HTML element contains descriptive plain text, OR add an aria-label attribute with a descriptive string, e.g.: <div role="tooltip" aria-label="Add to wishlist">Add to wishlist</div>.
If tooltips are injected by a Shopify app (e.g., a wishlist or product review app), open the app's settings in Admin → Apps and look for a 'Label' or 'Tooltip text' field; if none exists, contact the app developer.
Save changes and verify with a screen reader or the axe browser extension.

Full Shopify guide →Official Shopify docs ↗

How to fix aria tooltip name on WooCommerce

Log in to WordPress Admin. If tooltips are added by your theme, go to Appearance → Theme File Editor and search for 'role="tooltip"' in your child theme's template files.
If tooltips come from a plugin (e.g., YITH WooCommerce Wishlist, WooCommerce Product Add-Ons), navigate to that plugin's settings page and look for tooltip label or text fields.
For theme-based tooltips, edit the relevant PHP template (e.g., woocommerce/content-product.php or a custom template part) and add aria-label="[descriptive text]" to the tooltip element.
If you use a page builder (Elementor, Divi, Beaver Builder), open the widget/module that generates the tooltip and fill in the 'Tooltip text' or 'Accessible label' field — or use the Advanced → Custom Attributes panel to add aria-label.
Install and run the axe DevTools browser extension to confirm the fix, then re-run your accessibility scanner.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix aria tooltip name on BigCommerce

In your BigCommerce Admin, go to Storefront → My Themes → click Customize on your active theme → click Advanced → Edit Theme Files.
Search template files (templates/components/ and templates/pages/) for 'role="tooltip"'.
Open the relevant Handlebars (.html) file and add descriptive text content inside the tooltip element, or add an aria-label attribute: <span role="tooltip" aria-label="Compare products">Compare</span>.
If tooltips are rendered by a widget or third-party script injected via Script Manager (Storefront → Script Manager), edit that script to include aria-label on all tooltip elements.
Save and publish the theme, then verify with a screen reader or axe browser extension.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix aria tooltip name on Wix

Open the Wix Editor and click on the element that triggers or contains the tooltip.
In Wix, built-in tooltips on buttons or icons often have a 'Tooltip' text field in the element's Settings panel (click the element → Settings gear icon → look for 'Tooltip' or 'Accessible label').
For custom-coded tooltips added via Wix Velo (formerly Corvid), open the page's code panel and locate the tooltip element. Add an aria-label property: $w('#myTooltip').setAttribute('aria-label', 'Add to wishlist');
If you added a tooltip widget from the Wix App Market, check that app's settings panel for a label or accessibility text field.
Use Wix's built-in Accessibility Wizard (Settings → Accessibility Wizard) to scan for missing labels after making changes.
Preview and test with a screen reader to confirm the tooltip text is announced.

Full Wix guide →Official Wix docs ↗

How to fix aria tooltip name on Squarespace

In Squarespace, tooltips are most commonly added via Code Blocks, custom HTML in the Page Header injection, or third-party embed scripts.
Navigate to the page containing the tooltip. Click Edit on the page, then click the Code Block or Custom HTML block that contains the tooltip markup.
In the HTML source, find the element with role="tooltip" and add a descriptive aria-label attribute or ensure it contains visible text, e.g.: <div role="tooltip" aria-label="Free returns">Free returns</div>.
For site-wide tooltip scripts injected via Settings → Advanced → Code Injection (Header or Footer), edit the script there to add aria-label to all tooltip elements.
Save changes, then use the axe browser extension in your browser's developer tools to verify the accessible name is present.

Full Squarespace guide →Official Squarespace docs ↗

How to fix aria tooltip name on Webflow

Open your Webflow Designer and select the element that has the tooltip behavior (often a div or span with a custom interaction or the Webflow 'Tooltip' component).
In the right-hand Settings panel, click the 'Accessibility' section (the person icon). Add a descriptive label in the 'aria-label' field, e.g., 'Add to wishlist'.
If the tooltip is a separate element in the DOM with role="tooltip", select that element, open the Element Settings panel (D key), scroll to Custom Attributes, and add: Name = aria-label, Value = [your descriptive text].
Alternatively, ensure the tooltip element contains a visible Text element as a child — Webflow will use that text as the accessible name automatically.
Publish the site and verify with the axe DevTools browser extension or a screen reader.

Full Webflow guide →Official Webflow docs ↗

How to fix aria tooltip name on Adobe Commerce (Magento)

Tooltip elements in Adobe Commerce are typically rendered in PHTML templates or JavaScript UI components (Knockout.js). Search your theme's app/design/frontend/<Vendor>/<theme>/ directory for 'role="tooltip"' or 'data-tooltip' attributes.
For PHTML-based tooltips, open the relevant template file (common locations: Magento_Catalog/templates/product/, Magento_Ui/templates/) and add an aria-label attribute or visible text content to the tooltip element.
For JavaScript/Knockout-rendered tooltips (common in checkout, forms, or product configurators), locate the corresponding .html Knockout template file and add aria-label using Knockout binding: <div role="tooltip" data-bind="attr: { 'aria-label': tooltipText }"></div>.
If using a third-party extension for tooltips (e.g., Amasty, MageWorx), check the extension's admin configuration panel under Stores → Configuration for label/accessibility text fields, or override its template in your custom theme.
Run bin/magento setup:static-content:deploy and bin/magento cache:flush after template changes, then test with a screen reader or axe browser extension.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

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

Scan my site free

Frequently asked questions

What is Aria tooltip name?

Why does aria tooltip name matter?

How do I fix aria tooltip name?