Creating Accessible Frames and Iframes
Frame Accessibility
A frameset is a web page which defines a collection of at least two other separate web pages, which are combined in the same visual space. Visual users usually experience framesets as a cohesive entity. They can scan the contents of multiple pages all at once.
Frames are no longer part of HTML. Because of limited support and difficulty in making them accessible and highly usable, frames should typically be avoided.
Those using screen readers cannot quickly scan the contents of multiple pages. All of the content is experienced in a linear fashion, one frame at a time. Frames are not inaccessible to modern screen readers, but they can be disorienting.
Screen reader usually reads all of the frames in a frameset, almost as if they belong to the same page. The user is alerted by the screen reader that a frameset is present. Keyboard shortcuts allow the reader to jump quickly between frames, though users may not be familiar with these shortcuts.
Provide frame titles
When a screen reader user hears a list of frames, it is helpful to know the purpose of each one. Frame titles allow web developers to communicate the purpose of each frame to users of screen readers. The best titles for frames are brief and descriptive. Appropriate titles for the frames in a two-frame frameset might be "navigational frame" and "main content."
Provide noframes content
Content in the noframes element will be presented if the user cannot or chooses not to view frame content. The noframes content should indicate what the contents of the frames are and provide links to individual frame pages, if appropriate.
Accessible frame example code
Notice the proper doctype and descriptive, yet brief frame titles in this example code of an accessible frame.
<html>
<head>
<title>A page that contains frames</title>
</head>
<frameset cols="15%, 85%">
<frame src="menu.html" title="Navigation menu" name="menu">
<frame src="content1.html" title="Main content" name="content">
<noframes>
<p>This frameset document contains:</p>
<ul>
<li><a href="menu.html">Page navigation</a></li>
<li><a href="content1.html">Main content</a></li>
</ul>
</noframes>
</frameset>
</html>
Inline Frame (iframe) Accessibility
Inline frames allow the inclusion of distinct web documents (and even entire web sites) within a subwindow of a parent web page without the hassle of defining a frameset document. There are no distinct accessibility issues with inline frames. The content of the inline frame is read at the point it is encountered (based on markup order) as if it were content within the parent page.
Some screen readers indicate that iframes are present and may even support navigating them along with standard frames.
Unlike frames, a descriptive title attribute value is not required for accessibility, but if the inline frame presents content as a whole that is visually distinctive, such as an advertisement or video player, then a title should be provided to indicate this distinction.
Because many users enlarge fonts and other page elements to increase visibility and accessibility, you should not disable scrolling for iframes (or frames, for that matter) by using scrolling="no". The default scrolling value (auto) is usually the best option. You should also, when possible, design the iframe with relative sizes so the iframe element itself will scale as the page and its contents are resized.
Alternatives to Frames
Frames can introduce accessibility problems and should be avoided. Iframes pose fewer accessibility issues, though require additional work and management of multiple pages. Frames and iframes should not typically be used for presentation or display, but for content management (iframes work great for advertising and display of content external to your own web site). If you want a single web presentation to display similarly to frames, this can usually be accomplished with CSS and one web page, rather than dealing with the complexities and potential accessibility issues of frames or iframes.