Web Governance
Do the iframe elements with same name have same purpose?
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.
Web Governance<!-- 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 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.
For more information, visit How to review an accessibility issue.
Related accessibility conformance testing rules.
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 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.
For more information, visit How to review an accessibility issue.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.