What does this accessibility issue mean?
Accessibility issue summary: Frame or iframe missing title tag
HTML frames and iframes are often used to display content from other sources or to provide separate browsing contexts within a single web page. Screen readers will read out the title attribute to users when they encounter a frame of iframe to provide additional context.
Frames or iframes that do not include a title attribute can be confusing for users — particularly if they are relying on a screen reader as assistive technology.
Solution:
Ensure that each frame or iframe on the page has a title attribute that accurately reflects its content or purpose. Do not reuse frame titles within a single page, as duplicate frame titles within a single page can also be confusing for users of assistive technology.
Example HTML violation: Frame or iframe missing accessible title (WCAG 2.0 Level A Issue)
<h1>Welcome to our online store</h1>
<iframe src="/products"> </iframe>
Explanation: The<iframe> tag in the code snippet does not have a title attribute. The title attribute is used to describe the embedded content in the iframe to assistive technologies like screen readers. Failing to provide a title that accurately describes the purpose or content of the iframe leaves users of assistive technologies without a necessary context.
Now, let's correct this error by adding a title attribute to the <iframe> element like so:
How to fix "Frame or iframe missing accessible title (WCAG 2.0 Level A Issue)" issue
<h1>Welcome to our online store</h1>
<iframe title="List of Products" src="/products">
</iframe> Now, the <iframe> element has a title attribute with the value "List of Products". Users of assistive technologies will now understand that this iframe contains a list of products on the online store.
For more details you can refer to Guidelines WCAG 2.1 (A), WCAG 2.0 (A), Section 508, and Trusted Tester.
