H50: Using structural elements to group links

The objective of this technique is to demonstrate how to group links into logical sets. When links are grouped into logical sets (for example, in a navigation bar or main menu that appears on every page in a site) they should be marked up as a unit. Navigation bars are usually the first thing someone encounters on a page. People who are sighted are often able to ignore navigation parts and start reading the content of the page. Someone using a screen reader must first listen to the text of each link in the navigation bar before reading the interesting content. There are several ways to mark up content so that a user with a screen reader can jump over the navigation bar and avoid reading all of the links.

Group links via one of the following mechanisms (in descending order of preference):

ul or ol
div
map

Examples

Example 1: Using lists to group links

In this example the links are grouped using the ul and li elements.

<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
    <li><p><a href="kitchen.html">Kitchen</a></p></li>
    <li><p><a href="bedbath.html">Bed & Bath</a></p></li>
    <li><p><a href="dining.html">Fine Dining</a></p></li>
    <li><p><a href="lighting.html>Lighting</a></p></li>
    <li><p><a href="storage.html">Storage</a><li><p>
</ulist>

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.

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.

 ul.navigation {
 list-style: none; 
 padding: 0;
}
ul.navigation li {
 display: block; 
 float: left;
}

Example 2: Using div to group links

In this example the links in a breadcrumb trail are grouped within a div.

<div title="Breadcrumb trail" class="breadcrumb">
   <a href="home.html">Home</a> :
   <a href="technology.html">Web Accessibility</a> :
   <a href="guideline.html">Guidelines</a> :
   1.3
 </div>

Which will display as Home : Web Accessibility : Guidelines : 1.3

Example 3: Using map to group links

In this example, the map element groups a set of links, the title attribute identifies it as a navigation bar.

 <map title="Navigation Bar">
  <p>
    [<a href="home.html">Home</a>] 
    [<a href="search.html">Search</a>] 
    [<a href="new.html">New and highlighted</a>] 
    [<a href="sitemap.html">Site map</a>]
  </p>
 </map>

Resources

Related Techniques

Tests

Procedure

Examine the content for anchor elements which are to be grouped together .

Check that the anchor elements are grouped using list, div or map elements.

Expected Results

Check #1 is true.