Understanding Accessibility
by Vivienne Trulock
Guideline 12. Provide context and orientation information.
There are 4 specific checkpoints in Guideline 12.
| No. | Checkpoint | Priority | How to check | Disability Accommodated |
|---|---|---|---|---|
| 12.1 | Title each frame to facilitate frame identification and navigation | .Priority 1 | .WebXact Automatic check | Blind |
| 12.2 | Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone | .Priority 2 | .WebXact Automatic check, Manual check for 12.2 |
Blind |
| 12.3 | Divide large blocks of information into more manageable groups where natural and appropriate | .Priority 2 | . Manual check for 12.3 | Blind |
| 12.4 | Associate labels explicitly with their controls | .Priority 2 | .WebXact Automatic check | Blind |
Checkpoint 12.1 - Title each frame to facilitate frame identification and navigation
How do I do it?
Simply title each frame of a frameset using a title attribute.
html
<FRAME src="nav.htm" title="Navigation bar">
<FRAME src="doc.htm" title="Documents">
<NOFRAMES>
<A href="about.htm" title="about dreamweaver summer classes"> Select to find out about Dreamweaver Summer Classes</A>
</NOFRAMES>
</FRAMESET>
Xhtml
<FRAME src="nav.htm" title="Navigation bar" />
<FRAME src="doc.htm" title="Documents" />
<NOFRAMES>
<A href="about.htm" title="about dreamweaver summer classes"> Select to find out about Dreamweaver Summer Classes</A>
</NOFRAMES>
</FRAMESET>
How do I check that it meets the WCAG criteria?
WebXact will check this automatically for you
Checkpoint 12.2 - Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone
How do I do it?
add a longdesc attribute to the frame tags.
html
<FRAME src="nav.htm" title="Navigation bar" longdesc="framesetdescription.htm#nav">
<FRAME src="doc.htm" title="Documents">
</FRAMESET>
Xhtml
<FRAME src="nav.htm" title="Navigation bar" longdesc="framesetdescription.htm#nav" />
<FRAME src="doc.htm" title="Documents" />
</FRAMESET>
Link this to a page which describes the frames function. For example, the nav description for the Dreamweaver Summer Classes site above might be: this frame provides links to the major sections of the site: General Content, Availability, Sign Up, and Contact Information.
How do I check that it meets the WCAG criteria?
Individuals using screen readers may not know which frame to choose to view if the title details are minimal or unclear. If the ‘title’ attribute does not provide clear unambiguous information relating to the content and purpose of the frame, a long description is required. Where frame titles are not clear, pages without an associated ‘longdesc’ attribute will be deemed to have failed the check.
Checkpoint 12.3 - Divide large blocks of information into more manageable groups where natural and appropriate
This checkpoint refers to the correct use of headers, list elements and div tags and their use in grouping related elements.
How do I do it?
Form controls can be grouped using the <fieldset> and <legend> tags. The <optgroup> tag can also be used to group choices.
Tables and associated tags such as <thead>, <tbody>, <tfoot> and <colgroup> should be used to group tabular data.
List items should use <ul>, <ol>, <dl>, <dd> & <li>.
Header elements should be used correctly to break up long stretches of text and add structure.
The <p> tag should be used to break text into paragraphs.
How do I check that it meets the WCAG criteria?
Pages will be manually scanned for elements which are not grouped properly such as large amounts of text or choices. Where pages have elements which are not grouped and could be obviously grouped, the page will be deemed to have failed the check. However, this guideline is very subjective and groupings made by one person may be different from another’s.
Checkpoint 12.4 - Associate labels explicitly with their controls
Labels can be associated both explicitly and implicitly with form elements. Implicit associations are where the label surrounds the form element
Html
<INPUT type="text" id="name" tabindex="1">
</LABEL>
Xhtml
<INPUT type="text" id="name" tabindex="1" />
</LABEL>
Explicit associations are made using the 'for' attribute only. The label does not wrap the element.
Html
<INPUT type="text" name="name" id="fname">
Xhtml
<INPUT type="text" name="name" id="fname" />
How do I do it?
Use the 'for' attribute to associate labels explicitly.
How do I check that it meets the WCAG criteria?
WebXact will check this automatically
