Home arrow Design Usability arrow Page 3 - Easy as A,B,C – dynamic A to Z indexes
DESIGN USABILITY

Easy as A,B,C – dynamic A to Z indexes


It's a good idea to offer your visitors as many logical ways to navigate your website as possible. This gives them more chances to find exactly the product or information for which they came to your site in the first place. Sitemaps are a wonderful solution, but many of your visitors may find an A to Z index of your site easier to understand. Chris Heilmann explains how to implement such an index.

Author Info:
By: Chris Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 37
March 30, 2005
TABLE OF CONTENTS:
  1. · Easy as A,B,C – dynamic A to Z indexes
  2. · Our friend the user agent
  3. · The Redmond spoiler
  4. · Making the list dynamic
  5. · Customizing the script

print this article
SEARCH DEVARTICLES

Easy as A,B,C – dynamic A to Z indexes - The Redmond spoiler
(Page 3 of 5 )

Our list is perfectly valid, does not feature any extraneous HTML elements and is fully accessible. We can use it, place the “Bobby approved AAA” badge on the site and pat our backs till they hurt.

Alas, we don’t live in a perfect world, and there is always a bully to make our life harder. In this case, the bully is almost omnipresent on the Web, and a lot of assistive technology on Windows operating systems depend on it – Microsoft Internet Explorer.

Let’s try to navigate our A to Z index (example:buggyatoz.html) with a keyboard. On Firefox, we can hit “tab” to go through the list and “enter” to get to the letter we chose. Another “tab” would get us to the first link in the list; in the demo site it gets us to the “back to index” list.

On MSIE, however, hitting enter does send us to the list, but hitting “tab” again does not get us to the “back to index” link; instead, it takes us back to the navigation. This can be a rather frustrating endless circle.

This browser bug has been undetected for a long time, mainly because Web design was achieved via layout tables in the past, and inside a table cell MSIE behaves nicely. The solution is to nest the link inside an element with a defined width, as Jim Thatcher discovered [1].

This means that to make our navigation keyboard accessible in MSIE, we need to nest the target links and lists in an extra element with a defined width.

HTML:

<div id="contents">

            <div>

                        <h3><a name="a" id="a">A</a></h3>

                        <ul>

                                    <li>Dummy</li>

                                    <li>Dummy</li>

                                    <li>Dummy</li>

                                    <li>Dummy</li>

                                    <li>Dummy</li>

                        </ul>

                        <p class="back2"><a href="#atoz">back to navigation</a></p>

            </div>

            […]     

</div> 

CSS:

#contents div{

            width:100%;

}

Now we have a fully accessible and usable A to Z index (example:plainatoz.html). The only annoyance for the high end users is that they see a long page with a lot of links, which is not very aesthetically pleasing. Help is available, though, and its name is JavaScript.


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C – dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials