Update Rule: frame-title-unique to ensure identical iframe serve same purpose

[jeeyyy]

Update: Instead of creating a new rule, will be update the rule frame-title-unique.

identical-iframes-same-purpose

This rule checks that iframe elements with identical accessible names embed the same resource or equivalent resources.

Tags

• wcag2
• wcag412

Matches / Selector

• iframe
  • which are in the same document tree
  • which are included in the accessibility tree

Checks

all:

• identical-frames-same-purpose

  • incomplete : Check that iframe have the same purpose, or are intentionally ambiguous.
  • pass: There are no other iframe's with the same name, that go to a different URL

• identical-frames-same-purpose-after

  • all matching nodes in the results are processed to find any identical nodes (same accessible name) and verified if they resolve to the same resource. Nodes which do not satisfy to the same resource are marked as incomplete.

References:

• ACT Rule: Iframes with identical accessible names serve equivalent purpose

[jeeyyy]

Testcases

<!-- Pass 1, same accessible name, same purpose (identical src)-->
<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>

<!-- Pass 2, same accessible name (using aria-label), same purpose (identical src) -->
<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>

<!-- Pass 3, same accessible name (using aria-labelledby), same purpose (identical src) -->
<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>

<!-- Pass 4, same accessible name, same purpose (identical file, but from different directories)-->
<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>

<!-- Pass 5, same accessible name (using title), same purpose (parts of the url are same) -->
<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>

<!-- Pass 6, same accessible name, same purpose (ignore trailing slash) -->
<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>

<!-- Pass 7, same accessible name, same purpose (parts of resource url are same) -->
<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>

<!-- Pass 8, same accessible name, same purpose (parts of resource url are same) -->
<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>

<!-- Pass 9, same accessibke same, same resource (url has inline link) -->
<iframe title="pass9" src="/home/#anchor1"></iframe>
<iframe title="pass9" src="/home/#anchor1"></iframe>

<!-- Pass 10, same accessible name, same resource (eclude index.html) -->
<iframe title="pass10" src="/home/index.html"></iframe>
<iframe title="pass10" src="/home/"></iframe>

<!-- Pass 11, same accessible name, same resource (exclude index.*) -->
<iframe title="pass10" src="/home/index.php"></iframe>
<iframe title="pass10" src="/home/"></iframe>

<!-- incomplete -->
<!-- incomplete 1, same accessible name but not same purpose -->
<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>

<!-- incomplete 2, same accessible name (using aria-label) but not same purpose -->
<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>

<!-- incomplete 3, same accessible name provided by title and aria-label, but not same purpose -->
<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 1, only one iframe within document tree -->
<iframe title="List of Contributors" src="../test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>

<!-- inapplicable 2, multiple iframe(s) having different accessible name  (by title)-->
<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 3, multiple iframe(s) but having differnt accessible name (by aria-label)-->
<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 4, multiple iframe(s) but having differnt accessible name (by aria-labelledby)-->
<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 5, multiple iframes, but only one of them is included in accessible 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 6, does not have accessible name (alt cannot be used for this)-->
<iframe alt="Some" src="../test-assets/iframe-unique-name-4b1c6c/page-one.html"> </iframe>

<!-- inapplicable 7, selector does not match - iframe -->
<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 8, does not have accessible name -->
<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 9, not included in the accessible tree -->
<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>

[jeeyyy]

Cross checking pre-existing rule frame-title-unique in axe. This does not consider or solve for frames that have identical names, to check if they satisfy the same purpose.

For example:

<iframe title="List of Contributors" src="some-dir/contributors.html"> </iframe>
<iframe title="List of Contributors" src="some-dir/contributors.html"> </iframe> 

is failed by the frame-title-unique, as against a pass as per the new rule proposed, given the iframe(s) with identical accessible name serve the same purpose.

@WilcoFiers can we brainstorm how we can extend this rule to adapt to the above scenarios.

[WilcoFiers]

I think pass 4 should be incomplete, I don't we can claim pages in different dirs with the same filename have the same purpose.

Same for pass 5, pass 7, pass 8

I think you should match all iframes with an accessible name. So all of the inapplicable cases, except for #7 and #9 should pass. What should also be inapplicable is 1) iframes without accessible name, 2) iframes without src.

I think we should update the existing iframe-title-unique rule, rather than create a new one. Please run this proposal by @dylanb as well.

[dylanb]

I agree with @WilcoFiers that this should replace the existing rule. I did not review all of the test cases, but the general rule definition looks good to me.