A title and an accessible frame source are provided for each frame.


Rationale

Frames are often used to separate banner, navigation and content sections on a Web page. When frame titles are missing or not meaningful, Web pages are not accessible, which means users must guess which frame contains the information they need or they must listen to the page sequentially. If titles are not provided, assistive technology may say "Untitled" or read the target filename of the frame.

Once the user selects the frame they want to read, the source of the frame must be accessible. If the source of the frame element is an image file, assistive technology cannot read the content because you cannot add alternative text to the image in the frame source. The user opens the frame and hears nothing or perhaps the name of the image file. The frame source must be accessible.

Required development and unit test techniques


To comply with this checkpoint, you must meet all of the following techniques. Some of these techniques are defined in WCAG 2.0 Level A Success Criterion 2.4.1 (link resides outside of ibm.com).

  1. Use frame titles: Provide meaningful titles for frames and iframes.

    Note: A hidden frame does not require a title if the following conditions are true.

  2. Provide accessible frame source: Provide an accessible source for each frame.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

HTML examples

  1. Use frame titles: Provide meaningful titles for frames and iframes.

    To comply with this technique, you must implement the following example.

    Use the title attribute of the <iframe> elements. The following example shows an <iframe> element that sources the solution after a student finishes taking a quiz. The meaningful title enables quick navigation to the solution using screen reader frame navigation features.

    <iframe src="quizSolution.html" height="100px" title="quiz solution">
    Alternative text for browsers that do not understand iframes.
    </iframe>

    Required unit tests for HTML development technique 1

    Manually perform the following unit test.

  2. Provide accessible frame source: Provide an accessible source for each frame.

    To comply with this technique, you must implement the following example.

    HTML example 2

    The source of the <frame> and <iframe> element must be accessible. Generally, this means making the source an HTML file, although there are other sources that are accessible, such as Lotus Domino NSF files and JSP files. The source cannot be an image file because you cannot assign alternative text to the image. Instead of using the image file as the frame source, include the image in an HTML file where you can add the appropriate alt attribute for the image.

    If the frame source is an image, create the source as an HTML file that contains the image with the appropriate alt attribute added. When the user opens the frame, the screen reader reads the alternative text. If the source is only an image file (<frame src="mydog.jpg">), it will not be accessible.

    <frameset> <frame src="dogs.html" title="Edward" name="Edward" /> </frameset>

    The following code is from the dogs.html file, which contains the image that is displayed in the frame:

    <img src= "mydog.jpg" alt= "Edward swimming in the pool." />

    Required unit tests for HTML development technique 2

    Use any Web syntax analysis tool to confirm that the source for the frame is a valid HTML file.


IBM® Lotus® Domino® examples

  1. Use frame titles: Provide meaningful titles for frames and iframes.

    To comply with this technique, you must implement the following example.

    Domino example 1

    Use the title attribute of the <frame> element. Domino applications provide the title attribute of the <frame> element by adding a meaningful name for each frame within the frameset. Even if you have specified that the frame does not receive focus using the "No focus on F6" option, you must still provide a useful frame name. Otherwise, the frame displays as "Untitled" when assistive technology displays the Frames List.

    Frame

    Required unit tests for Domino development technique 1

    Refer to the required unit tests for HTML development technique 1.

  2. Provide accessible frame source: Provide an accessible source for each frame.

    There are no specific examples for implementing this technique in Domino. Use the HTML examples as a guide.


Recommended development techniques

Although you do not have to implement the recommended techniques in order to comply with this checkpoint, you should review them because they can improve the accessibility and usability of the application.

The following techniques are recommended to comply with this checkpoint:

  1. Avoid complex frame relationships. Do not require a user to switch back and forth between frames.
  2. Allow users to scroll frames.
  3. Use the <noframes> element to support older browsers.

Recommended development example 1

Do not create complex relationships between frames that require the user to switch back and forth between frames to understand the information. For example, do not put data table headers in one frame and the table content in another frame just to keep the table headers visible while allowing the table rows to scroll. This type of frame makes it difficult for assistive technology users to understand the table.

Recommended development example 2

When defining frames, do not use the scrolling="no" attribute. If people with low vision magnify the page, they cannot access all the content if scroll bars are not present

Recommended development example 3

Use the <noframes> element to specify equivalent content for Web browsers that do not support frames.

In the following example, the <noframes> element provides links to the pages in the frameset so the user can navigate the content. Note that the <noframes> element contains a <body> element.

<frameset>
<frame src="masthead.html" title="Banner" name="banner" />
<frame src="navigation.html" title="Navigation" name="navigation" />
<frame src="content.html" title="Main content" name="main contents" />
<noframes>
<body>
<p>This page contains:</p>
<ul>
<li><a href="masthead.html">Banner</a></li>
<li><a href="mavigation.html">Navigation</a></li>
<li><a href="content.html">Main content</a></li>
</ul>
</body>
</noframes>
</frameset>

For an alternative to providing the links, repeat the contents of all the frames in the <noframes> element or provide a link to a page that contains that information. Simply advising the user to get a browser that is capable of displaying frames is not the appropriate use of the <noframes> element.

Recommended noframes technique for Information developers

For information developers, the default FRAMES.FRM file contains the following minimal <noframes> section that should be replaced with something more descriptive.

<noframes> <body> <p>This frameset contains: <ul> <li><a href="masthead.html">Banner.</a></li> <li><a href="navigation.html">Site navigation.</a></li> <li><a href="content.html">Initial content page.</a></li> </ul></p> </body> </noframes>

See WCAG 2.0 Additional Techniques (Advisory) for Success Criterion 2.4.1 (link resides outside of ibm.com) for a list of techniques and examples.


©2013 IBM Corporation

Last updated January 1, 2013.

W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.