HTML and XHTML
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):
ul or ol
map
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;
}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 are for information purposes only, no endorsement implied.
(none currently listed)
Examine the content for anchor elements which are to be grouped together
.
Check that the anchor elements are grouped using list or
map elements.
Check #1 is true.