An inline frame (also called an iframe) loads another HTML page within a document. Commonly used for advertisements and embedded videos, iframes are powerful tools for incorporating external content.
Generally, using iframes won’t negatively impact the experiences of people who use screen readers and other assistive technologies. However, iframes must have meaningful titles.
Titling your iframes provides users with important context, enabling them to decide whether or not to engage with your content. Here’s an overview of the best practices for providing iframe titles.
iFrame titles can tell users what to expect
Screen readers will announce the presence of the iframe when the user encounters the content. In other words, the iframe isn’t announced immediately — only when the user navigates to the iframe. Without meaningful titles, the user might become confused.
Let’s say that your site uses an embedded video to demonstrate the features of a product. Your video player uses an iframe, but you don’t provide a title.
When accessing the video, screen reader users might hear “frame,” followed by the filepath of the iframe. They won’t know that the video contains information about a product. If they’re not interested in the product, they may feel frustrated when audio playback begins.
Adding a title to the iframe will explain the purpose of the content:
<iframe title="Product Demonstration Video" src="productdemonstrationvideo.html"></iframe>
This informs the user that they’re about to view a product demonstration video. If they’re not interested in the content, they can easily scroll past it without wondering what they’re missing.
Are titles necessary for all inline frames?
iFrame titles are only necessary when the frame’s content is visually distinct from the other content on the page. However, automated tools may flag any iframes with missing titles as an accessibility issue.
If your iframes contain non-readable content, you can still provide a title to pass automated accessibility tests; use a generic title like “no readable content" or “intentionally left blank.” In these cases, you’ll also need to add the aria-hidden=”true" attribute to prevent screen readers from announcing the non-readable iframe content.
Related: Introduction to ARIA for Web Accessibility
Write iframe titles that provide clear, concise information
As with other semantic elements, iframe titles should provide basic information about visual content. It’s perfectly acceptable to use simple iframe titles like “advertisement,” but where possible, give meaningful context.
However, don’t write too much — just enough to identify the contents of the inline frame. For example, this title contains too much information, which could create a frustrating experience for users:
iframe title="product demonstration video for our vacuum, the X-R3, which is available for $99.99"
Your users should be able to quickly understand the content and decide whether they want to navigate to the iframe. Remember, screen reader users already understand that they’re on the product page for your vacuum cleaner — simple text like “product demonstration video" gives them enough information to proceed.
Related: Alternative Text: What and Why
Are iframe titles required by WCAG?
The Web Content Accessibility Guidelines (WCAG) are the international standard for digital accessibility. To comply with disability non-discrimination laws like the Americans with Disabilities Act (ADA), organizations should seek Level AA conformance with the latest WCAG standards.
WCAG 2.1 Success Criteria (SC) 4.1.2, “Name, Role, Value,” requires that all user interface components have a name and role that can be programmatically determined. WCAG SC 4.1.2 is a Level A criterion, which means that websites must follow the guideline in order to be considered reasonably accessible.
When iframes contain user interface components (for example, video players), they must include titles to comply with WCAG SC 4.1.2. Additionally, WCAG 2.4.1, “Bypass Blocks,” requires that websites provide a mechanism to bypass blocks of content that are repeated on multiple web pages. Providing iframe titles may satisfy this requirement in certain circumstances.
When using inline frames, think about accessibility
Inline frames shouldn’t cause major issues for assistive technology users. As long as you write meaningful titles (and hide iframes that don’t contain readable content), you can use iframes without compromising accessibility.
However, some types of external content can introduce barriers including keyboard traps. The best course of action is to audit your content regularly using both automated and manual tests. Some quick tips:
- Make sure you can navigate through iframes by using a keyboard alone.
- Make sure iframes will scale with the page without losing content.
- If iframes aren’t necessary for content management, avoid using them. Instead, use CSS to accomplish the same visual presentation.
The Bureau of Internet Accessibility can help you identify and address accessibility issues, ensuring WCAG conformance while improving user experiences. Talk to us to learn more or get started with a free website compliance summary.
