Proposed Iframe elements with identical accessible names have equivalent purpose
Description
This rule checks that iframe elements with identical accessible names embed the same resource or equivalent resources.
Applicability
This rule applies to any set of any two or more iframe elements which:
- are in the same web page (HTML); and
- are included in an accessibility tree; and
- that have matching accessible names that are not empty (
"").
Expectation
The iframe elements in each set of target elements embed the same resource or equivalent resources.
Assumptions
This rule assumes that, within the context of the test subject, the description provided by the accessible name of an iframe can only accurately describe one resource (notably, homonyms alone are not used as iframe names). Thus, if two or more iframe elements have the same accessible name but embed different resources, at least one of them does not describe its purpose.
Accessibility Support
This rule assumes that assistive technologies are exposing all iframe elements on the page in the same way no matter which document tree they are in. If an assistive technology requires the user to “enter” an iframe or a shadow tree before exposing its content (notably nested iframe), then it is possible for two iframe to have identical name but embed different resources without failing Success Criterion 4.1.2: Name, Role, Value (if said iframe are in separate documents or shadow trees)
Background
When determining if target elements embed the same resource, resolving the embedded resource includes any redirects that are instant.
Bibliography
- CSS Scoping Module Level 1 (editor’s draft)
- H64: Using the title attribute of the frame and iframe elements
- Understanding Success Criterion 4.1.2: Name, Role, Value
Accessibility Requirements Mapping
4.1.2 Name, Role, Value (Level A)
- Learn more about 4.1.2 Name, Role, Value
- Required for conformance to WCAG 2.0 and later on level A and higher.
- Outcome mapping:
- Any
failedoutcomes: success criterion is not satisfied - All
passedoutcomes: success criterion needs further testing - An
inapplicableoutcome: success criterion needs further testing
- Any
Input Aspects
The following aspects are required in using this rule.
Test Cases
These HTML files are used in several examples:
File /test-assets/iframe-unique-name-4b1c6c/page-one.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page One</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- Breadcrumb -->
Root > Page One
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
File /test-assets/iframe-unique-name-4b1c6c/sub-dir/page-one.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page One</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- Breadcrumb -->
Root > Sub Dir > Page One
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
File /test-assets/iframe-unique-name-4b1c6c/page-one-copy.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page One</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- Breadcrumb -->
Root > Page One
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
File /test-assets/iframe-unique-name-4b1c6c/page-three-same-as-page-one.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page One</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
File /test-assets/iframe-unique-name-4b1c6c/advertising-one.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Advertising One</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>This is my random advertising</h1>
<p>Please, buy things!</p>
</body>
</html>
File /test-assets/iframe-unique-name-4b1c6c/advertising-two.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Advertising Two</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>This is an other random advertising</h1>
<p>Never know which content will appear because advertising are managed bu a third party.</p>
<p>But please, buy more things!</p>
</body>
</html>
File /test-assets/iframe-unique-name-4b1c6c/page-two.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Two</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<article>
Lorem Ipsum...
</article>
</body>
</html>
Passed
Passed Example 1
Two iframe elements within the same document tree have the same accessible name (given by the title attribute) and embed the same resource.
<html lang="en">
<iframe title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
<iframe title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
</html>
Passed Example 2
Two iframe elements within the same document tree have the same accessible name (given by the title and aria-label attributes) and embed the same resource.
<html lang="en">
<iframe title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
<iframe aria-label="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
</html>
Passed Example 3
Two iframe elements within the same document tree have the same accessible name (given by the aria-labelledby attribute and corresponding elements) and embed the same resource.
<html lang="en">
<div id="desc-for-title">List of Contributors</div>
<iframe aria-labelledby="desc-for-title" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
<div id="desc-for-title1">List of Contributors</div>
<iframe aria-labelledby="desc-for-title1" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
</html>
Passed Example 4
Two iframe elements within the same document tree have the same accessible name (given by the title attribute) and embed equivalent resources. Only the navigation options (bread crumbs and local sub menus) differ due to different placement in navigation hierarchy.
<html lang="en">
<iframe title="Contact us" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
<iframe title="Contact us" src="/test-assets/iframe-unique-name-4b1c6c/sub-dir/page-one.html"> </iframe>
</html>
Passed Example 5
Two iframe elements within the same document tree have the same accessible name (given by the title attribute) and embed equivalent resources.
<html lang="en">
<iframe title="Contact us" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
<iframe title="Contact us" src="/test-assets/iframe-unique-name-4b1c6c/page-one-copy.html"> </iframe>
</html>
Passed Example 6
Two iframe elements within the same document tree have the same accessible name (given by the title attribute) and embed the same resource. src attributes only differ due to trailing slashes, but resolves to the same resource after redirects caused by user agent.
<html lang="en">
<iframe title="Contact us" src="/test-assets/iframe-unique-name-4b1c6c/sub-dir-2/"> </iframe>
<iframe title="Contact us" src="/test-assets/iframe-unique-name-4b1c6c/sub-dir-2"> </iframe>
</html>
Passed Example 7
Two iframe elements within the same document tree have the same accessible name (given by the title attribute) and embed equivalent resources. Resources differ by the amount of information available and/or a differently worded information.
<html lang="en">
<iframe title="Contact us" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
<iframe title="Contact us" src="/test-assets/iframe-unique-name-4b1c6c/page-three-same-as-page-one.html"> </iframe>
</html>
Passed Example 8
Two iframe elements within the same document tree have the same accessible name (given by the title attribute) and embed equivalent resources. Each iframe refers to a different url that referenced different advertising content (giving by a third party) but embed resources has equivalent purpose: showing an advertising.
<html lang="en">
<iframe title="advertising" src="/test-assets/iframe-unique-name-4b1c6c/advertising-one.html"> </iframe>
<iframe title="advertising" src="/test-assets/iframe-unique-name-4b1c6c/advertising-two.html"> </iframe>
</html>
Passed Example 9
All three iframe elements have the same accessible name. The second iframe (with id "light" ) is only part of the light tree. When the shadow tree is attached to host and flattened, this iframe is overwritten and therefore not part of the flat tree. Hence, only the first and third iframe are considered by this rule and they both point to the same resource.
<iframe id="always" title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
<div id="host">
<iframe id="light" title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-two.html"> </iframe>
</div>
<script>
const host = document.getElementById('host')
const shadowRoot = host.attachShadow({ mode: 'open' })
shadowRoot.innerHTML =
'<iframe id="shadow" title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>'
</script>
Passed Example 10
The browsing context of the iframe with id "container" has the browsing context of the main document as an ancestor browsing context. Hence, they share the same top-level browsing context (namely, the browsing context of the main document) and are part of the same web page (HTML). Therefore, both iframe with id "top-level" and "nested" are considered and, since they embed the same document, the rule passes.
<iframe id="top-level" title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html">
</iframe>
<iframe
id="container"
srcdoc="<iframe id='nested' title='List of Contributors' src='/test-assets/iframe-unique-name-4b1c6c/page-one.html'> </iframe>"
></iframe>
Failed
Failed Example 1
Two iframe elements within the same document tree have the same accessible name (given by the title attribute) but don’t embed equivalent resources.
<html lang="en">
<iframe title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
<iframe title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-two.html"> </iframe>
</html>
Failed Example 2
Two iframe elements within the same document tree have the same accessible name (given by the aria-label attribute) but don’t embed equivalent resources.
<html lang="en">
<iframe aria-label="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
<iframe aria-label="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-two.html"> </iframe>
</html>
Failed Example 3
Two iframe elements within the same document tree have the same accessible name (given by the title and aria-label attributes) but don’t embed equivalent resources.
<html lang="en">
<iframe title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
<iframe aria-label="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-two.html"> </iframe>
</html>
Failed Example 4
The browsing context of the iframe with id "container" has the browsing context of the main document as an ancestor browsing context. Hence, they share the same top-level browsing context (namely, the browsing context of the main document) and are part of the same web page (HTML). Therefore, both iframe with id "top-level" and "nested" are considered and the rule fails.
<iframe id="top-level" title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html">
</iframe>
<iframe
id="container"
srcdoc="<iframe id='nested' title='List of Contributors' src='/test-assets/iframe-unique-name-4b1c6c/page-two.html'> </iframe>"
></iframe>
Inapplicable
Inapplicable Example 1
There is only one iframe element within the document tree. Therefore, there is no set of two or more iframe elements with the same accessible name and the rule is inapplicable.
<html lang="en">
<iframe title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
</html>
Inapplicable Example 2
Each of the two iframe elements within the document tree has a different accessible name (given by the title attribute). Therefore, there is no set of two or more iframe elements with the same accessible name and the rule is inapplicable.
<html lang="en">
<iframe title="List of Contributors to Repository 1" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html">
</iframe>
<iframe title="List of Contributors to Repository 2" src="/test-assets/iframe-unique-name-4b1c6c/page-two.html">
</iframe>
</html>
Inapplicable Example 3
Each of the two iframe elements within the document tree has a different accessible name (given by the aria-label attribute). Therefore, there is no set of two or more iframe elements with the same accessible name and the rule is inapplicable.
<html lang="en">
<iframe aria-label="List of Contributors to Repository 1" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html">
</iframe>
<iframe aria-label="List of Contributors to Repository 2" src="/test-assets/iframe-unique-name-4b1c6c/page-two.html">
</iframe>
</html>
Inapplicable Example 4
Each of the two iframe elements within the document tree has a different accessible name (given by the aria-labelledby attribute and matching elements). Therefore, there is no set of two or more iframe elements with the same accessible name and the rule is inapplicable.
<html lang="en">
<div id="desc-for-title">List of Contributors</div>
<iframe aria-labelledby="desc-for-title" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
<div id="desc-for-title1">List of Reviewers</div>
<iframe aria-labelledby="desc-for-title1" src="/test-assets/iframe-unique-name-4b1c6c/page-two.html"> </iframe>
</html>
Inapplicable Example 5
Both iframe elements have the same accessible name (given by the title attribute) within the same document tree, but one of them is not included in the accessibility tree. Therefore, there is no set of two or more iframe elements that are included in the accessibility tree and have the same accessible name, and the rule is inapplicable.
<html lang="en">
<iframe aria-hidden="true" title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html">
</iframe>
<iframe title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-two.html"> </iframe>
</html>
Inapplicable Example 6
The alt attribute does not provide an accessible name for iframe elements. Therefore, these iframe elements do not have an accessible name and the rule is inapplicable.
<html lang="en">
<iframe alt="Some" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
<iframe alt="Some" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
</html>
Inapplicable Example 7
The rule does not apply to object elements.
<html lang="en">
<object title="List of Contributors" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </object>
<object aria-label="List of Contributors Clone" src="/test-assets/iframe-unique-name-4b1c6c/page-two.html"> </object>
</html>
Inapplicable Example 8
These iframe elements do not have accessible names.
<html lang="en">
<iframe src="/test-assets/iframe-unique-name-4b1c6c/page-two.html"> </iframe>
<iframe src="/test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>
</html>
Inapplicable Example 9
These iframe elements are not included in the accessibility tree, because of the display:none styling.
<html lang="en">
<iframe style="display:none;" title="Document One" src="/test-assets/iframe-unique-name-4b1c6c/page-one.html">
</iframe>
<iframe style="display:none;" aria-label="Document One" src="/test-assets/iframe-unique-name-4b1c6c/page-two.html">
</iframe>
</html>
Glossary
Accessible Name
The accessible name is the programmatically determined name of a user interface element that is included in the accessibility tree.
The accessible name is calculated using the accessible name and description computation.
For native markup languages, such as HTML and SVG, additional information on how to calculate the accessible name can be found in HTML Accessibility API Mappings 1.0, Accessible Name and Description Computation (working draft) and SVG Accessibility API Mappings, Name and Description (working draft).
For more details, see examples of accessible name.
Note: As per the accessible name and description computation, each element always has an accessible name. When no accessible name is provided, the element will nonetheless be assigned an empty ("") one.
Note: As per the accessible name and description computation, accessible names are flat string trimmed of leading and trailing whitespace. Notably, it is not possible for a non-empty accessible name to be composed only of whitespace since these must be trimmed.
Equivalent resource
Non-identical resources can still be equivalent resources by equally complying to the expectation formed by the user when navigating to them, thus serving an equivalent purpose. This would usually involve that the advertised key content is the same.
Web pages and documents (e.g. PDFs, office formats etc.) may be equivalent resources, even if the resources:
- are located on different URLs, including different domains
- present different navigation options, e.g. through bread crumbs or local sub menus
- contain different amounts of information and/or differently worded information
- use different layouts.
If all resources cover the user’s expectations equally well, the resources are considered to be equivalent.
Note: The user’s expectations for the resource can be formed by different things, e.g. the name of the link leading to the resource, with or without the context around the link. This depends on the accessibility requirement that is tested.
Note: If the same content is presented in different formats or languages, the format or language itself is often part of the purpose of the content, e.g. an article as both HTML and PDF, an image in different sizes, or an article in two different languages. If getting the same content in different formats or languages is the purpose of having separate links, the resources are not equivalent.
Focusable
An element is focusable if one or both of the following are true:
- the element is part of sequential focus navigation; or
- the element has a tabindex value that is not null.
Exception: Elements that lose focus during a period of up to 1 second after gaining focus, without the user interacting with the page the element is on, are not considered focusable.
Notes:
- The 1 second time span is an arbitrary limit which is not included in WCAG. Given that scripts can manage the focus state of elements, testing the focusability of an element consistently would be impractical without a time limit.
- The tabindex value of an element is the value of the tabindex attribute parsed using the rules for parsing integers. For the tabindex value to be different from null, it needs to be parsed without errors.
Included in the accessibility tree
Elements included in the accessibility tree of platform specific accessibility APIs are exposed to assistive technologies. This allows users of assistive technology to access the elements in a way that meets the requirements of the individual user.
The general rules for when elements are included in the accessibility tree are defined in the core accessibility API mappings. For native markup languages, such as HTML and SVG, additional rules for when elements are included in the accessibility tree can be found in the HTML accessibility API mappings (working draft) and the SVG accessibility API mappings (working draft).
For more details, see examples of included in the accessibility tree.
Programmatically hidden elements are removed from the accessibility tree. However, some browsers will leave focusable elements with an aria-hidden attribute set to true in the accessibility tree. Because they are hidden, these elements are considered not included in the accessibility tree. This may cause confusion for users of assistive technologies because they may still be able to interact with these focusable elements using sequential keyboard navigation, even though the element should not be included in the accessibility tree.
Matching characters
A sequence of characters is considered to match another if, after removing leading and trailing space characters and replacing remaining occurrences of one or more space characters with a single space, the two sequences of characters are equal character-by-character, ignoring any differences in letter casing.
Outcome
An outcome is a conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:
- Inapplicable: No part of the test subject matches the applicability
- Passed: A test target meets all expectations
- Failed: A test target does not meet all expectations
Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.
Note: Implementations using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such “interim” results can be expressed with the incomplete outcome.
Programmatically Hidden
An HTML element is programmatically hidden if either it has a computed CSS property visibility whose value is not visible; or at least one of the following is true for any of its inclusive ancestors in the flat tree:
- has a computed CSS property
displayofnone; or - has an
aria-hiddenattribute set totrue
Note: Contrary to the other conditions, the visibility CSS property may be reverted by descendants.
Note: The HTML standard suggests setting the CSS display property to none for elements with the hidden attribute. While not required by HTML, all modern browsers follow this suggestion. Because of this the hidden attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS display property can reveal elements with the hidden attribute.
Same resource
Two or more resources can be the same resource even though the URLs for them are different. This can be due to URL parsing, server settings, redirects and DNS aliasing.
If the parsed URLs for two resources are identical, the resources are the same resource.
Depending on the server, URLs can either be case-sensitive or case-insensitive, meaning that <a href="page1.html"> and <a href="Page1.html"> lead to either the same or two different pages.
Fully parsed URLs can be different, but still lead to the same resource after making the HTTP request, due to redirects and DNS aliasing. For example, these URLs are all fully normalized: http://example.com/, http://www.example.com/, https://www.example.com/. The server can however be configured to serve the same site for http and https, and the same site for example.com and www.example.com. This is common, but not guaranteed.
Some types of redirects are also caused by user agents, e.g. ensuring that http://example.com/ and http://example.com resolve to the same resource.
On the other hand, identical relative URLs do not necessarily resolve to the same resource, even if they are in the same web page (HTML). This happen because external content can be included through iframe and URLs in or out of it will resolve relatively to different base URLs.
Web page (HTML)
An HTML web page is the set of all fully active documents which share the same top-level browsing context.
Note: Nesting of browsing context mostly happens with iframe and object. Thus a web page will most of the time be a “top-level” document and all its iframe and object (recursively).
Note: Web pages as defined by WCAG are not restricted to the HTML technology but can also include, e.g., PDF or DOCX documents.
Note: Although web pages as defined here are sets of documents (and do not contain other kind of nodes), one can abusively write that any node is “in a web page” if it is a shadow-including descendant of a document that is part of that web page.
Rule Versions
This is the first version of this ACT rule.
Implementations
This section is not part of the official rule. It is populated dynamically and not accounted for in the change history or the last modified date.
| Implementation | Type | Consistency | Report |
|---|---|---|---|
| Alfa (fully automated) 0.57.2 | Automated tool | Partial |  |
| Alfa (semi-automated) 0.57.2 | Semi-automated tool | Consistent | |
| Axe DevTools Pro 4.37.1 | Semi-automated tool | Partial | |
| Axe-core 4.8.1 | Automated tool | Partial | |
| QualWeb 3.0.0 | Automated tool | Partial | |
| Total Validator 17.1.0 | Linter | Partial | |
| Total Validator (+Browser) 17.3.0 | Automated tool | Partial | |