This is where a link to a text based alternative page would be placed.
Penn State Homepage

Teaching and Learning with Technology

Creating Accessible Web Sites

TLT Menu: TLT Home : TLT Suggestions

Site Menu: Home Page | External Links | Site Map

Frames

HTML frames are problematic because 1) some older browsers, including the text browser Lynx do not support them 2) individual pages can be hard to bookmark 3) the hierarchy of the pages may not be clear in screen reading mode and 4) there is less screen space that can be used to present content.

For that reason, many users manually switch out of frames view for many sites. Consider avoiding frames unless they are needed for a particular Web application. If frames are needed, remember these tips:

Synopsis

  1. If you use frames, clearly identify each frame in the following ways.

    1. Include the TITLE or NAME attribute for each frame. These names should indicate content (e.g. "navigation" or "content", not position ("top" or "right") or an artrary number ("frame 1" or "frame 2").
    2. Make HTML file names for each frame meaningful (e.g. "navigation-menu.html") in case that is what a screen reader identifies.
    3. Include a text title on each frame (it can be hidden in visual browsers).

    SECTION 508 - Frames shall be titled with text that facilitates frame identification and navigation.

  2. Whenever possible, include duplicate navigation within the content frame, especially a link to a sitemap, in case users "right-click" to just open up the content frame only (thus manually leaving frames mode)

  3. Include <noframes> content including basic navigation for older browsers which do not support frames.

  4. A link to a "No Frames" version is often recommended. Placement towards the top of the homepage is best.

  5. Alternative to frames include tables and server side includes to place in standardized headers and navigation.

Sample Accessible Frame Code

Table Mimicking Frames
Top Title Frame

My Accessible Frames Site
Left Navigation Frame

MAIN MENU

No Frames View 		Right Content Frame

H1 Header Here for Page Title

Rest of content

Duplicate navigation for accessibility

Page 1 | Page 2 | Page 3 ... Page n

View Sitemap

 

View the Code

<frameset rows="80,*" frameborder="no" framespacing="0" border="0">
     <frame src="titlebar.html" title="My Page Titlebar">
<frameset cols="175,*" frameborder="no" framespacing="0" border="0">
     <frame src="mainmenu.html" title="Main Menu" name="mainmenu">
     <frame src="initialcontent.html" title="Page Content" name="content">
</frameset>

Note that all NAMES , TITLES and file names indicate which type of content is available. Avoid using generic names like "left frame" or "frame01".

No Frames Skeletal Navigation

Here is an example of NOFRAMES code with skeletal navigation makes the site accessible to non-frames browsers.

<noframes>
<h1> Welcome </h1>
<p> This page... </p>

<h2> Main Menu </h2>

<ul> /!-- Alternative No Frames Navigation --/
     <li> <a href="page1.html">Page 1</a></li>
     <li> <a href="page2.html">Page 2</a></li>
     <li> <a href="page3.html">Page 3</a></li>
     <li> <a href="pagen.html">Page n</a></li>

</ul>
</noframes>

</frameset>
</html>

 

Back To: Details by Tag

 

Top of Page

Site Menu: Home Page/Main Menu | Section 508 Guidelines | Quick Checklist | Details by Tag
| Links | I.T.S. Seminar Page | Sitemap

©1999-2006 Pennsylvania State University.

This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.