Home › Details by Tech

Frames on a Web Page

Tue, 02/10/2009 - 21:02 — ejp10

HTML frames can be 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 arbitrary 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).
    4. Include the DOCTYPE declaration for frames on the top of each HTML file to signal a page with frames to a screen reader. The header is
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

    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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <head> <title>A page that contains frames</title> </head>

<body>

....

<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>

 

Links

Top of Page

‹ FormsupFront Page & Microsoft Expression ›