The <iframe> Element
As defined in the HTML Living Standard, the <iframe> (inline frame) element represents its nested browsing context. It is used to embed another HTML page into the current one.
<iframe src="embedded-page.html" title="Description of the content"></iframe>
View HTML Living Standard: The iframe element
The Critical title Attribute
For accessibility, the title attribute is the most important part of an <iframe>.
WCAG Requirement: Name, Role, Value
Success Criterion 4.1.2 (Level A): For all user interface components, the name and role can be programmatically determined.
A screen reader user needs to know what is inside the iframe before they decide to navigate into it. The title attribute provides the "Accessible Name" for the frame. Without it, a screen reader may simply announce "Frame," leaving the user with no context.
Security & Performance
- The
sandboxAttribute: This enables a set of extra restrictions on any content hosted by the iframe. It is a vital security feature to prevent scripts, forms, or popups from harming the parent document. loading="lazy": A modern standard attribute that instructs the browser to defer loading the iframe until it is near the user's viewport, improving page load speed.
<iframe src="map.html"
title="Interactive site map"
sandbox="allow-scripts allow-same-origin"
loading="lazy">
</iframe>
Usage Warnings
While <iframe> is powerful, it can create "keyboard traps" if the embedded content does not manage focus correctly.
A11y Tip: Responsive Frames
Iframes do not natively resize to fit their content. Use CSS aspect-ratio or JavaScript-based solutions to ensure that the embedded content is fully visible on all screen sizes, satisfying WCAG SC 1.4.10 (Reflow).