The <iframe> element is used to embed another HTML document within the current document.
It creates a rectangular region in the web page where the embedded content is displayed. The embedded
content can be from the same domain or a different domain.
NOTE:
New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS
and JavaScript (when needed), along with a working demo.
The <iframe> element SHOULD be used for implementing the iframe.
The title attribute SHOULD be used to denote the purpose of the iframe.
The width and height attributes SHOULD be used to denote the
width and height respectively of the iframe.
The src attribute SHOULD be used to specify the source of the content in
the iframe.
The frameborder attribute CAN be used to display a border around the
iframe.
The scrolling attribute SHOULD be used to display scrollbars within the
iframe if there is lengthy content within the iframe.
The allowfullscreen attribute CAN be used to specify whether to allow the
content within the iframe to enter fullscreen mode.
The iframeSHOULD be hidden from users if it’s not to be exposed.
CSS properties like display: none; visibility: hidden; and so on
CAN be used to hide iframe from all users.
Native HTML hidden attribute CAN be used as well to hide the
iframe from all users. Note:tabindex="-1" and aria-hidden="true" attributes
will remove the iframe from focus order and hide it from screen reader. However, visually the
iframe will still be present.
The page you are displaying in the iFrame SHOULD be loaded using the same protocol as
the page the iFrame is on. For example, either http: or https: for both sites.
Note: The content embedded within the iframe from same or different domain
SHOULD be accessible. There might be limitations in implementing accessibility for the 3rd
Party content which is not created by the Author.
A well-defined iframe benefits majorly the below users.
People with cognitive disabilities
People with visual disabilities
People using speech input
People with limited dexterity
People using keyboard only
<p>We used Example Domain for iframe.</p>
<p>Inside content of iframe should be accessible.</p>
<iframe src="https://www.example.com/" title="Example website" width="550" height="400" allowfullscreen sandbox></iframe>
