Test cases: 7 passing, 9 failing (16 total)
This page contains various iframe elements to test accessible name computation according to WCAG guidelines.
This iframe has a descriptive title attribute that explains its purpose.
<iframe id="iframe-title-pass" src="about:blank" title="Contact form for customer support" width="400" height="200"></iframe>
This iframe uses aria-labelledby to reference text elsewhere on the page for its accessible name.
<h4 id="map-heading">Interactive Map of Store Locations</h4>
<iframe id="iframe-labelledby-pass" src="about:blank" aria-labelledby="map-heading" width="400" height="200"></iframe>
This iframe has an aria-label attribute that provides its accessible name.
<iframe id="iframe-aria-label-pass" src="about:blank" aria-label="Product demonstration video" width="400" height="200"></iframe>
This iframe has both title and aria-label attributes, with aria-label taking precedence.
<iframe id="iframe-both-pass" src="about:blank" title="Weather forecast widget" aria-label="5-day weather forecast for your location" width="400" height="200"></iframe>
This hidden iframe doesn't need a title because it is not perceivable to users.
<iframe id="iframe-hidden-pass" src="about:blank" style="display:none;" width="400" height="200"></iframe>
This iframe has no title attribute or other accessible name.
<iframe id="iframe-no-title-fail" src="about:blank" width="400" height="200"></iframe>
This iframe has an empty title attribute, which doesn't provide an accessible name.
<iframe id="iframe-empty-title-fail" src="about:blank" title="" width="400" height="200"></iframe>
This iframe has a generic title that doesn't describe its purpose or content.
<iframe id="iframe-generic-title-fail" src="about:blank" title="Frame" width="400" height="200"></iframe>
This iframe uses its URL as the title, which is not descriptive.
<iframe id="iframe-url-title-fail" src="about:blank" title="https://example.com/widget" width="400" height="200"></iframe>
This iframe has an empty aria-label attribute.
<iframe id="iframe-empty-arialabel-fail" src="about:blank" aria-label="" width="400" height="200"></iframe>
This iframe has an aria-labelledby attribute pointing to an ID that doesn't exist.
<iframe id="iframe-broken-labelledby-fail" src="about:blank" aria-labelledby="non-existent-id" width="400" height="200"></iframe>
This iframe contains only whitespace characters in its title attribute.
<iframe id="iframe-whitespace-title-fail" src="about:blank" title=" " width="400" height="200"></iframe>
This iframe's title contains only punctuation, which may not be announced by some screen readers.
<iframe id="iframe-punctuation-title-fail" src="about:blank" title="..." width="400" height="200"></iframe>
The following examples test iframe accessibility in different browser embedding contexts.
This iframe uses srcdoc to embed HTML content with a proper title.
<iframe id="iframe-srcdoc-pass" srcdoc="<html><head><title>Embedded HTML Content</title></head>..." title="Feedback form embedded content" width="400" height="200"></iframe>
This iframe uses srcdoc to embed HTML content but lacks a title attribute.
<iframe id="iframe-srcdoc-no-title-fail" srcdoc="<html><head><title>Embedded HTML Content</title></head>..." width="400" height="200"></iframe>
This iframe has both a title and aria-describedby for additional context.
This chat widget allows you to connect with our support team in real-time during business hours.
<p id="iframe-description">This chat widget allows you to connect with our support team in real-time during business hours.</p>
<iframe id="iframe-describedby-pass" src="about:blank" title="Live Chat Support" aria-describedby="iframe-description" width="400" height="200"></iframe>