Iframes with identical accessible names serve equivalent purpose

  • Rule Typeatomic
  • Rule ID: 4b1c6c
  • Last modified: Aug 21, 2019
  • 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 above on level A and above
      • Outcome mapping:
        • Any failed outcomes: not satisfied
        • All passed outcomes: further testing is needed
        • An inapplicable outcome: further testing is needed
  • Input Aspects

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 in the same document tree that are included in the accessibility tree, and that have matching accessible names that do not only consist of whitespace.

Note: The test target for this rule is the full set of iframe elements within the same document tree that share the same matching accessible name.

Expectation

The iframes in each set of target elements embed the the same resource or equivalent resources.

Note: Resolving the embedded resource includes any redirects that are instant.

Assumptions

There are currently no assumptions

Accessibility Support

There are no major accessibility support issues known for this rule.

Background

Test Cases

Passed

Passed Example 1

Multiple iframe within document tree have the same accessible name (given by title) and embed the same resource.

<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>

Passed Example 2

Multiple iframe within document tree have the same accessible name (given by title and aria-label) and embed the same resource.

<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>

Passed Example 3

Multiple iframe within document tree have the same accessible name (given by aria-labelledby) and embed the same resource.

<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>

Passed Example 4

Multiple iframe within document tree have the same accessible name (given by title) and embed equivalent resources. Only the navigation options (bread crumbs and local sub menus) differ due to different placement in navigation hierarchy.

<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>

Passed Example 5

Multiple iframe within document tree have the same accessible name (given by title) and embed equivalent ressources.

<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>

Passed Example 6

Multiple iframe within document tree have the same accessible name (given by title) 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.

<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>

Passed Example 7

Multiple iframe within document tree have the same accessible name (given by title) and embed equivalent ressources. Ressources differ by the amount of information available and/or a differently worded information.

<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>

Passed Example 8

Multiple iframe within document tree have the same accessible name (given by title) and embed equivalent ressources. Each iframe refers to a different url that referenced different advertising content (giving by a third party) but embed ressources has equivalent purpose: showing an advertising.

<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>

Failed

Failed Example 1

Multiple iframe elements have the same accessible name (given by title) but don't embed equivalent ressources.

<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>

Failed Example 2

Multiple iframe elements have the same accessible name (given by aria-label) but don't embed equivalent ressources.

<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>

Failed Example 3

Multiple iframe elements have the same accessible name (given by title and aria-label) but don't embed equivalent ressources.

<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>

Inapplicable

Inapplicable Example 1

Usage of title attribute to describe the iframe content, and there is only one iframe within document tree.

<iframe title="List of Contributors" src="../test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>

Inapplicable Example 2

Multiple iframe elements in the document having different title descriptions as accessible name.

<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>

Inapplicable Example 3

Multiple iframe elements in the document having different aria-label descriptions as accessible name.

<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>

Inapplicable Example 4

Multiple iframe elements in the document having different aria-labelledby descriptions as accessible name.

<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>

Inapplicable Example 5

iframe having the same title within a given document tree, but one of them is not included in the accessibility tree.

<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>

Inapplicable Example 6

iframe are allowed to have the same title across different document trees. In this example iframe with id level2-frame1 has a parent document tree of iframe with id level1-frame2, and does not share the document tree of iframe with id level1-frame1.

<iframe id="level1-frame1" title="List of Contributors" src="../test-assets/iframe-unique-name-4b1c6c/page-one.html">
</iframe>
<iframe
	id="level1-frame2"
	title="List of Contributors 2"
	src="../test-assets/iframe-unique-name-4b1c6c/page-with-iframe.html"
>
	<!--
  Content of document includes an iframe:
  
  <iframe id="level2-frame1" title="List of Contributors" src="../test-assets/iframe-unique-name-4b1c6c/page-one.html">
  </iframe>
  -->
</iframe>

Inapplicable Example 7

alt cannot be used to provide accessible name for iframe.

<iframe alt="Some" src="../test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>

Inapplicable Example 8

Does not apply to object elements.

<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>

Inapplicable Example 9

No accessible name is provided

<iframe src="../test-assets/iframe-unique-name-4b1c6c/page-two.html"> </iframe>

<iframe src="../test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>

Inapplicable Example 10

Does not apply to iframe elements that are not included in the accessibility tree, via display:none.

<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>

Glossary

Accessible Name

key: accessible-name

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 (work in progress) and SVG Accessibility API Mappings, Name and Description (work in progress).

Equivalent resource

key: equivalent-resource

Non-identical resources can still be equivalent 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 seperate links, the resources are not equivalent.

Included in the accessibility tree

key: included-in-the-accessibility-tree

Elements included in the accessibility tree of platform specific accessibility APIs. Elements in the accessibility tree are exposed to assistive technologies, allowing users to interact with the elements in a way that meet 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 (work in progress) and the SVG accessibility API mappings (work in progress).

Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted with using sequential keyboard navigation regardless of the assistive technologies used, even though the element would not be included in the accessibility tree.

Matching characters

key: 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

key: outcome

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: Implementers 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.

Same resource

key: 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-insenstive, 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 normalised: 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.

Whitespace

key: whitespace

Characters that have the Unicode "White_Space" property in the Unicode properties list.

This includes:

  • all characters in the Unicode Separator categories, and
  • the following characters in the Other, Control category:

    • Character tabulation (U+0009)
    • Line Feed (LF) (U+000A)
    • Line Tabulation (U+000B)
    • Form Feed (FF) (U+000C)
    • Carriage Return (CR) (U+000D)
    • Next Line (NEL) (U+0085)

Changelog

Aug 21, 2019Editorial changes (#725)
Jul 26, 2019Editorial changes (#702)
Jul 19, 2019chore: run prettier (#688)
Jul 17, 2019chore: Various typos (#667)
Jun 26, 2019Fix link to equivalent-resource definition in two rules (#612)
May 9, 2019Chore: Adapt site to ACT Rules CR format (#547)
May 7, 2019Template update - Iframes with identical accessible names serve equiv… (#513)
May 2, 2019Rule: iframe-unique-name (#225)

Useful Links


Implementations

Tool NameCreated ByReport
AlfaSiteimproveView Report

Acknowledgements