R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Ensuring Unique Titles for Frames and Iframes

Rule ID: frame-title-unique
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549


How to Fix the Problem

To ensure accessibility for screen reader users, every <frame> and <iframe> element must have a unique and descriptive title attribute. Here’s how to address this issue:

✅ Add a Title Attribute

Use the title attribute to describe the content of the frame:

html
<iframe src="frame-content.html" title="User Login Panel">frame body</iframe>

✅ Synchronize the Embedded Page’s <title> Tag

It’s recommended that the embedded HTML document also includes a matching <title> element inside the <head> section. For example:

html
<head>
<title>User Login Panel</title>
</head>

Some screen readers prioritize the internal document title over the iframe’s title attribute, so matching them helps ensure consistency.

✅ Best Practices for Writing Frame Titles

  • Avoid Placeholder Titles: Replace defaults like “Untitled Page” with meaningful names.

  • Ensure Uniqueness: Each frame title should be distinct across all frames on a page.

  • Front-Load Unique Info: Put identifying content first, and move brand names to the end.

  • Align with the <h1> Tag: Try to match or closely reflect the page’s primary heading.


Why It Matters

Screen reader users rely heavily on frame titles to understand and navigate content embedded via iframes. If frames are untitled or share duplicated titles, users may hear unhelpful terms like “frame,” “javascript,” or even URLs, which offer no meaningful context.

Properly titled frames enable screen reader software to compile a navigable list of all frames on the page, allowing users to jump directly to the content they need without confusion or guesswork. This greatly improves user efficiency, satisfaction, and overall digital accessibility.


Rule Description

All <frame> and <iframe> elements must include a unique title attribute that accurately describes the content or function of the frame for assistive technologies.


The Algorithm (in Simple Terms)

  1. Find all <frame> and <iframe> elements on the page.

  2. Check each element for a non-empty title attribute.

  3. Ensure no two elements share the same title.

  4. Mark as a failure if any frame is missing a title or has a duplicate.

Leave A Comment