Check your iframes for missing titles

SiteCurl finds each <iframe> on your pages and checks for a title. Iframes embed outside content: maps, videos, forms, widgets, payment tools, and social feeds. Without a title, screen readers read the frame with no hint of what is inside.

The check reports how many iframes are on each page and how many lack titles. You see the gap right away and know how many frames need work.

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

An iframe is a window into a new page, set inside your page. For a screen reader, it is a line. The user is on your page, and the reader calls out a frame. If the frame has a title, the user hears 'frame: Google Maps showing office spot.' They can decide 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. Going into the frame to find out takes time and may drop them into a whole new context with strange controls. Most users skip unnamed frames, missing content you put there for a reason.

This issue is most common with third-party embeds. YouTube, Google Maps, Calendly, HubSpot forms, Stripe checkout, and dozens of other tools give embed codes that often lack a title. The embed works on screen but fails for screen reader users.

Some pages have many 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 sort them out without going into each one.

Screen reader users need to know what an iframe holds before they enter it. Going into a frame shifts context. The user leaves your page and enters the embed, which may have its own nav, headings, and live tags. Without a title, they have no reason to enter and no way to know what they will find.

This is also a problem for keyboard users. Tabbing into an iframe can be jarring. 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 view before they enter.

Many untitled iframes on the same page make things worse. The user cannot tell them apart, so they either skip all of them or enter each one to find out what it is.

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

Sites with video embeds (YouTube, Vimeo, Wistia) have the same issue. The default embed codes rarely include a title. A page with three video guides 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 with no title. The widget works on screen, but screen reader users cannot identify it.

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

Step 2: Add a clear title. Write a title that describes the embed, not the source. Good: title='Office spot 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 to the iframe tag before you post it. For instance: <iframe src='...' title='Product demo video'></iframe>.

Step 4: Check JS-loaded iframes. Some widgets inject iframes via JS after the page loads. If you use a chat widget, booking tool, or payment tool 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 new. The title should name the exact content: 'Contact form' or 'Demo booking calendar.'

Adding a title to the wrapper div instead of the iframe. The title must be on the <iframe> tag itself. A title on a wrapper div is not tied to the frame in the page tree.

Missing iframes added by plugins or widgets. CMS plugins that add maps, videos, or forms may make iframes with no title. Check the rendered HTML, not just the plugin settings panel.

Leaving ad iframes untitled. If your page has ad iframes, they should have a title like 'Ad' 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 tag 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.

Each 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 each embed code before you publish.