Iframe accessible name is redundant
| Field | Value |
|---|---|
| Rule code | Iframe_Name_Redundant |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
We detected an iframe HTML element with an already populated title attribute as well as an additional label provided via one or more ARIA attributes; such as aria-label or aria-labelledby. Ensure that the iframe has either a title or is given an ARIA attribute to label its purpose and functionality, but avoid using more than one.
How to fix
The accessible name for an iframe should be defined using either the title attribute or ARIA attributes like aria-label or aria-labelledby, but not both. Using multiple methods to define the accessible name can result in redundancy and potential confusion when announced by assistive technologies.
To resolve this issue, opt for a single method to define the accessible name. Either use the title attribute alone or use ARIA attributes alone, but not both.
TIP: Ensure the method you choose provides a concise and descriptive name for the iframe.
Example:
Avoid mixing title with aria-label or aria-labelledby for the same element.
<!-- Good example -->
<iframe title="Navigation Menu" src="menu.html"></iframe>
<!-- Another good example -->
<iframe aria-label="Navigation Menu" src="menu.html"></iframe>
<!-- Bad example -->
<iframe title="Navigation Menu" aria-label="Site Menu" src="menu.html"></iframe>