Techniques for WCAG 2.0

Skip to Content (Press Enter)


H50: Using structural elements to group links



This technique relates to:


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


Example 1: Using lists to group links

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

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;

Example 2: 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.

Example Code:

 <map title="Navigation Bar">
    [<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>]


Resources are for information purposes only, no endorsement implied.

(none currently listed)



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

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

Expected Results