Design Principle
Conform to standards and separate document content and structure from visual presentation
§ 508 1944.22: (i) Frames shall be titled with text that facilitates frame identification and navigation.
Frames organize a web page into different sections or zones. These zones can be used to organize sections for masthead, navigation, content and other information on a web page. Each frame section is basically a separate web page with its own content source. Visual users can find the content relationship between the different sections, however, for the screen reader user the relationship between content sections can be very challenging and must be conveyed by other means.
Frames are implemented using <frameset>, <frame>, and <iframe> (inline frame) elements. When using Frames, the <body> element is replaced by the <frameset> element. Each section size is defined by column width and number of rows within the <frameset> tag. The content of each frame is retrieved using src attribute of the <frame > element.
< frameset cols="10%, 90%" >
<frame src="nav.html">
<frame src="content.html">
</frameset>
Frames can be challenging for users with non-graphical browsers, assistive technology like screen readers and devices with small displays. Screen readers have the capability to read titles and names given to a <frameset>. While frames are not inaccessible to screen readers, frames can can be very disorienting
Challenges and Recommendations
Use correct document type
Pages using frames should have the correct document type indicating to screen readers and non-graphical browsers that the web page consists of multiple frames.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Identify the content of the Frame
If the frames haven't been named appropriately, then an assistive technology device will not will not be able to identify them. Use the name and title attributes of the <frame> elements to provide textual information to non-graphical browsers and screen readers. Use the name attribute to identify the frame and the title attribute to identify the purpose of the content.
< frameset cols="20%, 80%">
<frame src="nav.html" title="Menu" name="navigation" />
<frame src="content.html" title="Main Content" name="contents" />
</frameset>
The source file should always be in an accessible format
Do not use image files as source files for frames as there is no way to assign alt text to the image . If an image is used, place the image with the alt text within an HTML file and use it as the source file for the Frame.
Frame relationships
Non graphic browsers, screen readers and devices with small displays, render and read web pages with frames a single frame at a time. Do not create relationship between frames where the user needs to switch back and forth.
Scroll bars
Use scroll bars for Frames with content. This allows people using screen magnification the ability to scroll and read the content of each frame.
<noframe> element
Use <noframe> element to provide equivalent content for web browsers and assistive devices that do not support frames
< frameset cols="20%, 80%">
<frame src="nav.html" title="Menu" name="navigation" />
<frame src="content.html" title="Main Content" name="content" />
<noframe>
<body>
<p>This is a page with no frames</p>
<ul>
<li><a href="nav.html">Navigation</a><li>
<li><a href="content.html">Main Content</a><li>
</ul>
<body>
</noframe>
</frameset>
Inline frames <iframe>
Inline frames are similar to frames except they are used to include additional web content as a sub-window on a web page without needing to define a frameset for the new content. The <iframe> elements can include name and title attributes .
Most modern browser support inline frames. For browsers that do not support <iframe> element, provide a link to alternative page for the content using a linked placed between the <iframe> tags as browsers that do not support <iframe> can read information between the tags.
<iframe src="newpage.html" width="30%" height="50">
<p>Your browser does not support frames. <a href=newpage.html> This link will let you view the content </a> in your browser. </p>
</iframe>
