Skip to main content

Frames

Web checkpoint 9

  • Provide a title for each <frame> element and frame page.
  • Provide an accessible source for each frame.

On this page:

Rationale

Frames are often used to separate banner, navigation and content sections on a Web page. There are two big accessibility issues with frames: being able to navigate a page with frames using the frame name and being able to read the source for each frame.

Navigating within a frameset can be disorienting to someone who is blind if the frames do not have unique and meaningful names. Someone using a text browser, such as Lynx, or assistive technology, such as a screen reader, uses the frame name to quickly navigate to the content they want to read. For example, when assistive technology lists the frames on a Web page, the user might hear there are three frames: Banner, Navigation and Main. They select the frame titled "Main" to go to the main content of the page without having to listen to banner and navigation content. This improves the productivity and accessibility of navigating the page. If frame titles are not useful, such as "Right", the user must guess which frame contains the information they need, or listen to the page sequentially. If no title has been provided, the assistive technology may say "Untitled" or read the target filename of the frame. In both cases, the information is not useful and the page is not accessible.

Once the user selects the frame they want to read, the source of the frame must be accessible. If the source of the <frame> element is an image file, assistive technology cannot interpret it because you cannot add the alternative text to the image. The user will open the frame and hear nothing or just the name of the image file. The source of the frame must include the appropriate accessibility mark-up such as an HTML file.

This page describes techniques for adding titles to frames and techniques for providing an accessible source for each frame so someone using assistive technology can easily navigate and access content on Web pages that use frames.

Back to top

The following techniques support Checkpoint 9 from the IBM Web Accessibility Checklist.

The following techniques are the minimum required to meet this checkpoint:


Titles for frames

The frame element must have a meaningful title attribute. This attribute identifies the purpose of the frame so that the user knows what sort of information the frame contains. For example, if the frame contains a set of links used to navigate the Web site, the title attribute should be set to something like "Navigation". Since some assistive technology may also use the name attribute, it is recommended that you provide a meaningful name attribute in addition to the title attribute as shown in the following example.

<title>My company web site</title>
</head>
<frameset>
<frame src="logo.html" title="Company logo" name="company logo" />
<frame src="navigation.html" title="Navigation" name="navigation" />
<frame src="maincontent.html" title="Main content" name="main contents" />
</frameset>
...

The source HTML file for the frame must also have a <title> element with a meaningful name for the page. In the example below, the page title for logo.html matches the <title> attribute for the <frame> element shown in the previous example.

Contents of logo.html:

<html>
<head>
<title>Company logo</title>
...

Titles for inline frames

Inline frames (iframes) enable Web designers to place frames of any size at any location on the screen. When defining inline frames with the <iframe> element, you must provide a title using the title attribute just like you do for the <frame> element.

...
<iframe src="ad.html" title="Advertisement" width="200" height="400" />
...

Accessible frame source

The source of the <frame> and <iframe> element must always be accessible. Generally, this means making the source an HTML file, although there are other sources that are accessible such as Lotus Domino NSF files and JSP files. The source cannot be an image file because there is no way to assign alternative text to the image. Instead of using the image file as the frame source, include the image in an HTML file so the appropriate alt attribute can be provided.

This is an example of an inaccessible frame source. The image file does not have alt text, so it is not accessible when the frame source is accessed with a screen reader. The frame has a valid title, but the application is not accessible because the source is not accessible.

...
<frameset>
<frame src="mydog.gif" title="Edward" name="Edward" />
</frameset>
...

To make the example accessible, the frame source is an HTML file, dogs.html, that contains the image with the appropriate alt attribute. When the frame is accessed, the alt text is read by the screen reader.

...
<frameset>
<frame src="dogs.html" title="Edward" name="Edward" />
</frameset>
...

The code for dogs.html contains the image that is displayed in the frame.

...
<img src= "mydog.gif" alt= "Picture of Edward swimming" />
...

Frame relationships

Since assistive technology users must read the page one frame at a time, do not create complex relationships between frames that require the user to switch back and forth between frames in order to understand the information. For example, do not put data table headers in one frame and the table content in another frame just to keep the table headers visible while allowing the table rows to scroll. This use of frames makes it very difficult or impossible for someone using assistive technology to understand the table.

Back to top

Recommended techniques

The following techniques are not required, however they greatly improve the accessibility of frames and are part of HTML Techniques for Web Content Accessibility Guidelines (WCAG) 1.0.

Allow users to scroll frames

