R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Accessible Frame and Iframe Titles

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


How to Fix the Problem

All <frame> and <iframe> elements must include a title attribute with a unique and descriptive value. This title must clearly communicate the purpose or content of the frame to screen reader users.

Example Fix:

html
<iframe src="schedule.html" title="Weekly Meeting Schedule"></iframe>

Best Practices:

  • Avoid placeholders like “untitled page” or generic phrases such as “frame1”.

  • Ensure uniqueness: Each frame on a page must have a distinct title.

  • Prioritize essential content: Place unique descriptive information first in the title. If including brand or company names, they should follow the core description to reduce repetitive reading for assistive tech users.

  • Match the top heading (<h1>) of the framed content with the frame’s title for consistency and clarity.

  • Duplicate the title inside the frame document’s <title> tag, as some screen readers will replace the title attribute with this internal <title> content.

html
<!-- Outside the iframe -->
<iframe src="report.html" title="Quarterly Sales Report"></iframe>
<!– Inside report.html –>
<head>
<title>Quarterly Sales Report</title>
</head>


Why it Matters

Screen reader users rely on frame titles to navigate and understand the structure of a web page. Without meaningful titles:

  • Users may become disoriented or confused.

  • Screen readers may announce non-helpful defaults like “frame”, the file name, or even the URL, which provide little to no context.

  • It becomes difficult to distinguish between frames, especially on pages with multiple embedded resources.

Descriptive titles improve the navigability and usability of web content for users relying on assistive technologies, thereby ensuring inclusive access.


Rule Description

This rule ensures that every <frame> and <iframe> element in the document includes a title attribute that is not empty and provides meaningful information about the frame’s content.


The Algorithm (in Simple Terms)

  1. Check every frame or iframe in the HTML.

  2. Confirm it has a title attribute.

  3. Ensure the title value is not empty.

  4. Verify that the title is unique across the page.

Leave A Comment