My Board

Dynamic A to Z indexes by Chris Heilmann 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. A welcome shortcut for visitors on text-heavy websites is an A to Z index of the services offered. Much like the sitemap, it offers a fast way to find what you need on the site. An index is even more user-focused. The sitemap reflects the structure of the site – something that is only relevant to visitors when it is badly implemented in the navigation. An A to Z index shows all the things users can get out of a site, structured in a way that is easy to grasp and well known - alphabetically. Government websites in the United Kingdom are legally bound to offer an A to Z index, and yes, they can be very hard to navigate or structure logically. The examples described in this article are all contained in the accompanying zip file. [attachment=685:attachment] Planning the A to Z We put the content of the A to Z index to the side now; you should know best what to add and what to omit when listing your services. If you don’t, ask your visitors. Let’s talk about the Web functionality instead. There are several ways to design an A to Z index technically on the Web. Depending on the size of your site, the content can be too overwhelming for one page, so you will split it up into several pages dynamically on the server. This will also make it easy to add extra functionality, like a search. An A to Z index split up into 26 pages and an index is good for faster loading times and easier maintenance, but it also means an extra click and page load for a functionality that should be a shortcut on the site. A website of moderate size – and you can define “moderate” by using an underused technology called “common sense” – can fit an A to Z index onto one page. 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. Mozilla’s “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. [code]    <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>[/code] 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. [code]    #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;    }[/code] 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. [code]    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%;    }[/code] 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. What we want to achieve is that users with javascript enabled will only see the section of the links they chose in the navigation, and initially the first one. The stage directions of our script are the following: * Check whether the browser is capable of understanding DOM manipulation. * Check whether the necessary elements are available. * Find out whether there is already a target in the URL, to allow other sites to link directly to a certain section. * If there is one, define this as the current section; otherwise define the first one in the navigation. * Loop through all the links in the A to Z navigation. o Read the target of the link and compare it with the current section – if they match, make the link the \"current\" one. o Hide the section the link points to. o Define a function and apply it to the current link that will: + Read the target of the link. + Show the section it points to and set the link as the current one. + Hide the old section and remove the current state from the last link that was activated. o Show the current section. In order to keep our code clean and the functionality separated, we use classes in the style sheet that get applied to or removed from the different elements. [code]    ul#atoz li a.current{                background:#ddd;    }    .hidden{                position:absolute;                left:-999em;    }    .shown{                position:relative;                left:0;    }[/code] This extra style and the script (example:dynatoz.js) turns our list into a dynamic A to Z index (example:dynatoz.html). When the document is loaded, all sections but the first (or the one in the URL) get hidden. Activating any of the links in the navigation will show the section and change the window’s location – something that is necessary to allow the visitor to bookmark the page. If that is not fancy enough, we can activate the change when the mouse hovers over the link by adding a class to the list navigation: [code]<ul id="atoz" class="dohover">[/code] This will trigger the change of the sections when the link is activated and when the mouse is hovering over it (example:hoveratoz.html). Note that this will not change the location of the browser and negates the option to bookmark. The script needs several classes in the CSS and the appropriate IDs on the HTML element to add the effect. This was done to allow complete control over the look and feel without changing the javascript. The IDs make the script a lot faster as we can access elements by their ID rather than looping through all of them. The IDs are: atoz: The A to Z list navigation; this can be in any format, as the script loops through the links contained within it. The best option is an unnumbered list, though. contents: The element containing all the different sections from A to Z, normally a DIV. The classes are: hidden: hides the section to which it is applied shown: shows the section that was previously hidden current: applied to the current link dohover: applied to the atoz element to indicate that the effect should be applied when you mouse over it, and not only when you click it. All these settings can be changed in the first few lines of the script: [code]// check if necessary elements are available            var n=document.getElementById(\'atoz\');            var c=document.getElementById(\'contents\');            // Define the classes in use to show and hide the elements            var hc=\'hidden\';            var sc=\'shown\';            var cc=\'current\';            var mc=\'dohover\';[/code] Saving even more screen estate Long lists are boring to look at, and the need to scroll the screen can be very annoying. We aligned our A to Z navigation horizontally; why not do the same with the content lists? All we need to add is a style that defines a width for each of the list elements and floats them to the left: [code]#contents.columns li{                float:left;                width:10em;    }[/code] The link pointing back to the navigation needs to clear each float, otherwise following sections might be indented: [code] #contents.columns p.back2{                clear:both;    }[/code] Now we have a dynamic A to Z index that takes up the least possible screen estate (example:columnatoz.html). The list items do get arranged horizontally, not vertically. If we wanted to arrange them vertically, we’d need to resort to more excessive use of CSS and messy HTML suffering from “classitis” (the overuse of classes in the HTML, effectively mixing structure with presentation). There is an article on the subject of multicolumn lists explaining all the ins and outs at Community MX [2]. Links [1] [url=\"http://www.jimthatcher.com/skipnav.htm\"]http://www.jimthatcher.com/skipnav.htm[/url] - Internet explorer bug concerning anchors and keyboard navigation. [2] [url=\"http://www.communitymx.com/content/article.cfm?cid=27F87\"]http://www.communitymx.com/content/article.cfm?cid=27F87[/url] - Multi column lists with CSS. [url=\"http://www.devarticles.com/c/a/Web-Design-Usability/Easy-as-A-B-C-dynamic-A-to-Z-indexes\"]source: DevArticles[/url]