Titles and Names in the Frameset

Although frames are not completely inaccessible, they can pose barriers to accessibility if certain precautions are not taken. To make navigating a framed site easier for screen readers, we will need to name our pages in such a way that the screen reader can speak the name (or titles) of the pages. This does not mean that we simply name each page and give each page a title. We have to take special steps to add extra name and title attribures. We are going to explore frames to get an idea of how they work, and what you must do to make them accessible.

The information below is based on Dreamweaver version 4; however, the concept and code to make a framed site accessible is the same for all HTML editors.

A framed site is actually a group of separate pages that are displayed in different windows within the entire window called a "frameset", which is the index page. The frameset specifies the layout of the different pages. The following example is a frameset (index) page with three separate HTML pages nested in it:

Although there appears to be three pages in this framed site, there are actually four:

1. The frameset (index.html) that frames the three pages you see above
2. The top (banner) page
3. The left side (navigation) page
4. The large area (main content) page

Let's assume that you have already created and saved the frameset and the other three pages you see above. An example of how you might name the HTML pages follows:

1. index.html (frameset)
2. banner.html
3. navigation.html
4. main.html

The names you see above are the file names of each page. In addition to giving each page a file name, we need to add some information to the frameset (index.html) page. Before we can add this extra information, you must first open the frames palette as you see below.

Adding the Name Attribute to the Frameset

We are going to add a "name" and "title" attribute of each page to the frameset page. To add the name attribute to the frameset page, click on the banner area of the frames palette, and then look for the frame name field in the properties inspector as you see below. Type a one-word description of the page you are naming. You can also assign a title for each individual page, but you will have to manually add another title attribute to the framset page. Titles can have more than one word. Repeat this process for each page of your framed site.

Adding the Title Attribure to the Frameset

You will need to add the title to the frameset manually. In the frames palette, click the outer border of the box that is framing the three pages (see arrow). This will allow you to give the frameset a title (top of the window). The title is what people bookmark. Remember, too, that the framset is the index.html page, and that when the site is bookmarked by someone, the title of a page is what is being bookmarked.

We will now manually add the title attribute for the other three pages to the frameset page. To do this, go into code view of the frameset page, and add the "title=" attribute to each of the <frame src...> references for each of the pages. A tile can be more than one word, but the name can be only one word. See the example below.

<frameset rows="80,*" cols="*">
<frame src="banner.htm" name="banner" title="Banner Page">
<frameset cols="80,*">
<frame src="navigation.htm" name="navigation" title="Navigation Bar">
<frame src="main.htm" name="main" title="My Web Site">
</frameset>

As a reminder, the information about the frameset page is not necessarily specific to Dreamweaver. Most HTML editors will allow you to edit the name and title of the frameset page. Dreamweaver MX makes this process a lot smoother.

Back to Top

Navigate to other How To pages with the links below.