Easy as A,B,C dynamic A to Z indexes - Our friend the user agent
(Page 2 of 5 )
The benefit of a one page A to Z index is that it shows immediately what is available, so the visitor can pick and choose without reloading. Properly marked up, it is easy to navigate and accessible to assistive technology such as screen readers, text browsers and keyboard navigation.
A lot of user agents let the user jump directly to a certain word simply by typing it in. Mozillas find ahead functionality, which can be activated at Tools Options Advanced - Accessibility, will highlight the word or link you typed in automatically for you.
This makes it easy to navigate in large documents.
Other assistive technology generates a list of headers and a list of links used in the document, and allows users to jump to them directly.
Taking these options into consideration, it is pretty easy to come up with the proper HTML for an A to Z list.
<h1>A to Z</h1>
<h2>Navigation</h2>
<ul id="atoz">
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
[
and so on
]
<li><a href="#x">X</a></li>
<li><a href="#y">Y</a></li>
<li><a href="#z">Z</a></li>
</ul>
<div id="contents">
<h3><a name="a" id="a">A</a></h3>
<ul>
<li>Dummy</li>
[
and so on
]
<li>Dummy</li>
</ul>
<p class="back2"><a href="#atoz">back to navigation</a></p>
<h3><a name="b" id="b">B</a></h3>
<ul>
<li>Dummy</li>
[
and so on
]
<li>Dummy</li>
</ul>
<p class="back2"><a href="#atoz">back to navigation</a></p>
[
and so on
]
<h3><a name="z" id="z">Z</a></h3>
<ul>
<li>Dummy</li>
[
and so on
]
<li>Dummy</li>
</ul>
<p class="back2"><a href="#atoz">back to navigation</a></p>
</div>
These lists are all we need to have a proper A to Z index (example: unstyledatoz.html). Users can click the letter of choice and get sent down the page to the appropriate list. Assistive technology offers the headlines as an extra list to make it even easier to reach the right list.
We add some styles, and voila, our A to Z list turns into horizontal navigation (example:buggyatoz.html). We indicate to the visitors that they interact with it via hover effects for mouse users, and focus highlights for keyboard users.
#atoz{
list-style-type:none;
margin:0;
padding:0;
}
#atoz li{
display:inline;
list-style-type:none;
margin:0;
padding:0;
padding-right:.2em;
}
#atoz li a{
padding:.2em;
background:#ccc;
color:#000;
}
#atoz li a:hover{
background:#333;
color:#fff;
}
#atoz li a:active,#atoz li a:focus{
background:#369;
color:#fff;
}
Next: The Redmond spoiler >>
More Design Usability Articles
More By Chris Heilmann
/ 28 
