Techniques for WCAG 2.0

Skip to Content (Press Enter)

This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.

Hide All Edits   |   Toggle Deletions  |   Toggle Issue Numbers   |   Toggle [start]/[end] Markers   |   Show All Edits

Changes are displayed as follows:


H50: Using structural elements to group links



This technique relates to:

[begin delete]

User Agent and Assistive Technology Support Notes

Current assistive technology does not support navigation by div elements.

[end delete]


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;
[begin delete]

Example 2: Using div to group links

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

Example Code:

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

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

[end delete]

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.

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[begin delete], div [end delete] or map elements.

Expected Results