How to fix frame title on Adobe Commerce (Magento)

Add a descriptive `title` attribute to every `<iframe>` element on your store so screen readers can identify the frame's content.

Steps for Adobe Commerce (Magento)

  1. Identify which template file renders the iframe. Navigate to app/design/frontend/<Vendor>/<Theme>/ in your theme (or app/code/<Module>/view/frontend/templates/ for a module).
  2. Open the relevant .phtml template file (e.g. a CMS page template, a video widget template, or a checkout template) in your code editor or via the server file system.
  3. Locate the `<iframe>` tag and add `title="Your descriptive label"` as an attribute. For CMS page/block iframes: go to Admin → Content → Pages (or Blocks) → Edit → switch to HTML source view → find the iframe and add the title attribute, then save.
  4. Clear the Magento cache: go to Admin → System → Cache Management → 'Flush Magento Cache', or run `bin/magento cache:flush` via CLI.
  5. For iframes injected by third-party Magento extensions, check the extension's admin configuration under Stores → Configuration → [Extension Name] for an accessibility or iframe title setting. If unavailable, create a small layout XML override or a plugin to append the attribute.
  6. Verify in browser DevTools on the live/staging store that every iframe has a descriptive, non-empty title attribute.
Official Adobe Commerce (Magento) documentation ↗
<iframe src="https://www.youtube.com/embed/example" title="Product demo video: how to assemble Item X" width="560" height="315" allowfullscreen></iframe>

What is frame title?

An `<iframe>` (inline frame) is an HTML element used to embed third-party content inside a webpage — things like YouTube videos, Google Maps, payment widgets, social media feeds, or live chat windows. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires that every user-interface component, including frames, has an accessible name that describes its purpose. For an `<iframe>`, that accessible name is provided by its `title` attribute (e.g., `title="Product demo video"`). Without it, the frame has no label and assistive technologies have no way to tell users what the frame contains.

Screen reader users — who are often navigating by jumping between frames — will hear something unhelpful like "frame" or the raw URL instead of a meaningful description, making that content effectively invisible to them. This violates WCAG 2.1 Success Criterion 4.1.2 (Level AA), which is incorporated into accessibility laws in many jurisdictions (ADA in the US, EN 301 549 in the EU, AODA in Canada), creating real legal exposure for your business. Beyond legal risk, inaccessible embedded content such as checkout widgets, payment processors, or product videos directly harms conversions for the roughly 7–10% of online shoppers who use assistive technology. Fixing this is a quick technical change that improves user experience, demonstrates inclusive design, and reduces compliance risk.

See the complete Frame title guide for every platform and the full background.

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

Run a free SEOLZ audit — we’ll find frame title and every other issue across your whole site.

Scan my site free

Fix frame title on another platform