This document provides information about the related Acquia Optimize check:
Iframe elements with identical accessible names must embed the same resource or equivalent resources.
Equivalent resources are different versions of the same content that provide output based on the expectation of users.
They differ in appearance, format, or navigation but provide the same information.
For example, consider a page that contains two iframes with the same name. On this page:
When users encounter multiple iframes with the same accessible name, they expect to find the same essential content. If one iframe leads to a detailed webpage and another to an unrelated document, the inconsistency can confuse users, particularly those who rely on assistive technologies. They might not be able to interact with or fully understand the content.
Consistency is crucial for users with cognitive disabilities or those who rely on predictable content structures. Misleading identical names make navigation and comprehension much harder, and reduce the effectiveness of assistive tools such as screen readers. Ensure that equivalent resources are embedded when you use the same accessible name to help maintain a coherent user experience, so that all users can access the content seamlessly.
This check affects users who have:
This section gives some examples of the issue.
The website for a running event features two embedded iframes in different locations on the same page. Each iframe displays the results list for a different race: one for the "Spring City Half Marathon" and the other for the "Autumn Valley 10K." However, both iframes have the same accessible name set through the `title` attribute.
<!-- Iframe containing Spring City Half Marathon results -->
<iframe name="race-results" src="spring-half-marathon-results.html">
<!-- This iframe contains the Spring City Half Marathon results -->
</iframe>
<!-- Iframe containing Autumn Valley 10K results -->
<iframe name="race-results" src="autumn-10k-results.html">
<!-- This iframe contains the Autumn Valley 10K results -->
</iframe>
Even though the content of the iframes is different, they share the same accessible name. This creates confusion for users who rely on assistive technologies, as they might expect both iframes to display the same information based on their identical accessible names. This inconsistency can make it difficult for users to distinguish between them and navigate the page effectively.
The website for a running event has two embedded iframes in different locations on the same page, both of them display the overall results list for the same race. Both iframes have the same accessible name set through the `title` attribute.
<!-- Iframe containing marathon results -->
<iframe name="marathon-results" src="results.html">
<!-- This iframe contains the overall marathon results -->
</iframe>
<!-- Iframe containing marathon results -->
<iframe name="marathon-results" src="results.html">
<!-- This iframe contains the overall marathon results -->
</iframe>
Since the two iframes have equivalent content, in this case identical, it makes sense for them to share the same accessible name. This consistent naming helps users to understand that the content in both iframes is the same, as expected.
How to review it.
The Acquia Optimize platform highlights instances where multiple iframes on the same HTML page share the same accessible name.
Check iframes with the same accessible names to ensure that they contain identical or equivalent content. The accessible name is typically defined by the `title` attribute of the iframe or through `aria-label` or `aria-labelledby`.
If you determine that the content in the iframes with identical names is either completely identical or equivalent, you can mark this issue as "reviewed."
However, if you find that the content is not equivalent, you must adjust the iframe names to make them more specific to their individual content. Ensure that they no longer have identical names. The issue will no longer appear after the next scan.
For instructions, visit the user guide article:
How to review an accessibility issue.
Related accessibility conformance testing rules.
iframe elements with identical accessible names have equivalent purpose
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
“Alright, this one time I was on a government website, trying to get my taxes sorted. I am going through everything with my screen reader, and then I hit this section with two iframes. Both of them are labeled ‘Tax Guide.’ Same exact name. No other details.
So, I figure, fine, I will just pick one and start working. I spend hours following the instructions in that iframe, thinking I am on track. Turns out, it was an old guide—information from last year! I only realized when I got a message about missing updates and had to scramble to find the right details in the second iframe.
Honestly, it would have been such an easy fix. Just add the year onto those iframe labels, like ‘Tax Guide 2024’ or whatever. That way, I would know right away which one to use, and I would not have wasted all that time fixing mistakes. It is little things like that—they do not seem like a big deal, but they can cause a ton of unnecessary stress for someone like me.”
This section gives some examples of the issue.
The website for a running event features two embedded iframes in different locations on the same page. Each iframe displays the results list for a different race: one for the "Spring City Half Marathon" and the other for the "Autumn Valley 10K." However, both iframes have the same accessible name set through the `title` attribute.
<!-- Iframe containing Spring City Half Marathon results -->
<iframe name="race-results" src="spring-half-marathon-results.html">
<!-- This iframe contains the Spring City Half Marathon results -->
</iframe>
<!-- Iframe containing Autumn Valley 10K results -->
<iframe name="race-results" src="autumn-10k-results.html">
<!-- This iframe contains the Autumn Valley 10K results -->
</iframe>
Even though the content of the iframes is different, they share the same accessible name. This creates confusion for users who rely on assistive technologies, as they might expect both iframes to display the same information based on their identical accessible names. This inconsistency can make it difficult for users to distinguish between them and navigate the page effectively.
The website for a running event has two embedded iframes in different locations on the same page, both of them display the overall results list for the same race. Both iframes have the same accessible name set through the `title` attribute.
<!-- Iframe containing marathon results -->
<iframe name="marathon-results" src="results.html">
<!-- This iframe contains the overall marathon results -->
</iframe>
<!-- Iframe containing marathon results -->
<iframe name="marathon-results" src="results.html">
<!-- This iframe contains the overall marathon results -->
</iframe>
Since the two iframes have equivalent content, in this case identical, it makes sense for them to share the same accessible name. This consistent naming helps users to understand that the content in both iframes is the same, as expected.
How to review it.
The Acquia Optimize platform highlights instances where multiple iframes on the same HTML page share the same accessible name.
Check iframes with the same accessible names to ensure that they contain identical or equivalent content. The accessible name is typically defined by the `title` attribute of the iframe or through `aria-label` or `aria-labelledby`.
If you determine that the content in the iframes with identical names is either completely identical or equivalent, you can mark this issue as "reviewed."
However, if you find that the content is not equivalent, you must adjust the iframe names to make them more specific to their individual content. Ensure that they no longer have identical names. The issue will no longer appear after the next scan.
For instructions, visit the user guide article:
How to review an accessibility issue.
Related accessibility conformance testing rules.
iframe elements with identical accessible names have equivalent purpose.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Wed Dec 18 2024 16:26:25 GMT+0000 (Coordinated Universal Time)