Web Access Centre
Frames - Web Access Centre
Summary: If frames must be used then provide good HTML links within the frames, names and titles.
- Rationale
- Techniques
- Testing tips
- Website Accessibility Initiative compliance
- Other pages about layout and structure

Rationale
Frames are individual panels that are placed together in a frameset to create one page. To the eye a user may not know if a page is made up of frames. This page, for example, is not made up of frames and is one page. If it was made of frames it might have a separate frame for the top navigation, left navigation, main content and right hand links. These are like mini pages linked to give the impression of one complete page.
While they are not a problem visually they are to speech and braille output as well as text-based browsers if they are not named and the content of the frames described. It’s a bit like going to a shopping centre where none of the shops have been given names. You have no means of knowing where you are and how to navigate to where you want to be.
As well as causing problems of access, frames prevent pages from being printed in full and can not be book marked easily. Search engines do not pick up framed pages very well either.
Sometimes frames can be useful for example if your site has third party content such as a third party owned map. Having this presented in an Iframe can makes sense.
Techniques
- Names and Titles must be added to every frame. The text must clearly and succinctly indicate the content of the frame. Both are needed as screen readers may detect only the name or the title.
- Noframes content must be added to each frame. This content will then be relayed to a user who’s browser can not support frames. Make sure the text is useful and provides a link to the content of the frame. For example
<noframes>
<p> <a href=”nav.html”>Main site navigation</a></p>
<p>This site uses frames which your browser does not support.</p>
<p>To access the rest of the site please use the main navigational link provided above.</p>
<p>If you experience any problems please contact the Web Manager at webmaster@this-site.com. Thank you. </p>
</noframes>
Providing noframes content that says “You need a browser that supports frames” is insufficient as a user may know this and be frustrated because they have no choice and need to use a browser that does not support frames.
- Iframes should be treated in the same way as frames. Provide a name, title and meaningful noframes content.
Testing tips
Verify that pages with frames have an appropriate and descriptive NAME and TITLE as well as NOFRAMES content that contains an HTML link out of the frame.
- Automated tools - Pages that have frames should be flagged up.
- Accessibility toolbar - Go to Structure - Frame Name/Title. Also go to Doc Info - List Frames (new window)
- Browser - View - Source - Edit - Find NAME, TITLE and NOFRAME
- Screen reader - Using JAWS press Insert + F9
- Text browser - See if NAMES and TITLES are present when navigating in and out of frames checking to see if they are logical.
Website Accessibility Initiative compliance
- 12.1 Title each frame to facilitate frame identification and navigation. Priority 1
- 12.2 Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone. Priority 2
For more information on techniques visit the Web Accessibility Initiative techniques page.
Other pages about layout and structure
Back to Design & Build
For Web Access Centre updates email webaccess@rnib.org.uk
Content author: webaccess@rnib.org.uk
Last updated: 06/03/2008 15:41
More info
Latest updates
Related info
Your stories
JK Rowling's story - when JK Rowling had her website redesigned she asked design agency Lightmaker to push the boundaries of accessible Flash. The original site offered the user an intensely visual experience. The new site needed to keep the explorative and creative elements but present them in a universally accessible way. Find out about the key features of the site and how it was designed. JK Rowling's accessible Flash website - full story