See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.
HTML, XHTML
This technique relates to:
The objective of this technique is to create lists of related items using list elements
appropriate for their purposes. The ol element is used when the list is
ordered and the ul element is used when the list is unordered. Definition
lists (dl) are used to group terms with their definitions. Although the use
of this markup can make lists more readable, not all lists need markup. For instance,
sentences that contain comma-separated lists may not need list markup.
When markup is used that visually formats items as a list but does not indicate the
list relationship, users may have difficulty in navigating the information. An example
of such visual formatting is including asterisks in the content at the beginning of each
list item and using <br> elements to separate the list items.
Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.
The list structure (ul/ol) is also useful to group hyperlinks. When this is done, it helps screen reader users to navigate from the first item in a list to the end of the list or jump to the next list. This helps them to bypass groups of links if they choose to.
This example uses an ordered list to show the sequence of steps in a process.
Example Code:
<ol>
<li>Mix eggs and milk in a bowl.</li>
<li>Add salt and pepper.</li>
</ol>This example shows an unordered list of items to buy at the store.
Example Code:
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Butter</li>
</ul>This example uses a definition list to group a definition with the term that is being defined.
Example Code:
<dl>
<dt>blink</dt>
<dd>turn on and off between .5 and 3 times per second
</dd>
</dl> This example uses a defintion list to mark up pairs of related items. The pairs themselves are a logically related list. Since browsers lack wide support for CSS styling on definition list elements, span elements have been included in the markup for styling purposes only, and are not required:
<dl>
<dt><span>name:</span></dt><dd><span>John Doe</span></dd>
<dt><span>tel:</span></dt><dd><span>01-2345678</span></dd>
<dt><span>fax:</span></dt><dd><span>02-3456789</span></dd>
<dt><span>email:</span></dt><dd><span>[email protected]</span></dd>
</dl>
The following CSS styling can be used to format each paired item in the list on its own line, as well as giving a table-like layout:
dt, dd{float: left;margin: 0;padding: 0;}
dt{clear:both;font-weight: bold}
dt span{display: inline-block; width: 70px;}
dd span{display: inline-block; margin-right: 5px;}
This is shown in the working example of Contact information using a definition list
In this example the links are grouped using the ul and li
elements.
Example Code:
<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
<li><a href="kitchen.html">Kitchen</a></li>
<li><a href="bedbath.html">Bed & Bath</a></li>
<li><a href="dining.html">Fine Dining</a></li>
<li><a href="lighting.html">Lighting</a></li>
<li><a href="storage.html">Storage</a><li>
</ul> CSS can be used to style the list elements, so this technique can be used with a variety of visual appearances.
Here is a style that removes the list bullets and the left padding that creates the indent and flows the individual list elements horizontally.
Example Code:
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: inline;
}This style removes the list bullets and the left padding and displays the items in a floating block.
Example Code:
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: block;
float: left;
}Resources are for information purposes only, no endorsement implied.
Check that content that has the visual appearance of a list (with or without bullets) is marked as an unordered list.
Check that content that has the visual appearance of a numbered list is marked as an ordered list.
Check that content is marked as a definition list when terms and their definitions are presented in the form of a list.
All the checks above are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.