Check your iframes for missing titles

SiteCurl finds every <iframe> on your pages and checks for a title attribute. Iframes embed external content: maps, videos, forms, widgets, payment processors, and social media feeds. Without a title, screen readers announce the frame with no description of what is inside.

The check reports how many iframes are on each page and how many are missing titles. You see the gap immediately and know how many frames need attention.

Iframes with a non-empty title attribute pass the check. The title should describe the content: 'Google Maps showing office location' or 'YouTube video: product demo.' A title that just says 'iframe' is technically present but not helpful.

An iframe is a window into another page, embedded inside your page. From a screen reader's perspective, it is a boundary. The user is navigating your page, and suddenly the reader announces a frame. If the frame has a title, the user hears 'frame: Google Maps showing office location.' They can decide whether to enter the frame or skip past it.

Without a title, the user hears 'frame' and nothing else. They do not know if it is a map, a video, a form, or an ad. Entering the frame to find out takes time and may drop them into a completely different context with unfamiliar controls. Most users skip unnamed frames entirely, missing content you put there for a reason.

This problem is especially common with third-party embeds. YouTube, Google Maps, Calendly, HubSpot forms, Stripe checkout, and dozens of other services provide embed codes that often lack a title attribute. The embed works visually but fails for screen reader users.

Some pages have multiple iframes: a map, a video, and a booking widget on the same page. Without titles, the user hears 'frame, frame, frame' and cannot tell them apart. Titles are the only way to distinguish them without entering each one.

Screen reader users need to know what an iframe contains before they enter it. Entering a frame shifts context. The user leaves your page and enters the embedded content, which may have its own navigation, headings, and interactive elements. Without a title, they have no reason to enter and no way to know what they will find.

This is also a usability issue for keyboard users. Tabbing into an iframe can be disorienting. If the user did not expect to enter a map or video, they may not know how to get back to the main page. A clear title sets the right expectation before they enter.

Multiple untitled iframes on the same page compound the problem. The user cannot distinguish between them, so they either skip all of them or enter each one to figure out what it is.

Business sites with embedded Google Maps are the most common case. The embed code from Google does not include a title by default. Every site that pastes the code without adding a title ships an unnamed frame.

Sites with embedded videos (YouTube, Vimeo, Wistia) have the same issue. The default embed codes rarely include a title attribute. A page with three video tutorials has three unnamed frames that screen reader users cannot tell apart.

SaaS landing pages that embed demo booking widgets (Calendly, HubSpot) or support chat widgets often have iframes without titles. The widget works visually, but screen reader users cannot identify it.

Step 1: Find your iframe tags. Search your HTML for <iframe. Each one needs a title attribute. If you use a CMS, check the embed blocks or widgets that generate iframes.

Step 2: Add a descriptive title attribute. Write a title that describes the embedded content, not the source. Good: title='Office location map'. Bad: title='Google Maps'. The title should tell the user what they will find inside the frame.

Step 3: Update third-party embed codes. When you paste an embed code from YouTube, Google Maps, or Calendly, add a title attribute to the iframe tag before publishing. Example: <iframe src='...' title='Product demo video'></iframe>.

Step 4: Check dynamically loaded iframes. Some widgets inject iframes via JavaScript after the page loads. If you use a chat widget, booking tool, or payment processor that creates an iframe, check the rendered HTML (not just your source code) for missing titles.

Using 'iframe' as the title. A title of 'iframe' or 'embedded content' tells the user nothing they did not already know. The title should describe the specific content: 'Contact form' or 'Demo scheduling calendar.'

Adding a title to the wrapper div instead of the iframe. The title attribute must be on the <iframe> element itself. A title on a surrounding div is not associated with the frame in the accessibility tree.

Forgetting iframes added by plugins or widgets. CMS plugins that add maps, videos, or forms may generate iframes without titles. Check the rendered HTML output, not just the plugin settings panel.

Leaving ad iframes untitled. If your page includes advertising iframes, they should have a title like 'Advertisement' so screen reader users can skip them. Without a title, users may enter the ad frame thinking it is page content.

After adding titles, run another SiteCurl scan. The missing iframe title count should drop to zero. For a quick manual check, right-click the iframe in your browser, select 'Inspect,' and look for the title attribute on the iframe element.

To test with a screen reader, navigate to the iframe. VoiceOver and NVDA announce the frame along with its title. If you hear just 'frame' with no label, the title is still missing.

Every iframe needs a title that describes what is inside. Screen reader users cannot see the embedded content before entering the frame, so the title is their only preview. Add it to every embed code before you publish.