Website Frames – Don’t Use Frames To Design / Build Your Site



Unless you REALLY know what you are doing and why you are doing it…. Don’t Use Frames To Design Your Website.

If possible, avoid using frames. Some people have difficulty navigating within frames, either because the frames are confusing or because the software they are using simply cannot read frames.

When using frames, always offer meaningful NOFRAMES content for those people who cannot read framed information. Use NOFRAMES properly – “upgrade your browser” is of no help to someone using (through choice or necessity) the most up-to-date version of a browser that simply doesn’t handle frames. The NOFRAMES section should contain meaningful content with links to the other pages in your site, so that they can be accessed without frames.

If you must use Frames, ensure that each frame has a sensible TITLE (in addition to the NAME) which gives a clear indication of the content to be found in that frame.

Website Design: Are Website Frames Accessible?

HTML frames are occasionally used to organize a website design by assembling at least two other web pages into a shared visual space. The strongest arguments against using frames have more to do with usability than accessibility. For example, frames can reduce the amount of usable space on a page, they make it difficult or impossible for users to link directly to or bookmark a specific page within a frameset, and they often prevent users’ Back buttons from working as expected.

As for accessibility, frames are not in and of themselves inaccessible. Keyboard users and assistive technology users are able to navigate among the various frames that compose a frames page. However, frames do present additional usability challenges that are unique to users with disabilities, particularly those who use screen readers.

Often in a frames interface, a user’s selection of a link in one frame changes the content in another frame. A sighted user might recognize this change visually, whereas screen reader users receive no indication that a change has occurred. Therefore, in order for this interface to be usable by screen reader users, they must be provided with clear instructions as to what to expect, including where to find the updated content. Screen reader users can switch back and forth between frames, but they must know which frames to switch to in order to find the content they’re seeking.

Maximum usability of frames for screen reader users also requires that each frame has a meaningful title that speaks to its function. Each frame is titled in the definition of the frameset, by the defining of a TITLE attribute for each element. “Navigation” and “Content” are two common examples of frame titles that work well for screen reader users. In contrast, frame titles like “FrameA” and “FrameB” or “Left Frame” and “Right Frame” should be avoided, because they do not communicate frame function and are of little or no use to screen reader users.

What Is The Correct Use Of Frames?

If you must use frames, then do so correctly. For visually enabled users, frames may organize a page into different zones. For non-visual users, relationships between the content in frames (e.g., one frame has a table of contents, another the contents themselves) should be conveyed through other means.

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.

In the following sections, we discuss how to make frames more accessible. We also provide an alternative to frames that uses HTML 4.01 and CSS and addresses many of the limitations of today’s frame implementations.

Providing a Frame Title

W3C Checkpoint:

  • 12.1 Title each frame to facilitate frame identification and navigation. [Priority 1].

Use the “title” attribute to name frames.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="10%, 90%"
title="Our library of electronic documents">
<FRAME src="nav.html" title="Navigation bar">
<FRAME src="doc.html" title="Documents">
<NOFRAMES>
<A href="lib.html" title="Library link">
Select to go to the electronic library</A>
</NOFRAMES>
</FRAMESET>

Describe Frame Relationships

