Creating Accessible Frames and Iframes
Introduction
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.
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.
Frame Accessibility
Provide frame titles
The most important things you can do to increase the accessibility of frames is to give each frame a descriptive title attribute value.
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."
When frame titles are not present, screen readers look for other sources of information, such as the frame's name attribute or file name. Sometimes these other sources of information are not very helpful at all.
Use correct document type
A page that uses frames should have the correct document type. The code example below shows a doctype for a frameset page that uses HTML 4. The proper frameset doctype lets screen readers and other browsers know that the document consists of multiple frames. Of note is that frames are obsolete in HTML5, so one should not use frames with the HTML5+ doctype.
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<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 necessary for accessibility. 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.
<iframe src="ad.htm" title="Advertisement">
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
As noted earlier, frames can introduce accessibility problems. Although with iframes there are fewer accessibility issues, like frames, they 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.
CSS allows for very complex layouts and display. You can use CSS to add scrolling functionality to nearly any page element, thus achieving the presentation and display that frames and iframes provide.
<div style="overflow:auto; width:400px; height:90px;">
This content...
</div>
This can be done by simply adding the CSS overflow:auto style to nearly any HTML element. When overflow is set to auto, scrollbars will only appear if the content cannot be displayed within the area defined. As with iframe, you can force the display of scrollbars with overflow:scroll or disable scrollbars with overflow:hidden. When scrollbars are disabled, some users may not be able to view or access all of the content, especially if the content is enlarged for visibility.
Using CSS also solves many of the problems caused with linking and navigating within frames and iframes - the address in the address bar is accurate, links to external sites or content will not be embedded within your framed layout, it is easier to bookmark, and it is easier to keep track of the pages visited.
Enabling scrolling content with CSS may, however, cause some usability problems. The user may not be aware that they need to scroll and may not be able to view all of the content. If multiple scrollbars display, it may be confusing for the user to access the content. These problems are also apparent when using frames and iframes, and as such, the advantages of using CSS should cause it to be a first alternative to frames-based layouts.