Inline frame

An inline frame (iframe in HTML) embeds a web page inside another page. YouTube videos, Google Maps, booking widgets: all use iframes. For accessibility, each inline frame must have a title attribute that describes its content, so screen readers can identify it.

You paste the embed code for a YouTube video on your page. A screen reader encounters this <iframe> and announces: "frame". Nothing else. The user doesn't know if it's a video, a map, or an ad.

#Why the title is required

The <iframe> element creates a nested browsing context: a complete page inside your page. Screen readers list the frames on the page to let the user navigate between them. Without a title attribute, each frame appears as "frame" or "frame without title" in this list.

The RGAA dedicates its entire topic 2 to this, with two criteria:

  • Criterion 2.1: does each frame have a title?
  • Criterion 2.2: is this title relevant?

On the WCAG side, technique H64 describes exactly this approach to satisfy criterion 2.4.1 (bypass blocks) and criterion 4.1.2 (name, role, value).

#The code that platforms give you

YouTube, Spotify, Google Maps provide embed codes. The problem: these codes often omit the title, or use a generic title identical for all videos.

<!-- What YouTube generates -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video player"></iframe>
 
<!-- What you should write -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Video: presentation of synchronized audio description"></iframe>

The title must describe the specific content of the frame, not its technical nature. "Map showing our offices in Lyon" is better than "Google Maps".

#Technical iframes: hiding them properly

Some iframes contain no visible content: tracking scripts, conversion pixels. Keeping them exposed to assistive technologies creates unnecessary noise. The solution, documented by Orange: hide the frame with aria-hidden and prevent keyboard focus from entering it.

<iframe src="tracker.html"
  title="Technical frame"
  aria-hidden="true"
  tabindex="-1"></iframe>

#In summary

Each <iframe> on your page needs a title attribute that describes its content. Modify the embed codes you copy and paste. For invisible technical iframes, add aria-hidden="true" and tabindex="-1".

Back to glossary
Share this article

Learn more

Inline frame title

The inline frame title is the accessible name of an <iframe> element, conveyed via the title, aria-label, or aria-labelledby attribute. This is the text that screen readers announce to identify the content of an embedded frame. RGAA dedicates two criteria to it: the frame must have a title (2.1), and that title must accurately describe the actual frame content (2.2).

Alternative Content

Alternative content is an equivalent that replaces non-textual content to make it perceivable by everyone. The alt attribute on an image is its most well-known form, but the concept also covers captions, text transcriptions, and audio descriptions. WCAG makes it their very first principle.

Document structure

Document structure is the logical organization of a web page through hierarchical headings (h1 to h6) and semantic HTML5 tags. Screen readers use them to build a navigable table of contents and allow their users to jump directly to the desired section.