W3C Checkpoint:

  • 1.1 Provide a text equivalent for every non-text element (e.g., via “alt”, “longdesc”, or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [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]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Today's news</TITLE>
</HEAD> <FRAMESET cols="10%,,10%"> <FRAMESET rows="20%,">
<FRAME src="promo.html" name="promo" title="promotions">
<FRAME src="sitenavbar.html" name="navbar"
title="Sitewide navigation bar" longdesc="frameset-desc.html#navbar">
</FRAMESET> <FRAME src="story.html" name="story" title="Selected story - main content"
longdesc="frameset-desc.html#story"> <FRAMESET rows=",20%">
<FRAME src="headlines.html" name="index" title="Index of other
national headlines" longdesc="frameset-desc.html#headlines">
<FRAME src="ad.html" name="adspace" title="Advertising">
</FRAMESET> <NOFRAMES>
<p><a href="noframes.html">No frames version</a></p>
<p><a href="frameset-desc.html">Descriptions of frames.</a></p>
</NOFRAMES> </FRAMESET>
</HTML> 
  • The frameset-desc.html might say something like:
  • #Navbar – this frame provides links to the major
    sections of the site: World News, National News,
    Local News, Technological News,
    and Entertainment News.
  • #Story – this frame displays the currently selected story.
  • #Index – this frame provides links to the day’s
    headline stories within this section.

Note that if the a frame’s contents change, the text equivalent will no longer apply. Also, links to descriptions of a frame should be provided along with other alternative content in the NOFRAMES element of a FRAMESET.

Writing for browsers that do not support FRAME

Checkpoints in this section:

  • 1.1 Provide a text equivalent for every non-text element (e.g., via “alt”, “longdesc”, or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1]
  • 6.5 Ensure that dynamic content is accessible or provide an alternative presentation or page. [Priority 2]

In this example, if the user reads “top.html”:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>This is top.html</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%" title="Our big document">
<FRAME src="main.html" title="Where the content is displayed">
<FRAME src="table_of_contents.html" title="Table of Contents">
<NOFRAMES>
<A href="table_of_contents.html">Table of Contents.</A>
<!-- other navigational links that are available in main.html
are available here also. -->
</NOFRAMES>
</FRAMESET>
</HTML>

and the user agent is not displaying frames, the user will have access (via a link) to a non-frames version of the same information.

Frame sources

Checkpoints in this section:

  • 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. [Priority 1]

Content developers must provide text equivalents of frames so that their contents and the relationships between frames make sense. Note that as the contents of a frame change, so must change any description. This is not possible if an IMG is inserted directly into a frame. Thus, content developers should always make the source (“src”) of a frame an HTML file. Images may be inserted into the HTML file and their text alternatives will evolve correctly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A correct frameset document</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Evolving frameset">
<FRAME name="goodframe" src="apples.html" title="Apples">
</FRAMESET>
</HTML>
<!-- In apples.html -->
<P><IMG src="apples.gif" alt="Apples">

The following deprecated example should be avoided since it inserts IMG directly in a frame:

Deprecated example.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A bad frameset document</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Static frameset">
<FRAME name="badframe"
src="apples.gif" title="Apples">
</FRAMESET>
</HTML>

Note that if, for example, a link causes a new image to be inserted into the frame:

 <P>Visit a beautiful grove of
<A target="badframe" href="oranges.gif" title="Oranges">oranges</A>

the initial title of the frame (“Apples”) will no longer match the current content of the frame (“Oranges”).

Using FRAME targets

Checkpoints in this section:

  • 10.1 Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user. [Priority 2]

Content developers should avoid specifying a new window as the target of a frame with target=”_blank”.

Frames and Search Engines

Frames can also cause search engines major problems. For instance, a search engine may only deliver the content frame when accessed through deep links in the SERPs – thus rendering your well thought out navigation to other pages redundant.

UK Government recommendations:

‘Ensure that a website using a frames environment is usable with non-frames capable browsers by using the <noframes> option.’

Guidelines for UK Government websites
Illustrated handbook for Web management teams

Jakob Nielsen’s Original Top Ten Mistakes in Web Design

‘Splitting a page into frames is very confusing for users since frames break the fundamental user model of the web page. All of a sudden, you cannot bookmark the current page and return to it (the bookmark points to another version of the frameset), URLs stop working, and printouts become difficult. Even worse, the predictability of user actions goes out the door: who knows what information will appear where when you click on a link?’

Jakob Nielsen’s Alertbox for May 1996:

W3C Information of note

Note. A frameset definition never changes, but the contents of one of its frames can. Once the initial contents of a frame change, the frameset definition no longer reflects the current state of its frames.There is currently no way to encode the entire state of a frameset in a URI. Therefore, many user agents do not allow users to assign a bookmark to a frameset. Framesets may make navigation forward and backward through your user agent’s history more difficult for users. W3C

To get a full and complete understanding of how to design with frames , visit the W3C Frames Development page.

 

If you enjoyed this post, please share :)




Learn how you can get more sales from your website

Subscribe for free and let us share with you:

  • how to submit your site to Google, Yahoo & Bing
  • how to optimise your site to get more traffic from Google
  • how to target the most valuable keywords for your business
  • how to make your site rank better in free Google listings
  • how to rank high & avoid Google penalties in 2014

Trust Hobo with your SEO plan

Find out more