Features

Make sure <iframe> and <frame> elements have an accessible name

Rule ID: frame-title User Impact: serious Guidelines: WCAG 2.0

Ensure that each <iframe> and <frame> element includes a descriptive title attribute to accurately convey its content and purpose.

About This Rule

This rule ensures that all <iframe> and <frame> elements have descriptive title attributes, facilitating better navigation and understanding for users of assistive technologies.

Why It Matters

Screen reader users depend on frame titles to understand the content and function of frames within a webpage. Without descriptive titles, navigating through multiple frames becomes challenging, leading to confusion and a diminished user experience. Providing clear titles enhances accessibility by allowing users to quickly identify and navigate to the desired frame.

How to Fix

To ensure each frame is accessible:

  • Add a Descriptive Title: Assign a brief, clear, informative, and unique title attribute to each <iframe> or <frame> element. For example:
    Copy code
    <iframe src="example.html" title="User Comments Section"></iframe>
  • Synchronize with Document Title: It's best practice to ensure that the <title> element within the framed document matches the frame's title attribute. Some screen readers may replace the contents of the title attribute on the frame with the contents of the title element inside the frame. As a result, it’s safest and most accessible to have the same text in both locations. :contentReference[oaicite:0]{index=0}
  • Avoid Placeholder Titles: Replace generic titles like "untitled page" with specific descriptions that reflect the frame's content.
  • Prioritize Unique Information: Place distinguishing information at the beginning of the title. If including a company name or brand, position it after the unique content to enhance clarity for screen reader users.
  • Align with Page Headings: Ensure the frame's title corresponds with the top heading (ideally an <h1>) within the frame. While they don't need to be identical, similarity aids in understanding the frame's purpose.

Example

Incorrect

An iframe without a title or with a non-descriptive title:

Copy code
<iframe src="chat.html"></iframe>

<iframe src="chat.html" title="iframe"></iframe>

Correct

An iframe with a descriptive title:

Copy code
<iframe src="chat.html" title="Live Support Chat Window"></iframe>

Other Rules

Interested in other web accessibility rules? Please see these other rules: