Accessibility for Web Developers

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).

Important - Priority 1 Checkpoint 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

You might also like...

Comments

About the author

Gez Lemon United Kingdom

I'm available for contract work. Please visit Juicify for details.

Interested in writing for us? Find out more.

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” - Martin Fowler