Accessibility Rule: Frames must have an accessible name

About This Accessibility Rule

Screen reader users can pull up a list of all frames on a page and navigate between them using their titles. When frames lack accessible names, users hear generic labels like “frame,” “JavaScript,” or a raw URL — none of which convey the purpose or content of the frame. This forces users to enter each frame just to figure out what it contains, which is time-consuming and frustrating.

This issue primarily affects users who are blind or deafblind and rely on assistive technology, but it also impacts users with mobility disabilities who navigate by frame lists or landmarks.

Relevant WCAG Success Criteria

This rule relates to WCAG 2.2 Success Criterion 4.1.2: Name, Role, Value (Level A), which requires that all user interface components have a name that can be programmatically determined. Frames are interactive containers that users navigate into and out of, so they must have an accessible name.

It is also explicitly required by Section 508 (§1194.22(i)), which states that frames shall be titled with text that facilitates frame identification and navigation.

How to Fix It

Give every <iframe> and <frame> element a clear, descriptive accessible name using one of these methods:

title attribute — The most common approach. Add a title that briefly describes the frame’s content.
aria-label attribute — Provides an accessible name directly on the element.
aria-labelledby attribute — References another element’s text as the accessible name.

Tips for Writing Good Frame Titles

Be brief and descriptive. A title like “Product search results” is far more useful than “frame1” or “content.”
Make each title unique. If you have multiple frames, each one should have a distinct title so users can tell them apart.
Match the frame’s internal document title. Some screen readers replace the frame’s title attribute with the <title> element inside the framed document. For consistency, keep them the same or very similar.
Avoid placeholder text. Titles like “untitled” or “iframe” provide no useful information.
Put unique information first. If you include a brand name, place it after the descriptive content so users hear the most useful information immediately.

Examples

Incorrect: `<iframe>` Without an Accessible Name

The frame has no title, aria-label, or aria-labelledby, so screen readers cannot describe it.

<iframe src="https://example.com/video-player"></iframe>

Incorrect: Empty `title` Attribute

An empty title is the same as having no title at all.

<iframe src="https://example.com/video-player" title=""></iframe>

Correct: Using the `title` Attribute

<iframe src="https://example.com/video-player" title="Product demo video player"></iframe>

Correct: Using `aria-label`

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

Correct: Using `aria-labelledby`

<h2 id="chat-heading">Live Chat Support</h2>
<iframe src="https://example.com/chat" aria-labelledby="chat-heading"></iframe>

Correct: Multiple Frames With Unique Titles

When a page contains several frames, each one should have a distinct, descriptive title.

<iframe src="/navigation" title="Site navigation menu"></iframe>
<iframe src="/content" title="Main article content"></iframe>
<iframe src="/ads" title="Sponsored advertisements"></iframe>

Correct: Matching the Frame Title to the Document Title

For the best experience, align the title attribute on the <iframe> with the <title> element inside the framed document.

<!-- Parent page -->

<iframe src="contact-form.html" title="Contact us form"></iframe>

<!-- contact-form.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contact us form</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form>
    <label for="email">Email</label>
    <input type="email" id="email">
    <button type="submit">Send</button>
  </form>
</body>
</html>