When defining frames, do not use the attribute <scrolling="no">. If someone with low vision is magnifying the content on the web page that contains frames, they cannot get to all the content if there are no scroll bars.


The <noframes> element

Use the <noframes> element to specify equivalent content for web browsers and other programs that do not support frames. In the following example, the <noframes> element provides links to the pages in the frameset so the user can navigate the content. Note that the <noframes> element contains a <body> element.

...
<frameset>
<frame src="masthead.html" title="Banner" name="banner" />
<frame src="navigation.html" title="Navigation" name="navigation" />
<frame src="content.html" title="Main content" name="main contents" />
<noframes>
<body>
<p>This page contains:</p>
<ul>
  <li><a href="masthead.html">Banner</a><li>
  <li><a href="mavigation.html">Navigation</a><li>
  <li><a href="content.html">Main content</a><li>
</ul>
<body>
</noframes>
</frameset>

Using <noframes>

As stated previously, the <noframes> element is recommended but not required for accessibility compliance. To support web browsers and other programs that do not support frames, add a <noframes> element to the FRM file. The <noframes> element describes the frameset and provides links to the individual frame source pages. The default FRAMES.FRM file contains a very minimal noframes section that should be replaced with something more descriptive.

<noframes>
 <body>
  <p>This frameset contains:
   <ul>
    <li><a href="masthead.html">Banner.</a></li>
    <li><a href="navigation.html">Site navigation.</a></li>
    <li><a href="content.html">Initial content page.</a></li>
  </ul></p>
 </body>
</noframes>

Do not try to "match" frames

"Matching" frames so that text or graphics line up between 2 frames will not work with screen magnification.


Meaningful names and titles

In HTML, the FRAME element must have a meaningful name attribute or a meaningful title attribute so that the user knows what sort of information the frame contains. To provide meaningful names in IBMIDDOC source, edit the FRM file and set each frame's name attribute to a meaningful name. For example, if the frame contains a set of links used to navigate in the page or Web site, the name attribute must be set to something like "Navigation" as shown in the following example updated from the default FRAMES.FRM:

<!-- REPLACE:doctype -->
<html>
<head>
<!-- REPLACE:metadata -->
<title><!-- REPLACE:booktitle -->
</title>
</head>
<frameset rows="10%,90%">
<frame src="<!-- REPLACE:htmlheader -->" name="Banner" title="Banner" marginwidth="1" />
<frameset cols="30%,70%">
<frame src="<!-- REPLACE:firsttoc -->" name="Navigation" title="Navigation" marginwidth="0" marginheight="0" />
<frame src="<!-- REPLACE:firstfile -->" name="Content" title="Content" marginwidth="0" marginheight="0" />
</frameset>
...
</html>

The source HTML file for the frame must have a <title> element with a meaningful name for the page. In IBMIDDOC, set the title of the source file to a meaningful name. The title in the IBMIDDOC and the frame's title in the FRM file should match.


Accessible source

In the FRM file, the source for a frame must be a file that transforms into accessible code, such as HTML. If you want the frame to only show an image (such as a logo), use an HTML page that contains the image you want and provide appropriate alt text. See Checkpoint 1 Images for more information on alt text.

Back to top

Testing

Test the Web site to ensure that it complies with accessibility requirements.

Tools


Techniques

The following techniques are required to verify this checkpoint:

Techniques
Action Result
Test the Web site with a Web checking tool to identify:
  1. Frames that do not have a title.
  2. Frames whose source is not an HTML file.
Most Web checking tools do not check for titles on iframes. Those must be verified manually using a screen reader.
  • The tool does not identify any <frame> elements with missing titles.
  • The tool does not identify any <frame> elements whose source is not an HTML file.
Fail:
  • The tool identifies one or more errors for the item "Give each frame a title".
  • The tool identifies one or more errors for the item "Each frame must reference an HTML file".
2. View the page with a screen reader. Verify that the screen reader announces the frame title for all frames, and that the frame titles are meaningful. Pass:
  • All frames have titles. The screen reader announces the frame title.
  • All frame titles are meaningful so they can be used to navigate the Web site. For example, titles such as "Navigation" or "Main" clearly identify the purpose of the frame.
Fail:
  • One or more frames do not have a title.
  • All frames have titles, but they are not meaningful. For example, the frame title "Red" or "Left" does not provide information a blind user needs to determine if they should select that frame. Abbreviations such as "navfr1" are also not accessible.

Back to top

©2001, 2008 IBM Corporation

Last updated January 17, 2008.

Previous

Checklist

Next