What does this accessibility issue mean?
Accessibility issue summary: Frame or iframe uses a duplicate title
HTML frames and iframes are often used to display content from other sources or to provide separate browsing contexts within a single web page.
Assistive technologies such as screen readers will read out the title attribute to users when they encounter a frame or iframe.
Having non-unique title tags for these frames on a single page can cause confusion for users and can cause website accessibility issues for assistive technologies such as screen readers. Having a unique title for each frame allows screen reader users to identify and distinguish between different frames, understanding the purpose and content of each one.
Solution:
Ensure that each frame or iframe on the page has a unique title attribute that accurately reflects its content or purpose. Do not reuse frame titles within a single page. This will make it easier for users to understand the page’s structure and navigate its content, and will also help ensure that the page is accessible to all users, regardless of their assistive technology.
Example HTML violation: Frame or iframe uses a duplicate title tag (WCAG Level A Issue)
<div class="product-info">
<iframe title="Product Description" src="product-description.html"></iframe>
</div>
<div class="product-review">
<iframe title="Product Description" src="product-reviews.html"></iframe>
</div>Explanation: The above HTML violates the frame-title-unique accessibility rule because both iframes have the same title "Product Description". This violation occurs because each iframe should have a unique title that accurately describes its content, in order to ensure better accessibility.
How to fix "Frame or iframe uses a duplicate title tag (WCAG Level A Issue)" issue
<div class="product-info">
<iframe title="Detailed Product Description" src="product-description.html"></iframe>
</div>
<div class="product-review">
<iframe title="Customer Product Reviews" src="product-reviews.html"></iframe>
</div>To be sure of the remaining facets of accessibility rules are not violated, further guidelines could be followed as discussed on W3C Web Accessibility Initiative (WAI)
-
Each iframe should have a non-empty
aria-labelattribute. -
All iframes should be included in the document's tab order unless they contain interactive elements.
-
Each iframe should have an accessible name, achievable via
aria-labelledby,titleoraria-labelattribute. The best practice is to use thearia-labelledbyattribute. -
iframes that do not contain any meaningful content can have their default semantics overridden with
role="presentation"orrole="none"attribute.
By following these guidelines, you ensure your iframes are fully accessible to assistive technologies.
