In the world of web accessibility, `<iframe>` and the obsolete `<frame>` elements can create a “document within a document.” For users of assistive technologies, this can be a black box—a confusing and inaccessible part of the page. That’s why it’s a best practice to test all of your frames with an automated tool like axe-core. axe-core is an open-source accessibility testing engine that can quickly identify common issues, ensuring your framed content is accessible to everyone.
Think of your website as a house. An iframe is like a window looking into another room. If the window is dirty or the lights are off in the other room, you can’t see what’s inside. Testing your frames with axe-core is like cleaning the window and turning on the lights, making sure everyone can see the content within. For a deeper dive into the world of accessibility, see our article on accessibility.
Common Accessibility Issues with Frames
The single most important accessibility requirement for a frame is a descriptive title. Without it, screen reader users have no context for the content contained within the frame.
- Missing `title` attribute: The `title` attribute provides the accessible name for the frame. A screen reader will announce this title, allowing the user to decide whether they want to navigate into the frame’s content.
- Focus Trapping: Poorly coded frames can trap keyboard focus, preventing a user from navigating out of the frame and back to the main page.
How to Test and Fix Frames
The easiest way to test your frames is to use an automated tool that incorporates the axe-core engine, like the axe DevTools browser extension or a crawler like Creeper. The primary issue these tools will find is a missing title, which is a simple but critical fix. For a complete technical overview, see the MDN guide for the iframe element.
<!-- Before: Inaccessible frame with no title --> <iframe src="https://www.google.com/maps/embed?..."></iframe> <!-- After: Accessible frame with a descriptive title --> <iframe src="https://www.google.com/maps/embed?..." title="Google Map of our office location"></iframe>For more on the importance of a well-structured website, check out this guide to axe-core from Deque.
Frequently Asked Questions
What is axe-core?
axe-core is an open-source accessibility testing engine that is used by a variety of different tools, including Creeper. It’s a great way to automatically test your website for accessibility issues.
What is the difference between a <frame> and an <iframe>?
The `<frame>` element was used to create framesets, which could split a page into multiple documents. It is now an obsolete and deprecated HTML tag that should not be used. The `<iframe>` (inline frame) is the modern standard and is used to embed a separate HTML document within the current page.
Why is it important to test my frames with axe-core?
It’s important to test your frames with axe-core to ensure that they are accessible to people with disabilities. Frames can be a major barrier to accessibility, as they can be a ‘black box’ to screen readers if they are not properly labeled with a title attribute.
Ready to put your frames to the test? Start your Creeper audit today and see how you can improve your website’s accessibility.