Guideline 12
Guideline 12: Provide context and orientation information
Complex relationships in a page may cause difficulties for visitors with
cognitive disabilities, and visitors with poor eyesight to understand. Grouping
elements and providing context and orientation information about the relationships
between the elements can aid the accessibility and usability of your site.
This guideline has 4 checkpoints, ranging in importance from Level "A" (must
be addressed for the site to be accessible), to Level "AA" (should
be addressed for the site to be accessible).
12.1
Title each frame to facilitate frame identification and navigation
This checkpoint is a priority 1 checkpoint. It must be satisfied for your
site to be considered accessible. Some user agents are unable to access multiple
frames simultaneously, or can be configured to display a single frame. Providing
a frame title provides visitors with information about the contents of the
frame, allowing them to select a particular frame to view.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
<title>Your Title</html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<frameset cols="30%, 70%" title="Your document title">
<frame src="navigation.html" title="Site navigation" />
<frame src="main.html" title="Main content area" />
<noframes>
<body>
<p>
<a href="navigation.html">Table of Contents</a>.
<!-- Any other content required added here -->
</p>
</body>
</noframes>
</frameset>
</html>
12.2 Describe the purpose of frames and how frames relate to each other if
it is not obvious by frame titles alone
This checkpoint is a priority 2 checkpoint. It should be satisfied for your
site to be considered accessible. For frames where the title doesn't adequately
describe the contents of the frame, you should create a separate document to
describe the contents. The document can be accessed through the longdesc attribute
of the frame element, which should be provided along with the title attribute.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
<title>Your Title</html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<frameset cols="30%, 70%" title="Your document title">
<frame src="navigation.html" title="Site navigation" />
<frame src="main.html" title="Main content area" longdesc="framedesc.html" />
<noframes>
<body>
<p>
<a href="navigation.html">Table of Contents</a>.
<!-- Any other content required added here -->
</p>
</body>
</noframes>
</frameset>
</html>
12.3 Divide large blocks of information into more manageable groups where
natural and appropriate
This checkpoint is a priority 2 checkpoint. It should be satisfied for your
site to be considered accessible. Grouping forms controls provides context
to the controls about their relationships. The optgroup element may be used
to group related options together for the select element. The label attribute
is a required attribute, to provide the context of the group.
<select name="Menu">
<optgroup label="Poultry">
<option value="Chicken">Chicken</option>
<option value="Duck">Duck</option>
</optgroup>
<optgroup label="Meat">
<option value="Lamb">Lamb</option>
<option value="Beef">Beef</option>
</optgroup>
</select>
The fieldset element allows related controls and labels to be grouped, adding
structure to the form. They also improve accessibility by allowing tab navigation
for visual user agents, and speech navigation for speech orientated user agents.
The legend element allows a caption to be assigned to a fieldset. The legend
further helps determine the structure of the document if it is rendered non-visually.
The following example illustrates the use of the fieldset and legend elements.
<form id="application" method="post" action="apply.asp">
<fieldset>
<legend>Personal Details</legend>
<p>
<label for="forename" accesskey="F">
Forename:
<input type="text" size="40" value="forename" id="forename"
name="forename" tabindex="5" />
</label>
</p>
<p>
<label for="surname" accesskey="S">
Surname:
<input type="text" size="40" value="" id="surname"
name="surname" tabindex="6" />
</label>
</p>
<p>
<label for="dob" accesskey="D">
Date of Birth:
<input type="text" size="12" value="" id="dob"
name="dob" tabindex="7" />
</label>
</p>
</fieldset>
<fieldset>
<legend>Address</legend>
<!-- Field controls for the address fieldset placed here -->
</fieldset>
<p>
<input type="submit" value="Apply" name="applyButton" tabindex="14" />
</p>
</form>
12.4 Associate labels explicitly with their controls
This checkpoint is a priority 2 checkpoint. It should be satisfied for your
site to be considered accessible. The "for" attribute allows you
to make an explicit association with a form control. The value provided for
the "for" attribute must match the "id" attribute of an
element in the document.
<label for="forename" accesskey="F">
Forename:
<input type="text" size="20" value="forename" id="forename"
name="forename" tabindex="5" />
</label>
As well as being explicitly bound to the form control, the label is also implicitly
bound to the form control because of its positioning. A problem arises if you
layout your form with a table, with the label in one column, and the form control
in another column, as the label element cannot span across td elements. In
this case, the form control is no longer implicitly bound to the label. Using
the "for" attribute explicitly binds the control, but older user
agents may not be able to associate the relationship. Modern user agents, including
assistive technologies, are capable of handling explicit associations.
<td>
<label for="forename" accesskey="F">
Forename:
</label>
</td>
<td>
<input type="text" size="20" value="forename" id="forename"
name="forename" tabindex="5" />
</td>
Further Reading