Make sure <iframe> and <frame> elements have an accessible name
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: -
Synchronize with Document Title: It's best practice to ensure that the
<title>
element within the framed document matches the frame'stitle
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:
Correct
An iframe with a descriptive title:
Other Rules
Interested in other web accessibility rules? Please see these other rules: