Accessibility problems with frames

In this lesson

Using Frames to layout page content

In the mid 1990’s using frames were very popular for controlling for page layout. Unfortunately frames present real problems for disabled users. For visual users these frames organised the content of a page into different zones that are each, in practice, separate web pages. However screen readers and text only browsers can only work with one page (frame) at a time so the relationship between the frames is lost.

In essence frames work by using a combination of separate HTML files to compose a single visible page. The first document contains the <frameset> declaration and calls the various documents (frames), until the combination of documents forms the intended page as displayed in the browser window. The benefit of this approach is that each of the individual components (frames) can be replaced leaving the structural set of frames, such as the banner and navigation bars, in place. This makes it easier for the web engineer to create a dynamic site that maintain a consistent look and feel. It also means that individual frames can be scrolled up and down whilst leaving the surrounding frames static.

For example, if we take our simple page layout from lesson 4 (shown below) we could create the same look using four separate documents. We need the basic frame setting document and the three frame documents that make up the parts of the page.

Frame A (Banner Heading)

Frame B

Navigation
Bar

Frame C

Page content

The basic code that would be used by the frameset page to generate the above layout is shown below. This page would be saved as an HTML page and probably called something like "main.htm". Note that there are no <head> or <body> elements declared.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<frameset rows="20%,80%">
<frame src="frame_a.htm" />
<frameset cols="25%,75%">
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</frameset>
</html>

When standard browsers load this page they automatically import all the frames and arrange them within the browser window. Assistive software such as screen readers can only handle one page at a time, so they only load this first page (main.htm). As this is all the information a screen reader receives it makes very little sense to the blind visitor. The screen reader would just read out the series of links to the respective frames and the user would have to look at each individual document (frame) in order to try and make any sense of the overall document. This is clearly not a practical solution.

The first thing we need to do is to provide a <noframes> alternative to the page. This should load a separate page written without using frames. We do this just before closing the final </frameset> element. This code might look like the following:

<noframes>
<body>Your browser does not handle frames, Please follow this link to a page that works without frames
<a href="noframes.html">Non frames version of this page</a>
</body>
</noframes>

</frameset>

Now the blind visitor is offered a link to a page that they can use. The problem here is that you now have two versions of your website that you need to maintain. This is time consuming and not very reliable. So the other thing to do is to add information to the original frameset page so that users can navigate sensibly between the frames. We need to add names and titles to each link so that users can identify the purpose of each part of the overall page (frame) and decide which parts they wish to read and in what order. An example of this is shown below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">
<html>
<head>
<title>Library Services</title>
</head>
<frameset rows="20%,80%" title="Details of our library services" >
<frame src="frame_a.htm" name="Banner" title="Page banner and site navigation bar"/>
<frameset cols="25%,75%" title="page content and section links" >
<frame src="frame_b.htm" name="Section_Links" title="List of section links"/>
<frame src="frame_c.htm" name="content" title="Page content explaining our library services/>
</frameset>
<noframes>
<body><p>Your browser does not handle frames, Please follow this link to a page that works without frames
<a href="noframes.html">Non frames version of this page</a></p>
</body>
</noframes>
</frameset>
</html>

Unfortunately there are still two more things we ought to do to make this page comply with the guidelines for accessibility issued by the W3C. The first is to provide a separate document for people who cannot use frames to explain in more detail what each frame contains. Before the closing </body> of the <noframes> element we need to add a link to a new document that describes each frame in greater detail.

<p><a href="frameset_desc.html">Descriptions of frames.</a></p>

This "frameset_desc.html" page would contain summaries of the content of each frame.

We also need to create a process to ensure that any dynamic components on the page are updated correctly. Supposing that the banner frame is an image that changes with the seasons. To ensure that the image and the relevant alternative text attribute are changed simultaneously you can add some code to the end of the master frameset document that automatically refreshes both the image and the text. For example:

<p><img src="winter.gif" alt="Winter scene"></p>

In Line Frames <iframe>

It is possible to insert a single frame within a standard web page. By using the <iframe> element we can embed another document (or even a whole website) within our page in the same way that we might embed an image or video. Note that the <iframe> tag is not supported in the "strict" versions of HTML or XHTML.

The <iframe> element is used in much the same way as the <img> element with the exception that the alternative text is available by default (i.e. does not need to use the "alt" attribute). An example of the code required is shown below.

The opening <iframe> element includes the link to the frame content and all the other information required to display the frame. Anything typed between the opening and closing tags will not be shown to a person who is using a frames compliant browser. If the user does not have frames capability then they will see a box within which this content will be displayed as standard HTML.

Because you are embedding another web page within your existing page you have no control over the layout of the embedded page. If the page uses large fonts the user may be required to scroll across or down the frame to view all the contents. For this reason you should not disable the scrolling function of the frame by declaring scrolling="no" as an attribute to the <iframe> element.

Hopefully the above complications will provide you with sufficient incentive to find a way to create your website without using frames. If, however, you have no choice then you should apply the above techniques and take time to study more about using frames available from the W3C as shown below.

The W3c techniques document (http://www.w3.org/TR/WCAG10-HTML-TECHS/#frames ) says,
"Frames as implemented today (with the FRAMESET, FRAME, and IFRAME elements) are problematic for several reasons:

Without scripting, they tend to break the "previous page" functionality offered by browsers.
It is impossible to refer to the "current state" of a frameset with a URI; once a frameset changes contents, the original URI no longer applies.
Opening a frame in a new browser window can disorient or simply annoy users.

If at all possible the use of frames should be avoided. The W3C Accessibility Initiative provides an alternative to frames that uses HTML 4.01 and CSS and addresses many of the limitations of today's frame implementations."
http://www.w3.org/TR/WCAG10-HTML-TECHS/#alt-frames

If your current content management system allows you no choice but to use frames then the following rules apply

Browsers that do not support frames will display a page with a link to each frame. Each frame should have a title that adequately describes the frames content.
Describe the purpose of each frame and how it relates to the other iframes.
The <noframes> element must be used to point to a version of the site that does not use frames, or provide links to the individual frames.
Information about the purpose of each frame can be provided in the <noframes> section.
The 'Frameset' document type definition (DTD) should be provided at the top of frames based websites.

Lesson Summary

Simple tables can be used to layout content on a page to avoid complex CSS coding
Tables used for layout must not include any data table elements such as <th> or the summery attribute
Make sure that the content within the table makes sense when a user reads the individual cells in sequence (linear format)
Use CSS to manage spacing within cells (do not use transparent gifs)
Try to avoid using Frames if at all possible
If you do use frames you must do the following
- include a title and description for every frame
- provide a noframes alternative
- provide a separate document that describes the content of the frames in summary form on a single page
If possible you should use the <embed> rather than the <iframe> element
If you do use <iframe> element then you should provide a <noframes> alternative

Accessibility problems with Frames

In this lesson

Using Frames to layout page content

In Line Frames <iframe>

Lesson Summary

Go to - >