A title and an accessible frame source are provided for each frame.
On this page:
Rationale
Frames are often used to separate banner, navigation and content sections on a Web page. Navigating a page with frames can make it easy for someone using a screen reader to quickly go to the section they want to read as long as the frame has a meaningful title. Assistive technology provides support to list all frames on the page. For example, someone using a screen reader might access a web site with three frames: Banner, Navigation and Main. They can select the frame titled "Main" to go to the main content of the page without having to listen to banner and navigation content. This improves the productivity and accessibility of navigating the page. However, if frame titles are not meaningful, such as "Right", the user must guess which frame contains the information they need, or listen to the page sequentially. If no title has been provided, assistive technology may say "Untitled" or read the target filename of the frame. When the frame title is missing or not meaningful, the web page is not accessible.
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 there is no capability to add alt text to the image. The user will open the frame and hear nothing or perhaps the name of the image file. The frame source must include the appropriate accessibility mark-up.
Required development techniques
Compliance with this checkpoint requires all of the following techniques to be met.
Some of these techniques are defined in the WCAG 2.0 Level A Success Criterion for Guideline 2.4.1.
1. Group content blocks and use frame titles: Use frame elements to group blocks of repeated material (HTML) and the title attribute of the frame element.
2. Use page title: Use the title element for the page.
3. Provide accessible frame source: Provide an accessible source for each frame.
Examples for HTML developers
1. Group content blocks and use frame titles: Using frame elements to group blocks of repeated material (HTML) and the title attribute of the frame element.
To comply with this technique, all of the following examples must be implemented.
Example 1
Use frame elements to group blocks of repeated material. The following example shows a frameset containing two frames where the source is a set of repeated navigation links and main content. Grouping navigation links, main content and other repeated material in frames enables quick navigation to the desired page location using screen reader frame navigation features. Note that the content in sitenav.html and main.html must be accessible.
<frameset>
<frame src="sitenav.html" title="navigation links" name="navigation links" />
<frame src="main.html" title="main content" name="main content" />
</frameset>
Refer to WCAG 2.0 examples for using frame elements to group blocks of repeated material.
Example 2
Use the title attribute of the frame and iframe elements. The site navigation and main content frames in the previous example have meaningful titles which enable effective identification and navigation of content areas by screen reader users.
The following example shows an iframe which 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>
Refer to WCAG 2.0 examples for using frame elements to group blocks of repeated material.
Example 3
Note that WAI-ARIA examples are not supported by all browsers. If your product needs to be accessible in multiple browsers one or more of the required HTML/CSS specific techniques must be implemented as well as a WAI-ARIA technique.
If navigation links are present, assign a WAI-ARIA navigation role to the element containing the links or to a heading that refers to the links. The following example uses a WAI-ARIA navigation landmark to allow screen reader users to navigate directly to a frame containing a navigation area. The technique may be implemented by simply assigning a navigation role to the frame element.
Screen reader users navigate to landmarks using landmark navigation keys to advance sequentially through all landmarks on a page. A screen reader may also present a list of page landmarks to enable jumping to different areas on a page.
<frameset>
<frame src="sitenav.html" title="navigation links" name="navigation links" role=”navigation” />
</frameset>
Example 4
Note that WAI-ARIA examples are not supported by all browsers. If your product needs to be accessible in multiple browsers one or more of the required HTML/CSS specific techniques must be implemented as well as a WAI-ARIA technique.
Use a WAI-ARIA main role to skip to the main content. The following example uses a WAI-ARIA main landmark to enable screen reader users to go directly to the main content on a page. The technique may be implemented by simply assigning a main role to the main frame element.
<frameset>
<frame src="main.html" title="main content" name="main content" role=”main” />
</frameset>
Screen reader users navigate to the main content using landmark navigation keys to advance sequentially through all landmarks on a page. A screen reader may also present a list of page landmarks to enable jumping to different areas on a page.
2. Use page title: Use the title element for the page.
To comply with this technique, all of the following examples must be implemented.
Example 5
Use the title element for the page. The source HTML file for the frame must also have a <title> element that describes the page.
Example 6
Following is a title element example from the Accessibility Center Web site. The title element for this page lets the user know they are on the Accessibility Center site, in the Developers and Testers section, under the Web Accessibility Checklist and the frames checkpoint.
<title>Human Ability and Accessibility Center | Developers & testers | Web Accessibility | Frames</title>
3. Provide accessible frame source: Provide an accessible source for each frame.
To comply with this technique, all of the following examples must be implemented.
Example 7
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 there is no way to assign alternative text to the image. Instead of using the image file as the frame source, include the image in an HTML file so the appropriate alt attribute can be provided for the image.
If the frame source is an image, make the source an HTML file that contains the image with the appropriate alt attribute added. When the frame is accessed, the alt text is read by the screen reader. If the source is just an image file (frame src="mydog.jpg"), it will not be accessible.
<frameset>
<frame src="dogs.html" title="Edward" name="Edward" /> </frameset>
The code for dogs.html contains the image that is displayed in the frame.
<img src= "mydog.jpg" alt= "Edward swimming in the pool." />
Examples for Domino developers
1. Use page title: Use the title element for the page.
To comply with this technique, all of the following examples must be implemented.
Example 8
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 will display as "Untitled" when it is displayed in the Frames List using assistive technology.
- Select the frame and open the Frame Properties Box.
- Go to the Basics tab and enter a title in the name field. Examples of meaningful frame names include "Navigation" or "Main" for the main content of the page. Names like "top" or "Red" are not meaningful and do not meet the requirement of the checkpoint. Do not add the word "frame" to each frame title since the screen reader will identify the object as a frame. If the title is "Navigation frame", the user will hear "Navigation frame frame." when they navigate to the frame.
2. Use page title: Use the title element for the page.
Example 9
When the frame includes a page, provide a meaningful name for the page.
- Select the page and open the Page Properties Box.
- Go to the Basics tab and enter the page name in the name field. The page name should briefly describe the purpose of the page.
3. Provide accessible frame source: Provide an accessible source for each frame.
Example 10
Do not use abbreviations in frame or page names. Frame names like "navfr" cannot be understood when spoken by a screen reader.
- Providing an accessible source for each frame. There are a variety of source formats that can be used for frames including HTML, JSP and .NSF files. The source cannot be an image file because there is no way to assign alternative text to the image.
Recommended development techniques
Implementation of recommended techniques is not required to comply with this checkpoint, but these techniques should be reviewed since they can improve the accessibility and usability of the solution.
1. Avoid complex frame relationships.
Do not require a user to switch back and forth between frames.
2. Allow users to scroll frames.
Do not disable scroll bars.
3. Use the noframes element.
Use noframes in order to support older browsers.
Examples for recommended techniques
1. Avoid complex frame relationships.
Example 11
Do not create complex relationships between frames that require the user to switch back and forth between frames in order 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 use of frames makes it very difficult for someone using assistive technology to understand the table.
2. Allow users to scroll frames.
Example 12
When defining frames, do not use the attribute scrolling="no". If someone with low vision is magnifying the page, they cannot access all the content if there are no scroll bars.
3. Use the noframes element.
Example 13
The noframes element is used 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>
An alternative to providing the links is to 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 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 2.4.1 (link resides outside of ibm.com) for a list of techniques and examples.
Required test techniques
The following test tools and techniques are required to test this checkpoint.
Test tools:
Install the following tools to test this checkpoint:
Required accessibility verification test techniques:
Use the following accessibility verification test (AVT) techniques to validate the Web content. It is recommended that these tests be performed in order.
| Action | Result | |
|---|---|---|
|
Test the Web site with a Web syntax analyzer to verify the compliance criteria as follows:
|
Pass:
|
| Action | Result | |
|---|---|---|
|
Verify the following compliance criteria with a screen reader.
For detailed instructions on how to test this checkpoint with a screen reader follow the ‘Screen reader accessibility verification tests for Web checklist 5.1' document. |
Pass:
|
©2009 IBM Corporation
Last updated September 02, 2009.
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.