Techniques for WCAG 2.0

On this page:

-

# H50: Using structural elements to group links

## Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.1 (Bypass Blocks)
  - How to Meet 2.4.1 (Bypass Blocks)
  - Understanding Success Criterion 2.4.1 (Bypass Blocks)

## Description

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`

- `map`

## Examples

### 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>
    </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;
    }

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

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 lists

- HTML 4.01 MAP element

- HTML 4.01 title attribute

## Related Techniques

(none currently listed)

## Tests

### Procedure

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

- Check #1 is true.

- Top
- Contents
- Intro
- Previous: Technique H49
- Next: Technique H51