Frame title
Quick winFound on 12% of audited stores.
Add a descriptive `title` attribute to every `<iframe>` element on your store so screen readers can identify the frame's content.
What it is
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.
Why it matters
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.
How to fix it
- Identify every `<iframe>` tag on your store — check page templates, theme files, embedded apps, custom HTML blocks, and any third-party snippet code.
- Write a short, descriptive title for each frame that clearly states its purpose from the user's perspective (e.g., 'Product demo video', 'Google Map showing our store location', 'Secure payment form', 'Live chat window'). Avoid generic labels like 'iframe' or 'frame 1'.
- Add the `title` attribute directly to the opening `<iframe>` tag: `<iframe src="..." title="Your descriptive label here">`. If the frame's content is purely decorative and conveys no information, use `title=""` and add `aria-hidden="true"` to hide it from assistive technologies entirely.
- If the `<iframe>` is injected by a third-party app or plugin, check the app's settings panel for a 'title' or 'accessibility label' field first; if none exists, contact the app developer or wrap the embed in a theme customization that appends the attribute via JavaScript.
- After making changes, validate by opening your browser's developer tools, searching for `<iframe>` in the Elements/Inspector panel, and confirming each has a non-empty, meaningful `title` attribute.
- Re-test with a free tool such as axe DevTools browser extension or NVDA/VoiceOver screen reader to confirm the frame is announced correctly when focused.
<iframe src="https://www.youtube.com/embed/example" title="Product demo video: how to assemble Item X" width="560" height="315" allowfullscreen></iframe>Fix it on your platform
Pick your platform for the exact steps.
How to fix frame title on Shopify
- Go to Online Store → Themes → click 'Customize' on your active theme.
- For iframes inside theme sections or blocks (e.g. a video or map section): click 'Edit code' (Online Store → Themes → ⋯ → Edit code) and open the relevant Liquid template (e.g. sections/video.liquid, sections/map.liquid, or snippets/map.liquid).
- Locate the `<iframe>` tag and add a `title` attribute: `<iframe src="..." title="{{ section.settings.video_title | default: 'Embedded video' }}">`.
- For iframes injected by Shopify apps, go to Apps → the specific app → look for an Accessibility or Widget Settings option. If unavailable, add a JavaScript snippet via Online Store → Themes → Edit code → theme.liquid (just before `</body>`): `document.querySelectorAll('iframe:not([title])').forEach(function(f){ f.title = 'Embedded content'; });` — but replace the generic fallback with specific labels per frame where possible.
- Save and preview, then inspect the iframe in browser DevTools to confirm the title attribute is present.
How to fix frame title on WooCommerce
- For iframes in page/post content: go to WordPress Admin → Pages (or Posts) → Edit the page → switch to the 'Code editor' view (block editor top-right menu) or the 'Text' tab (classic editor).
- Find the `<iframe>` tag and add `title="Your descriptive label"` to it, then save.
- For iframes in your theme template files (e.g. header.php, footer.php, or a custom template): go to Appearance → Theme File Editor (or use an FTP/SSH client), open the relevant PHP file, locate the iframe, and add the title attribute.
- For iframes added by plugins (e.g. contact form, map, or payment plugins): check the plugin's settings page for an 'iframe title' or 'accessibility label' field. If none, add a small JavaScript snippet to your child theme's functions.php using wp_footer hook or via a plugin like 'Custom Scripts': `add_action('wp_footer', function(){ echo "<script>document.querySelectorAll('iframe:not([title])').forEach(el => el.title = 'Embedded content');</script>"; });`.
- Use the browser inspector to verify each iframe now has a meaningful title attribute.
How to fix frame title on BigCommerce
- Go to Storefront → My Themes → click 'Advanced' → 'Edit Theme Files' on your active theme.
- Search the template files (templates/pages/, templates/components/) for `<iframe>` tags using the file search.
- Open the relevant file (e.g. templates/components/products/video.html or a custom widget template) and add `title="Your descriptive label"` to the iframe tag, then save.
- For iframes inside Page Builder widgets: go to Storefront → My Themes → Customize → open the page in Page Builder → click the HTML widget or Custom HTML block containing the iframe → edit the raw HTML to add the title attribute.
- For third-party app iframes, check the app's configuration in Apps → My Apps → the specific app settings for an accessibility or title field.
- Preview the storefront and confirm the attribute is present with browser DevTools.
How to fix frame title on Wix
- Open the Wix Editor for your site.
- For a 'Embed a Site' or 'HTML iframe' element: click the element on the canvas → click 'Enter Code' or 'Edit Code' in the element settings panel.
- In the HTML/code panel, locate the `<iframe>` tag and add `title="Your descriptive label"` inside the opening tag, then click 'Apply' or 'Update'.
- For Wix Video or Wix Maps widgets: these are Wix-managed components. Go to Site → Accessibility Wizard (available in some Wix plans) to check for labeling options, OR contact Wix Support to report the missing title as a platform accessibility issue.
- For Velo (Wix custom code) pages: open the relevant page code in Developer Tools → Code panel and add the title via `$w('#iframeName').setAttribute('title', 'Your descriptive label');`.
- Preview and use browser DevTools to confirm the title attribute is set.
How to fix frame title on Squarespace
- Open Pages in your Squarespace admin and edit the page containing the iframe.
- Click the Code Block or Embed Block that contains the `<iframe>` HTML, then click 'Edit'.
- In the code/embed editor, find the `<iframe>` opening tag and add `title="Your descriptive label"` as an attribute, then save the block.
- For Squarespace Video Blocks or third-party embed blocks (e.g., YouTube, Vimeo): these are generated by Squarespace. Go to Settings → Advanced → Code Injection and add a footer script: `<script>document.querySelectorAll('iframe:not([title])').forEach(function(el){ el.setAttribute('title', el.src.includes('youtube') ? 'YouTube video player' : el.src.includes('vimeo') ? 'Vimeo video player' : 'Embedded content'); });</script>` — customize label logic per iframe src.
- Save and check in browser DevTools that all iframes now have descriptive title attributes.
How to fix frame title on Webflow
- Open your project in the Webflow Designer.
- For a native Webflow Embed element: click the element on the canvas → click 'Open Embed Code' in the right-hand settings panel.
- In the embed code editor, find the `<iframe>` tag and add `title="Your descriptive label"`, then click 'Save & Close'.
- For a Webflow Video element (YouTube/Vimeo): there is currently no built-in title field. Instead, publish the site, then add a custom script via Project Settings → Custom Code → Footer Code (or Page Settings → Before </body> tag): `<script>document.querySelectorAll('iframe:not([title])').forEach(function(el){ el.title = 'Embedded video'; });</script>` — use a more specific label if you know the content.
- For interactions or components created with components/symbols: open the Symbol, edit the embed code there, and add the title attribute so all instances are updated at once.
- Publish, then open the live site in your browser and inspect iframes in DevTools to verify.
How to fix frame title on Adobe Commerce (Magento)
- 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).
- 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.
- 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.
- Clear the Magento cache: go to Admin → System → Cache Management → 'Flush Magento Cache', or run `bin/magento cache:flush` via CLI.
- 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.
- Verify in browser DevTools on the live/staging store that every iframe has a descriptive, non-empty title attribute.
Does your site have this issue?
Run a free SEOLZ audit to find frame title — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does frame title matter?
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.
How do I fix frame title?
Add a descriptive `title` attribute to every `<iframe>` element on your store so screen readers can identify the frame's content.
Authoritative references
- WCAG 2 overview — W3C WAI
- Web accessibility tutorials — W3C WAI
- ARIA basics — MDN