Fix · Moderate · should fix soon
How to fix: iframe without title
Screen readers announce "frame" with no description. Embedded content needs a programmatic name.
- WCAG references
- 4.1.2
- Severity
- Moderate
What it looks like in the wild
Screen readers announce "frame" with no description.
The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.
Why it fails WCAG
Embedded content needs a programmatic name.
Map this back to 4.1.2 when you log the bug. Auditors and procurement teams expect that mapping; "broken" is not enough context.
The wrong pattern (avoid)
<iframe src="https://www.youtube.com/embed/..."></iframe>The right pattern (copy this)
<iframe title="How to install Certvo widget — video tutorial" src="https://www.youtube.com/embed/..."></iframe>Notes from real audits
The title should describe the iframe's content, not its source — "YouTube player" is not useful.
For decorative iframes (loading pixels, analytics), use title="none" or aria-hidden="true".
Hidden iframes (display:none or visibility:hidden) do not need title attributes because they are not exposed to accessibility APIs.
Third-party embed scripts often generate iframes dynamically — inspect rendered HTML in DevTools to verify the title is present after script execution.
How to verify the fix
Shipping the change is not the same as passing 4.1.2. Re-run these checks against the page you edited before you close the ticket.
Inspect components with the browser accessibility tree (Chrome DevTools → Accessibility).
An automated scan confirms the machine-testable half. Keyboard and screen-reader passes cover the half no scanner can judge — do both before claiming conformance.
What 4.1.2 requires
4.1.2 Name, Role, Value (Level A, Robust): For every UI component, the name, role, and state (and any value where applicable) must be programmatically determinable. A custom toggle that looks like a switch but is built from <div>s is invisible to assistive tech. WCAG 4.1.2 is the bridge between custom UI and the accessibility tree.
<div role="button"> without aria-label
4.1.2Toggle state not reflected in aria-pressed
4.1.2Custom dropdown without combobox role
4.1.2
Priority: Moderate
This will not stop a user completing a task on its own, but it accumulates. A page carrying several moderate findings degrades into one that is technically usable and practically exhausting — and an auditor counts them individually.
Because the cause is almost always a shared component rather than a single page, fix it where the component is defined and re-scan the whole site. Record 4.1.2 on the ticket verbatim: that string is what an auditor, a procurement questionnaire or a regulator will search for.
Related fixes
How to fix: lists not marked up as lists
1.3.1
How to fix: placeholder used as label
3.3.2
How to fix: duplicate id attributes
4.1.1
How to fix: small touch targets
2.5.5, 2.5.8
WCAG 4.1.2 — Name, Role, Value
For every UI component, the name, role, and state (and any value where applicable) must be
All fix recipes
Browse fixes by severity
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.