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

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.