# Frames must have a unique title attribute

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

Screen reader users rely on frame titles to understand what each embedded region of a page contains. Many screen readers offer a feature that lists all frames on a page by their titles, allowing users to jump directly to the one they need. When frames lack titles or share identical titles, this feature becomes useless — users are left guessing which frame is which, or the screen reader falls back to unhelpful information like "frame," "javascript," a filename, or a URL.

This issue primarily affects users who are blind, deafblind, or who navigate with assistive technologies. It relates to **WCAG 2.0, 2.1, and 2.2 Success Criterion 4.1.2: Name, Role, Value (Level A)**, which requires that all user interface components have an accessible name that can be programmatically determined. When frames share a title, their accessible names fail to uniquely identify them, violating this criterion. The rule is also covered by **Trusted Tester guideline 12.D**, which requires that the combination of accessible name and description for each `<iframe>` describes its content, as well as **EN 301 549 section 9.4.1.2**.

## How to Fix It

1. **Add a `title` attribute** to every `<frame>` and `<iframe>` element.
2. **Make each title unique** across the page. No two frames should share the same title.
3. **Make each title descriptive.** The title should clearly summarize the content or purpose of the frame. Avoid generic labels like "frame" or "untitled."
4. **Match the frame's inner document `<title>`** to the `title` attribute on the frame element when possible. Some screen readers replace the frame's `title` attribute with the inner document's `<title>` element, so keeping them consistent ensures a reliable experience.

### Tips for Writing Good Frame Titles

- Keep titles brief but informative — describe what the frame contains, not just that it exists.
- Put the most distinctive information first. If you include a brand name, place it at the end so users don't have to hear it repeatedly while scanning a list of frames.
- Replace placeholder titles like "untitled" or "page" with meaningful descriptions.
- If the framed content has a visible heading, consider aligning the frame title with that heading for consistency.

## Examples

### Incorrect: Frames with Duplicate Titles

In this example, two iframes share the same `title`, making it impossible for screen reader users to tell them apart.

```html
<iframe src="/news.html" title="Company Updates"></iframe>
<iframe src="/events.html" title="Company Updates"></iframe>
```

### Incorrect: Frame with an Empty Title

An empty title provides no useful information to assistive technology users.

```html
<iframe src="/contact.html" title=""></iframe>
```

### Incorrect: Frames with No Title

Without any `title` attribute, screen readers fall back to announcing unhelpful information like the URL or "frame."

```html
<iframe src="/navigation.html"></iframe>
<iframe src="/main-content.html"></iframe>
```

### Correct: Frames with Unique, Descriptive Titles

Each frame has a distinct title that clearly describes its content.

```html
<iframe src="/news.html" title="Latest Company News"></iframe>
<iframe src="/events.html" title="Upcoming Events Calendar"></iframe>
```

### Correct: Frame Title Matching the Inner Document Title

For the best experience, align the `title` attribute with the `<title>` element in the framed document.

```html
<!-- Parent page -->
<iframe src="/contact.html" title="Contact Form"></iframe>
```

```html
<!-- contact.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contact Form</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form>
    <label for="email">Email</label>
    <input type="email" id="email" name="email">
    <button type="submit">Send</button>
  </form>
</body>
</html>
```

### Correct: Hiding Decorative or Non-Content Frames

If a frame is purely decorative or contains no meaningful content for users (such as a tracking pixel), hide it from assistive technology entirely instead of giving it a misleading title.

```html
<iframe src="/tracking-pixel.html" title="" aria-hidden="true" tabindex="-1"></iframe>
```

Note that this approach should only be used when the frame genuinely contains no content that any user would need to access.
