Frame titles should be unique.

When multiple iframe elements on the same page share identical title attributes (or other accessible names), screen reader users have no way to tell them apart. Assistive technologies present a list of frames on the page, and if two or more frames have the same name, a user cannot determine which frame to navigate to without entering each one and inspecting its content.

This problem affects screen reader users most directly. When navigating by frame landmarks, the accessible name is the only piece of information available to distinguish one frame from another. Identical names force users into a trial-and-error process that wastes time and causes confusion.

This rule relates to WCAG 2.0 Success Criterion 4.1.2: Name, Role, Value (Level A). That criterion requires user interface components to have names that can be programmatically determined. When two iframe elements share the same accessible name but load different content, at least one of them has a name that does not accurately describe its purpose, which is a failure of 4.1.2.

There is one exception: if two iframe elements with the same title embed the same resource (or equivalent resources with the same content), the duplicate name is acceptable because the name accurately describes both frames.

How to fix it

Check every iframe on the page and make sure each one has a unique, descriptive title that communicates the specific content or purpose of that frame. Follow these steps:

1. Identify all iframe elements in the page.
2. Compare their title attributes (or aria-label / aria-labelledby values, whichever provides the accessible name).
3. If any two frames share the same accessible name but load different content, update one or both titles so each name is distinct and descriptive.

Choose titles that tell the user what the frame contains. Generic names like "Content frame" or "External content" are unhelpful even when unique. A good title describes what the user will find inside the frame, such as "Weather forecast widget" or "Customer support chat."

Examples

Incorrect: two iframes with the same title loading different content

<iframe title="Navigation" src="/primary-nav.html"></iframe>
<iframe title="Navigation" src="/footer-nav.html"></iframe>

A screen reader user who opens the frames list will see two entries both labeled "Navigation" with no way to distinguish between them.

Correct: each iframe has a unique, descriptive title

<iframe title="Primary navigation" src="/primary-nav.html"></iframe>
<iframe title="Footer navigation" src="/footer-nav.html"></iframe>

Each frame name tells the user exactly what it contains.

Correct: identical titles are acceptable when both iframes load the same resource

<iframe title="Company logo" src="/logo-banner.html"></iframe>
<iframe title="Company logo" src="/logo-banner.html"></iframe>

Because both frames embed the same resource, the shared name accurately describes both of them. This does not create a distinguishability problem since the content is equivalent.

Incorrect: using aria-label with duplicate names on different content

<iframe aria-label="Product details" src="/product-specs.html"></iframe>
<iframe aria-label="Product details" src="/product-reviews.html"></iframe>

The aria-label attribute also provides the accessible name. Duplicate values cause the same problem as duplicate title attributes.

Correct: unique aria-label values

<iframe aria-label="Product specifications" src="/product-specs.html"></iframe>
<iframe aria-label="Product reviews" src="/product-reviews.html"></iframe>

Learn more:

W3C Reference

Understanding SC 4.1.2: Name, Role, Value

→

W3C Reference

Using the title attribute of the iframe element

→

MDN Reference

HTML iframe element

→