This document provides information about the related Acquia Web Governance accessibility check:
Do the iframe elements with same name have same purpose?
What
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:
If one iframe shows a guide in the web page format and the other shows the same guide in the PDF format, then the iframes are equivalent because they provide the same information.
If one iframe shows the guide in English and the other shows the guide in Spanish, then the iframes are not equivalent. Similarly, if one iframe offers a detailed interactive tool and the other offers a simple text version, then also the iframes are not equivalent.
Why
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.
Who
This check affects users who have:
Visual impairments: Who use screen readers to navigate and interact with web content.
Cognitive impairments: Who rely on clear and predictable content structures to understand and navigate effectively.
Examples
This section gives some examples of the issue.
Example: Two iframes with different content but the same accessible name
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.
Example: Two iframes with same content
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
How to review it.
The Acquia Web Governance 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.
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.”
Examples
This section gives some examples of the issue.
Example: Two iframes with different content but the same accessible name
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.
Example: Two iframes with same content
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
How to review it.
The Acquia Web Governanceplatform 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.
Do the iframe elements with same name have same purpose?
4.1.2 Name, Role, Value
Introduction
This document provides information about the related Acquia Web Governance accessibility check:
Do the iframe elements with same name have same purpose?
What
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:
If one iframe shows a guide in the web page format and the other shows the same guide in the PDF format, then the iframes are equivalent because they provide the same information.
If one iframe shows the guide in English and the other shows the guide in Spanish, then the iframes are not equivalent. Similarly, if one iframe offers a detailed interactive tool and the other offers a simple text version, then also the iframes are not equivalent.
Why
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.
Who
This check affects users who have:
Visual impairments: Who use screen readers to navigate and interact with web content.
Cognitive impairments: Who rely on clear and predictable content structures to understand and navigate effectively.
Examples
This section gives some examples of the issue.
Example: Two iframes with different content but the same accessible name
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.
Example: Two iframes with same content
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
How to review it.
The Acquia Web Governance 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.
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.”
Examples
This section gives some examples of the issue.
Example: Two iframes with different content but the same accessible name
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.
Example: Two iframes with same content
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
How to review it.
The Acquia Web Governanceplatform 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.
Web Governance