Using frames accessibly

Frames have a large number of accessibility problems. While it is possible to work around these problems, it is usually easier to find an alternative solution to the problem. However, there are a few situations in which frames are the best solution. For page layout and design, frames should not be used.

Web Accessibility Initiative Guidelines

This page explains how to meet:

• Guideline 12.1: "Title each frame to facilitate frame identification and navigation."
• the parts of Guideline 1.1 "Provide a text equivalent for every non-text element ...".

Reasons for following these recommendations

Without careful thought, frames have a large number of problems, including:

1. Frames do not degrade gracefully. If no alternative content is provided, a browser that does not support frames will show nothing.
2. There are very few browsers that allow frames to be bookmarked properly. Instead, the frameset document will be bookmarked, which prevents the easy bookmarking of pages within the site.
3. The address in the address bar remains fixed as the frameset location, which makes navigation more difficult.
4. Some browsers interpret the back button as an instruction to leave the frameset and return to the previous page, rather than to go to the last state of the frameset.

Because of these problems, if alternative 'noframes' content is not provided, many users, and most search engines will be unable to access your site.

How to make frames accessible.

There are two parts to this. The first is an accessibility issue and involves making the content visible in browsers that do not support frames.

The second is mostly a usability improvement, and fixes the last three problems noted above.

Making frames degrade gracefully.

In browsers that do not support frames, each frameset document requires 'noframes' content. This content will be displayed instead of the frames. This content must always be updated together with the frame-based content - the two must provide equivalent content.

In Dreamweaver, use the menu item 'Modify -> Frameset -> Edit NoFrames Content' to switch between editing the frames and editing the 'noframes' content.

The 'noframes' content of a frameset needs to contain, as a minimum, a link to any initial content pages in the frameset, and any links in the initial state of the frameset. Ideally, it should contain the contentof the initial content pages, not just links to them.

For the benefit of browsers with at least partial support for frames, you should give the frames descriptive name and title attributes.

• Title: leftframe - very bad - gives no clue as to purpose of frame.
• Title: nav - not so bad - still an abbreviation.
• Title: navigation - good - explains purpose of frame.

In Dreamweaver, the name attribute is the Frame Name box in the frame properties. To edit the title attribute, select the frame, and go to 'Modify -> Edit Tag' in the menu. Title is in the Stylesheet/Accessibility section.

Frame size

An accessibility issue affecting frames in graphical browsers that support them is that resizing and scrolling the frame should always be possible. Therefore, ensure that your frames have a scrolling attribute of "auto" to allow scrollbars to appear when necessary to display the content (scrolling="yes" may be useful in limited circumstances). Disabling scrolling can prevent users on smaller screens viewing all content.

Resizing of frames should also be allowed. Users may have a larger text size than you expect, for example, and need to be able to resize a navigation bar to display it without scrolling. Therefore, do not use the noresize attribute. To allow resizing of frames in some browsers, you must also give the frame a border with the frameborder="yes" attribute.

In Dreamweaver, the default settings for a frame are unfortunately no scrolling, no resizing. Therefore, in the frame properties window, you should set 'scrolling' to 'Auto', 'borders' to 'Yes', and clear the 'no resize' box.

Avoiding the loss of navigation usability

There is a way to avoid the navigation problems that are a side-effect of frames. The problems are caused by the frameset document, rather than the individual pages, being considered the displayed page. Therefore, the problem can be solved by having one frameset document for each content page.

Old structure

• Frameset: index.html
  • Navigation bar: navigate.html
  • Initial Content page: main.html
  • Second content page: contacts.html
  • Third content page: about.html

New structure

• Frameset: index.html
  • Navigation bar: navigate.html
  • Initial Content page: index-main.html
• Frameset: contacts.html
  • Navigation bar: navigate.html
  • Initial Content page: contacts-main.html
• Frameset: about.html
  • Navigation bar: navigate.html
  • Initial Content page: about-main.html

By linking to the frameset documents instead of the content documents, and using a target attribute of "_top" on all links, this can solve most of the navigation-related problems with using frames.

Disadvantage

For each content page, you have to make:

1. The content page
2. Its frameset parent
3. 'Noframes' content for the frameset parent

This is considerably more work than a frame-free layout, to achieve a result that is, at best, as usable.

Only use frames when there is a clear advantage from doing so.

Frame-like effects

Stylesheets can be used to create frame-like effects in recent browsers using fixed positioning. However, at the moment support for this is unreliable even in recent browsers. Details of this technique are beyond the scope of these guidelines, but this tutorial about fixed positioning covers the details of this technique.

Checking

Most automatic accessibility checkers have problems with frames, as they will not follow the contents of the frames, and will only assess the frameset document. Therefore, a document with no 'noframes' alternative can be mistakenly assessed as accessible by many accessibility checkers.

Accessibility checkers can check for the presence of frame titles but cannot check that the title is appropriate.