Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Navigation

Last updated Oct 17, 2003.

Those with no visual challenges can quickly go exactly where they want to go on a Web site by using visual cues. In general, they expect to find the navigation on the top, left, right, and/or bottom of the Web site. We've also become accustomed to ignoring banners on the top of the page while looking for what we need. Alas, it isn't easy for those with visual impairments.

Skip Navigation

Screen readers read everything including the navigation. If the navigation is the first thing in the HTML page, then the screen reader reads that, which gets tedious after visiting the site several times. To get around it, use the "skip technique," which allows the reader to skip the navigation and go right to the content using the <a> element. Put the link at the top of the page like this:

<a href="#skipNav">Skip navigation links</a>

Place the <a name="skipNav"></a> right after the navigation or someplace where the main content begins. The "skip navigation" doesn't have to be visible on the page. One way around it is to use an invisible image using the <a> and <img> elements together. Another way is to make the "skip navigation" the same color as the background so it's not visible or create an attribute with style sheets. However, the current thinking is to make it visible, but not necessarily super-obvious. You don't have to stop with "skip navigation." Offer other "skip" options such as "skip to news," "skip to search," "skip to login," and so on.

<accesskey> and <tabindex>

Other elements you can use are <accesskey> and <tabindex>. <accesskey> assigns a character to an HTML element giving the user the ability to access labeled items with one stroke. <tabindex> assigns the tab order to items so when the user presses the Tab key, the selected item moves to the next selected item marked with <tabindex>. Add an <accesskey> to an item like this:

<a href="login.asp" title="Login to the Web site" accesskey="l">Login</a>

When the user presses l, the user will fly right to the login section of the page. The <tabindex> is applicable to <a>, <button>, <input>, <select>, <object>, <textarea>, and area. To add a <tabindex> to any of these elements, do the following:

<a href="products.html" tabindex="1" title="Learn about our products">Products</a>
<a href="company.html" tabindex="2" title="Read about the company">Company Info</a>
<a href="contact.html" tabindex="3" title="Send us an email">Contact</a>

Notice that the <tabindex> is 1, 2, and 3. That means if the user presses Tab, it'll go to Products first. Press the Tab again and it goes to Company Info. The numbering can even be 10, 20, and 30. The tab progresses in the number order, even if you skip a number and make Contact 4 instead of 3, it'll tab in the same order.

In the previous examples, we also use the title attribute. It's similar to alt in that it provides a text description, except here it's a description of the link rather than an image. When a person puts the mouse pointer over the link, the title description appears like a tooltip.

Frames

Thankfully, frames are becoming less commonplace on the Internet. They are troublesome for users because they often take longer to load and make it difficult for users to bookmark pages. When using frames, you're essentially loading multiple HTML pages into one page as opposed to one HTML page. Visitors who find an interesting page might want to bookmark them, and most frames pages bookmark only the main link to the home page. The links rarely change on frames-based pages unless designed around it. Not all users know how to direct others straight to the page. Instead, they give directions as in, "Go to the home page, click on this, click on this, and you're there."

The best thing to do is avoid frames, but it's not always possible. There are companies that require frames pages because they always want their employees to go to the main page. In this case, it's necessary to understand how to create accessible frames pages. Simply stated, use the name and title attributes with the <frame> element. We'll use an example reflecting how most Web sites look. Most Web sites have a title (the name of the site or company), navigation, and the main content. Be aware name isn't available in XHTML 1.1; it is replaced with id.

<framset cols="200,*">
<frame src="main.html" name="main" title="Company ABC home page" />
<frame src="nav.html" name="navigation" title="Navigation for Web site" />
<frame src="title.html" name="title" title="Company ABC" />
<noframes>
<body>
<p>This site uses frames. You can get to the <a href="main.html" 
[ccc]title="Company ABC home page">main site here</a>.</p>
</body>
</noframes>
</frameset>

It's important to use <noframes> on every <frames> page so those not using a frames-compatible browser like Lynx and wireless devices can access the site.