frame-title

<frame> and <iframe> elements embed external resources inside a page. Without a brief, descriptive name, assistive technology can announce only generic information, forcing people to explore each frame to discover its purpose. Providing a unique, concise name lets screen-reader users list frames, understand their role immediately, and move quickly to the content they need.

Pass Patterns

Frame has a descriptive title

The title attribute clearly states what appears inside the frame.

<iframe
    src="https://weather.example.com/new-york"
    title="New York City weather forecast">
</iframe>

Using aria-label

An <iframe> with an aria-label that describes its content.

<iframe
    src="https://map.example.com/pizza/my-location"
    aria-label="Pizzerias within a three-mile radius">
</iframe>

Using aria-labelledby

An <iframe> with an aria-labelledby that describes its content.

<h2 id="landings-heading">
    Landings planned in the next two hours, JFK, New York
</h2>
<iframe
    src="https://flights.example.com/landings/JFK"
    aria-labelledby="landings-heading">
</iframe>

Fail Patterns

Missing name

Assistive technology announces only “frame” or the URL.

<iframe src="promo.html"></iframe>

Empty aria-label attribute

This <iframe> has an empty aria-label, which results in no accessible name.

<iframe
    src="https://map.example.com/pizza/my-location"
    aria-label="">
</iframe>

Non-existent aria-labelledby references

This <iframe> uses aria-labelledby to reference a non-existent element.

<iframe
    src="https://flights.example.com/landings/JFK"
    aria-labelledby="non-existing-landings-heading">
</iframe>

Referring an empty element via aria-labelledby

This <iframe> references an empty element via aria-labelledby, which doesn’t provide a name.

<span id="landings-heading"></span>
<iframe
    src="https://flights.example.com/landings/JFK"
    aria-labelledby="landings-heading">
</iframe>

WCAG techniques

Sufficient techniques

• H64: Using the title attribute of the iframe element

ACT Rules

• Iframe element has non-empty accessible name

Try It Yourself

Using a screen reader

1. Load the page and open a screen reader.
2. Open the screen reader’s element list (for example, NVDA + F7 on Windows or VO + U on Mac).
3. Choose the frames or landmarks view (depending on where iframes are listed in your screen reader).

Expected result: Each frame is listed by its descriptive title, such as “Conference agenda”.

Actual result: Untitled frames are announced simply as “frame” or by URL, making them hard to identify.

Inspecting the browser dev-tools

1. Open the Accessibility Tree panel.
2. Select the <iframe> element.

Expected result: The Name field shows the text you provided.

Actual result: If unnamed, Name is empty.

FAQ

Standards and Regulations

Personas impacted by this issue

• Screen Reader
• Braille

Related Issues

• frame-title-unique