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.
Changes are displayed as follows:
HTML and XHTML
This technique relates to:
The objective of this technique is to demonstrate how to group links into logical sets using the map element. 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. This technique uses the map element 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):
[end delete]
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.
Examine the content for anchor elements which are to be grouped together
.
Check that the anchor elements are grouped using [begin delete]list or[end delete]
map elements.
Check #1 is true.