Ensure <iframe> and <frame> elements have an accessible name
This rule checks that each `iframe` element has a non-empty accessible name.
Autoren: Jey Nandakumar, Tom Brunet, Wilco Fiers
Finanzierung: WAI-Tools
This rule applies to iframe elements that are included in the accessibility tree except if at least one of the following is true:
iframe has a negative tabindex attribute value; oriframe is marked as decorative.Each target element has an accessible name that is not empty ("").
The frame element is deprecated, this rule does not consider frame or frameset elements.
Due to inconsistencies in handling focus on iframe, this rule ignores iframe elements for which there is an attempt to hide them from assistive technologies. Whether iframe elements that are inapplicable to this rule still require an accessible name varies between browsers.
If an iframe is not perceived by the user as a single control, it does not qualify as a user interface component under WCAG 2. In such a scenario, failing this rule would not fail success criterion 4.1.2. Unless the iframe is both removed from the accessibility tree and removed from sequential focus navigation, they usually are considered to be user interface components.
iframe elements is currently inconsistent. Some examples of inconsistencies include (but are not limited to):
aria-label and only announces title attribute as an accessible nameiframe elements, regardless of if they are focusable or if they have an accessible name.iframe elements to the first focusable element inside that iframe. This redirect makes it appear as though the iframe never receives focus. This occurs even if the iframe has a non-negative tabindex attribute value.iframe elements. This ensures that the contents of iframe elements can be scrolled and accessed by using the keyboard. This must not be circumvented by using a negative tabindex, as this will make the iframe completely inaccessible for keyboard navigation.This iframe element gets its accessible name from the title attribute.
<iframe title="Grocery List" src="/test-assets/SC4-1-2-frame-doc.html"> </iframe>
This iframe element gets its accessible name from the aria-label attribute.
<iframe aria-label="Grocery list" src="/test-assets/SC4-1-2-frame-doc.html"> </iframe>
This iframe element gets its accessible name from the content of the div referenced with the aria-labelledby attribute.
<div id="frame-title-helper">Grocery List</div>
<iframe aria-labelledby="frame-title-helper" src="/test-assets/SC4-1-2-frame-doc.html"> </iframe>
This iframe element has an empty ("") accessible name. The name attribute is not used in computing the accessible name of iframe elements.
<iframe name="Grocery List" src="/test-assets/SC4-1-2-frame-doc.html"> </iframe>
This iframe element has no attributes that would give it a non-empty ("") accessible name.
<iframe src="/test-assets/SC4-1-2-frame-doc.html"> </iframe>
This iframe element has an empty ("") accessible name because the title attribute has an empty string as its value.
<iframe title="" src="/test-assets/SC4-1-2-frame-doc.html"> </iframe>
This iframe element has an empty ("") accessible name because the title attribute value is trimmed of whitespace by the accessible name computation.
<iframe title=" " src="/test-assets/SC4-1-2-frame-doc.html"> </iframe>
This page has no iframe element.
<button>take me somewhere</button>
This iframe is not included in the accessibility tree because of setting a style of display: none;.
<iframe style="display:none;" src="/test-assets/SC4-1-2-frame-doc.html"></iframe>
This iframe element has a negative tabindex attribute value.
<iframe tabindex="-1" src="/test-assets/SC4-1-2-frame-doc.html" style="height: 250px"> </iframe>
This iframe element has an explicit semantic role of none.
<iframe src="/test-assets/SC4-1-2-frame-doc.html" role="none"> </iframe>