Frame title
Quick winFound on 28% of audited stores.
Add a descriptive `title` attribute to every `<iframe>` and `<frame>` element on your store so screen-reader users know what each embedded frame contains before entering it.
What it is
Every `<iframe>` (embedded map, video, chat widget, payment form, etc.) must have a `title` attribute that briefly describes what is inside it — for example, `title="Google Map showing our store location"`. This is required by WCAG 2.x Success Criterion 4.1.2 (Name, Role, Value). Without a title, a screen reader simply announces "frame" or nothing at all, leaving blind and low-vision shoppers with no idea what the frame contains or whether they need to interact with it.
Why it matters
Failing this criterion is a WCAG Level A violation — the lowest, most fundamental accessibility bar — which means your store is not accessible to a significant portion of disabled users. In many jurisdictions (USA under ADA, EU under the European Accessibility Act, UK Equality Act, etc.) inaccessible websites create legal exposure for businesses. Screen-reader users who cannot identify embedded frames may abandon checkout widgets, miss important content like store maps or video demos, and leave your site without converting. Auditors and automated tools flag this issue prominently, and it is one of the easiest fixes you can make — often just adding a single HTML attribute.
How to fix it
- Identify every iframe and frame element on your store pages — including those injected by third-party apps, chat widgets, maps, video embeds, payment forms, and social media plugins.
- For each frame, write a short, descriptive title that tells the user what the frame contains (e.g., 'YouTube product demo video', 'Google Map to our showroom', 'Klaviyo email signup form').
- Add the title attribute directly to the iframe tag: <iframe title="Your description here" src="...">. If the frame is decorative and truly contains nothing meaningful, add title="" AND aria-hidden="true" so it is hidden from assistive technology entirely.
- If the iframe is injected by a third-party app or widget and you cannot edit its HTML directly, look for a configuration option in the app's settings for a 'title', 'label', or 'accessibility label' field, or wrap it with a JavaScript snippet that sets the attribute after the element loads.
- After making changes, retest using a free browser extension such as axe DevTools or WAVE, or simply navigate the page with a screen reader (NVDA + Firefox on Windows, or VoiceOver + Safari on Mac/iOS) and tab into the frame to confirm it announces the correct name.
- Re-scan with your accessibility scanner to confirm the frame-title rule passes.
Fix it on your platform
Pick your platform for the exact steps.
How to fix frame title on Shopify
- From your Shopify admin, go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
- Search for '<iframe' across all template files using the search box at the top-left of the code editor. Check layout/theme.liquid, all templates/.liquid files, and sections/.liquid files.
- For iframes you control directly, add title="…" inside the tag and save.
- For iframes injected by Shopify apps (e.g. chat, reviews, maps), open the app's settings page inside Shopify admin — look for an 'accessibility label' or 'title' field. If none exists, add a JavaScript snippet to Online Store → Themes → Edit code → assets/theme.js (or a new <script> block in theme.liquid) that sets the attribute after page load (see code snippet below).
- Use the Shopify Theme Inspector or a browser extension like axe DevTools to verify the fix on your live store.
How to fix frame title on Shopify Plus
- Follow the same steps as Shopify above; additionally audit checkout.liquid (accessible to Shopify Plus merchants) for any iframes used in the checkout flow and add title attributes there.
- For headless or custom storefronts on Shopify Plus, edit the component files in your codebase directly.
How to fix frame title on WooCommerce
- In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme and edit files via FTP/SSH).
- Search for '<iframe' in your active theme's template files (header.php, footer.php, page templates, single-product.php, etc.).
- Add title="…" to each iframe tag you find and save.
- For iframes inserted by WordPress plugins (maps, video embeds, contact forms, etc.), check the plugin's settings page for an 'iframe title' or 'accessibility label' option. If absent, use the plugin's provided filter/hook or add a JavaScript snippet to your child theme's functions.php or via a code-snippet plugin (e.g. WPCode) to set the attribute after the DOM loads.
- Install the free axe DevTools browser extension and scan your product and checkout pages to confirm the fix.
How to fix frame title on BigCommerce
- In your BigCommerce admin, go to Storefront → My Themes → click Customize on your active theme → choose Edit Theme Files (or Advanced → Edit Theme Files in older panels).
- Use the file search to locate '<iframe' across all .html and .js template files (templates/layout/, templates/pages/, templates/components/).
- Add title="…" to each iframe and save / push changes.
- For iframes injected by third-party BigCommerce apps, check each app's configuration in Apps → My Apps for an accessibility or title setting. If unavailable, add a JavaScript fix via Storefront → Script Manager — create a new script that runs on 'All Pages' and sets the iframe title attribute after the DOM loads.
How to fix frame title on Wix
- Open your site in the Wix Editor. If you embedded an iframe using the HTML Embed widget (Add → Embed → HTML iframe), click the widget and choose Edit Code.
- Inside the embed code, locate your <iframe> tag and add title="…" directly to it, then click Apply.
- For Wix apps that inject iframes (e.g. Wix Chat, Wix Bookings), go to that app's settings panel and look for a label or accessibility option. If the iframe is added by a Wix system app with no configuration option, contact Wix Support to report the accessibility gap — you cannot directly edit Wix system-generated iframes.
- Use the Wix Accessibility Wizard (available in the editor's left panel under Accessibility) to identify remaining frame-title issues.
How to fix frame title on Squarespace
- In your Squarespace editor, navigate to the page containing the iframe. If the iframe was inserted via a Code Block (Insert → Code), click Edit on that block.
- Find the <iframe> tag in the code block and add title="…" directly to it, then save.
- For Squarespace extensions or third-party embed codes that inject iframes, edit the embed code in the relevant Code Block or Footer/Header injection area (Settings → Advanced → Code Injection) and add the title attribute.
- For iframes Squarespace itself generates (e.g. for Maps blocks, Form blocks), there is no direct title override available in the editor — submit a feature/accessibility request to Squarespace support, or replace the built-in block with a custom Code Block containing your own iframe with a title attribute.
How to fix frame title on Webflow
- Open your project in the Webflow Designer. Select the Embed element or HTML Embed component that contains your <iframe>.
- Click the element to open the Embed Code editor and add title="…" to the <iframe> tag, then click Save & Close.
- For iframes in custom code added via Project Settings → Custom Code (Head/Body code), edit the script/embed there and add the title attribute.
- Publish your site and use the axe DevTools browser extension on your published Webflow URL to verify all iframes now have descriptive titles.
How to fix frame title on Adobe Commerce (Magento)
- Locate iframe tags in your theme's template (.phtml) files under app/design/frontend/<Vendor>/<Theme>/. Use a code search (grep -r '<iframe' app/design/) to find all instances.
- Add title="…" to each iframe in the relevant .phtml template files and deploy the updated theme.
- For iframes injected by third-party Magento extensions, check the extension's template files under vendor/ or app/code/, then override the template in your custom theme rather than editing vendor files directly.
- For iframes added via CMS pages or blocks (Content → Pages or Content → Blocks in the Admin panel), edit the HTML of the block/page using the CMS editor's HTML source view and add the title attribute.
- Run bin/magento cache:clean and bin/magento setup:static-content:deploy, then verify with axe DevTools.
How to fix frame title on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — the template structure and CMS block editing workflow are identical in Magento Open Source.
How to fix frame title on PrestaShop
- In your PrestaShop back office, go to Design → Theme & Logo → click Your current theme → then Theme Editor, or access theme files via FTP at themes/<your-theme>/templates/.
- Search template .tpl files for '<iframe' and add title="…" to each one.
- For iframes inside PrestaShop modules, override the module template: copy the module's template to themes/<your-theme>/modules/<module-name>/ and edit it there to add the title attribute.
- For iframes in CMS pages (Content → Pages), use the TinyMCE HTML source editor to add the title attribute directly.
How to fix frame title on Headless / Custom (I build in code)
- Search your entire codebase for '<iframe' and 'Frame' component usages.
- Add a title prop/attribute to every instance with a meaningful description of the frame's content.
- Create a lint rule or accessibility test (e.g. eslint-plugin-jsx-a11y rule 'iframe-has-title' for React, or an axe-core unit test) to prevent future regressions.
- For iframes from third-party SDKs you cannot control, use JavaScript after mount to set the title attribute, or file a bug with the third-party vendor.
Does your site have this issue?
Run a free SEOLZ scan to find frame title — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Frame title?
Every `<iframe>` (embedded map, video, chat widget, payment form, etc.) must have a `title` attribute that briefly describes what is inside it — for example, `title="Google Map showing our store location"`. This is required by WCAG 2.x Success Criterion 4.1.2 (Name, Role, Value). Without a title, a screen reader simply announces "frame" or nothing at all, leaving blind and low-vision shoppers with no idea what the frame contains or whether they need to interact with it.
Why does frame title matter?
Failing this criterion is a WCAG Level A violation — the lowest, most fundamental accessibility bar — which means your store is not accessible to a significant portion of disabled users. In many jurisdictions (USA under ADA, EU under the European Accessibility Act, UK Equality Act, etc.) inaccessible websites create legal exposure for businesses. Screen-reader users who cannot identify embedded frames may abandon checkout widgets, miss important content like store maps or video demos, and leave your site without converting. Auditors and automated tools flag this issue prominently, and it is one of the easiest fixes you can make — often just adding a single HTML attribute.
How do I fix frame title?
Add a descriptive `title` attribute to every `<iframe>` and `<frame>` element on your store so screen-reader users know what each embedded frame contains before entering it.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN