# Frame titles should be unique.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/labels-and-names/frame-title-unique
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

```html
<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

```html
<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

```html
<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

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