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 4, XHTML 1.0 and XHTML 1.1
This technique relates to:
Current assistive technology does not support navigation by div elements.
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
div
map
In this example the links are grouped using the ul and li elements.
<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>
</ulist>
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.
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.
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: block;
float: left;
} In this example the links in a breadcrumb trail are grouped within a div.
<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> : 1.3 </div>
Which will display as Home : Web Accessibility : Guidelines : 1.3
In this example, the map element groups a set of links, the title attribute identifies it as a navigation bar.
<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, div or map elements.
Check #1 is true.