Creating Accessible Frames
Article Contents
Translations
Translations of this article are available in:
Slovenian - External Link - courtesy of Hostgator - External Link
German - External Link - courtesy of Seo Matrix - External Link
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.
The screen reader JAWS 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. It then continues to read all of the pages in the frameset. There is also a keyboard shortcut which allows the reader to jump quickly between frames. These keyboard shortcuts are available in the Keyboard Shortcuts for JAWS page in the Appendix.
Other programs handle frames differently. Home Page Reader does not automatically read the pages in the frameset. Instead, it presents the user with a list of frames within the frameset and allows the user to choose which frame to go to first.
Frame Accessibility
Provide frame titles
Important
One of the most important things you can do to increase the accessibility of frames is to give each frame a title.
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. If a frame is given a name or
filename of "default3.htm" (or something
equally nondescript), there is really no way to know
what each frame contains, other than by having the screen reader read through each frame.
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.
Provide noframes content
Content in the noframes tag should always be available 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 are increasing in popularity. They 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.
<iframe src="webpage.htm">
<p>Content within the iframe tags will be viewed on browsers that do not support iframes and ignored by those that do support iframes.</p>
</iframe>
Most up-to-date browsers support inline frames. If a browser does not support inline frames or if the user chooses to disable them, then alternative content can be provided between the iframe tags.
Example
Code used for this iframe:
<iframe src="webpage.htm" width="40%" height="80">
<p>If you can see this text, your browser does not support iframes.
<a href="webpage.htm">View the content of this inline frame</a> within your browser.</p>
</iframe>
When using iframes, you should ensure that the alternative content (the content between the iframe tags) is useful. In most cases, you should provide a link to the content that is presented within the iframe so that the user can access it directly. The iframe tag can be given the title and longdesc attributes (though longdesc is not yet supported) to provide additional descriptions and details of the iframe contents.
Links within the iframe element are accessible via the keyboard as if the content were within the web page containing the iframe. Links within the iframe will, by default, open within the defined iframe area. This may pose a problem if there are links to external web sites as the content will be displayed within your parent web page.
There are three options for controlling scrolling within the iframe element, auto, yes, and no. When scrolling="auto" is added (this is the default), vertical and/or horizontal scroll bars will only display if the content cannot adequately display within the specified size dimensions of the iframe. If you set scrolling="yes", both vertical and horizontal scroll bars will appear regardless of whether they are needed. Setting scrolling="no" will disable the display of scroll bars, even if all of the content will not display within the iframe area. 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). The default option (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 it's 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 Cascading Style Sheets and one web page, rather than dealing with the complexities and inaccessibility 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. This is done with the overflow CSS attribute.
Example
<div style="overflow:auto; width:400px; height:90px;">
This content...
</div>
Notice how the above content looks very similar to the iframe content above (iframe adds a border around elements when scroll bars are displayed, whereas CSS does not). With CSS, this can be done by simply adding the 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. As mentioned previously, 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.
There are many advantages of using CSS instead of frames to control the display of content. All of the content is on the same page giving the developer fewer files to keep track of. Instead of forcing a screen reader user to navigate between frames, the page is read normally. A screen reader user will likely be unaware that scrolling elements are even present. 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.
WebAIM is an initiative of:
