Page Content

HTML frames can be problematic because:

  • Some browsers, including mobile browsers, may have problems processing frames.
  • Individual pages can be difficult to bookmark.
  • The organization of the pages may not be clear to screen readers.
  • There is less screen space that can be used to present content.

For these reasons, 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. Generally speaking, iFrames are better supported on screen readers than traditional HTML frames.
  2. Clearly identify each frame or iFrame in the following way:

    1. Include the TITLE attribute for each frame. The text within these attributes should describe the contents of the frame (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. Use the DOCTYPE declaration below for Web pages with frames. Doing so will signal a page with frames to a screen reader.
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

    WCAG Guideline 4.1.2—For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

  3. Whenever possible, include duplicate navigation within the content frame. Especially important is a link to the site map in case users right-click a frame to view it by itself (thus manually leaving frames mode).
  4. Include <noframes> content, including basic navigation functions, so your site is usable to older browsers that do not support frames.
  5. A link to a "No Frames" version of the site is often recommended. It is generally best to place this link towards the top of the homepage.
  6. Most content management systems allow Webmasters to use templates to standardize site headers, navigation and footers. Another option for some sites are server side includes added to each page.