Making Web-Based Frames Accessible
Several years ago, Netscape introduced support for frames and, almost immediately, commercial and private web developers revamped their web sites to take advantage of the new technology. Since then, frames have become a standard part of HTML, though frames are less commonly used on commercial websites.
Frames let a web developer divide the browser's screen into several different areas, each displaying a different web page. Each of the different frames can act independently of other frames or can be designed to control the contents of other frames. For instance, a common use of frames is putting navigational links in one frame and the contents of those links in another frame. Using this method enables a user to scroll through a list of possible navigational destinations and choose different options without disturbing the list of navigational links. Every time the user chooses a different link, the contents of a different frame are refreshed.
Like other web technologies, frames present both a challenge and an opportunity for accessibility. The difficulties created by frames most directly affects those who use screen readers, because it may be very difficult for a screen reader user to determine from which frame the screen reader is reading. If frames are properly labeled, however, they may actually improve accessibility by creating an easy-to-reach area which is specifically designed for navigating a website and which is unaffected by visiting different areas on a website.
Identifying whether a web page uses frames and whether it includes features to make those web pages accessible involves some understanding of how frames are implemented. In designing a web page that uses frames, a web designer must either use a frameset or an inline frame. By far, ordinary framesets are more common, because they are supported by all frame-compatible browsers. However, inline frames offer a greater level of flexibility and may be used because of a web designer's formatting needs.
Designing a web page using a frameset involves two types of web pages. First, there is a web page that serves as a container for all of the other frames. HTML has very specific rules that limit the content of this container document (called the frameset). The frameset usually only contains tags identifying how each frame should be laid out and the content of those frames. Second, each of the separate frames within the frameset is actually a distinct web page. The content of those individual web pages is what the user will see on his or her computer screen. HTML is much more liberal in what is permitted within the non-container web pages. For instance, suppose that a web designer is designing a page using a frameset that will direct users to resources. He may design the page so that on the left side will be a frame with navigational links and on the right side will be a frame that displays the ultimate content from each those links with a default frame containing general information. The web designer can then create one file that includes just the navigational links and call it "navlinks.html" and create another file that includes the general information called "geninfo.html". Then, constructing a single web page that includes the contents of these files as separate frames would include only the following frameset:
<FRAMESET COLS="30%, 60%">
<FRAME SRC="navlinks.html" NAME="navlinks">
<FRAME SRC="geninfo.html" NAME="contents_page">
</FRAMESET>
Depending on the actual contents of the navlinks.html and geninfo.html files, the resulting frameset web page may look like:
Because the HTML standards require web pages using frames to have this format, determining whether a web page uses a frameset requires looking for either the <FRAMESET> or <FRAME> tags. Making the frame portion of these web pages accessible is extremely easy. Both the <FRAMESET> and <FRAME> tags support an attribute called title that can be used to describe the contents of the frameset or frame. For instance, if a designer wanted screen reader users to know that a page uses frames and that one frame includes navigational links and the other frame displays the content of those links, the web designer would only have to make the bold-faced additions to the frameset document:
<FRAMESET COLS="30%, 60%" TITLE="document about national parks using frames">
<FRAME SRC="navlinks.html" NAME="navlinks" TITLE="navigational links section">
<FRAME SRC="geninfo.html" NAME="contents_page" TITLE="contents section">
</FRAMESET>
Inline frames technology is a new way to offer greater flexibility in web page design. Unlike a frameset web page that divides up the entire screen into a separate regions, inline frame technology enables web designers to place frames of any size at any location on the screen. Creating an inline frame involves nothing more than including an <IFRAME> tag within the content of a regular web page. There is no need for a <FRAMESET> tag, because the entire web page is effectively the container for the frame, just as a web page can be a container for images or other content. An <IFRAME> tag can be very simple:
<IFRAME WIDTH=200, HEIGHT=200, SRC="info.html" ALIGN="right">
Such a tag can be used for creative web design. For instance, the following page uses a tiny frame in the upper right hand corner to display the definitions of words selected from the main document by the user:
Making this inline frame accessible is as simple as making a frameset web page accessible. Like the <FRAME> tag, the <IFRAME> tag also supports the title attribute that can be used to pass information to a screen reader about the contents of that frame. For instance, if the web designer wanted to identify the frame as including definitions for terms selected in the main document, the web designer would only need to modify the <IFRAME> tag with the boldfaced language:
<IFRAME WIDTH=200, HEIGHT=200, SRC="info.html" ALIGN="right" TITLE="definitions section">
Because inline frame technology is a relatively recent addition to the HTML standards, it is only supported by the very latest browsers.
Department of Commerce Web Advisory Council (WAC)
U.S. Department of Commerce
Send questions and comments about this page to WAC@doc.gov
Page last updated October 12, 2010
- Alicia R. Sowah
Deputy Director of Digital Engagement
Gregory Johnson
Co-Chair, Web Advisory Commmitee
-
Partnered By
