Guideline 12

Provide context and orientation information

12.1 - Use the "title" attribute to name frames. [Priority 1]

<FRAMESET cols="10%, 90%" title="Our library of electronic documents">

<FRAME src="nav.html" title="Navigation bar">

<FRAME src="doc.html" title="Documents"> <NOFRAMES> <A href="lib.html" title="Library link"> Select to go to the electronic library</A> </NOFRAMES>

</FRAMESET>

Example:

12.2 - Describe the purpose and relationship of frames [Priority 2]

<FRAMESET cols="10%,*,10%">

<FRAMESET rows="20%,*"> <FRAME src="promo.html" name="promo" title="promotions"> <FRAME src="sitenavbar.html" name="navbar" title="Sitewide

navigation bar" longdesc="frameset-desc.html#navbar"> </FRAMESET>

<FRAME src="story.html" name="story" title="Selected story - main content" longdesc="frameset-desc.html#story">

<FRAMESET rows="*,20%"> <FRAME src="headlines.html" name="index" title="Index of other

national headlines" longdesc="frameset-desc.html#headlines"> <FRAME src="ad.html" name="adspace" title="Advertising"> </FRAMESET>

<NOFRAMES> <p><a href="noframes.html">No frames version</a></p> <p><a href="frameset-desc.html">Descriptions of frames.</a></p> </NOFRAMES>

</FRAMESET>

Example:

12.3 - Divide large blocks of information into more manageable

groups where natural and appropriate. [Priority 2]

Mechanisms for Content Grouping

• Use tables for tabular data and describe the table with CAPTION.

• Group table rows and columns with THEAD, TBODY, TFOOT, and COLGROUP.

• Nest lists with UL, OL, and DL.

• Use section headings (H1 - H6) to create structured documents and break up long stretches of text.

• Break up lines of text into paragraphs (with the P element).

• Group related links.

• Use FIELDSET to group form controls into semantic units and describe the group with the LEGEND element.

• Use OPTGROUP to organize long lists of menu options into smaller groups.

12.4 - Associate labels specifically with their controls. [Priority 2]

Screen Reader:

“user name text”

• Use the FOR attribute to associate labels and controls.

• Example:

<label for=“username”>User Name: </label><input type=“text” id=“username” tabindex=“1” />

User Name:

Summary

• Know your tools available.

• Do everything possible to make sure that your page can be understood if it was read by a screen reader.

For a more comprehensive study, visithttp://www.w3.org/TR/WCAG10/#gl-complex-elements