How to fix frame title on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. Search your entire codebase for '<iframe' and 'Frame' component usages.
2. Add a title prop/attribute to every instance with a meaningful description of the frame's content.
3. 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.
4. 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.

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.

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.

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