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

Give every tooltip element an accessible name so screen readers can announce its content to users who cannot see the screen.

Steps for Adobe Commerce (Magento)

  1. 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>/.
  2. Search for role="tooltip" across templates: grep -r 'role="tooltip"' app/design/ vendor/magento/.
  3. 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>.
  4. 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}.
  5. Run bin/magento cache:flush, clear static content (bin/magento setup:static-content:deploy), reload the page, and verify with the axe browser extension.
Official Adobe Commerce (Magento) documentation ↗

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.

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.

See the complete Aria tooltip name guide for every platform and the full background.

Not sure if your Adobe Commerce (Magento) store has this?

Run a free SEOLZ scan — we’ll find aria tooltip name and every other issue across your whole site.

Scan my site free

Fix aria tooltip name on another platform