|
Accessibility Tip:
Designing Accessible Navigation Part 1
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
The flashiest, most flamboyant navigation systems are often inaccessible to disabled visitors, hard for all visitors to understand, and all but invisible to search engines. That happens with some of the most popular navigation systems: image maps, DHTML, and Java applets. Learn how to use these techniques without compromising the accessibility level of your Web site or its appeal to search engines.
Create Readable Image Maps
An image map is a graphic that contains several different links, each defined by certain coordinates (often called "hotspots"). Image maps are one of the most popular navigation systems around. Almost every Web site contains at least one.
As useful as they are though, image maps can interfere with the overall accessibility of your Web site. This is mainly because you're including important information about your site inside an image. That makes it harder for visitors with visual disabilities to understand the information.
Fortunately, you don't have to dump your painstakingly designed image maps, but you may need to add to them!
- Alternative text: include ALT descriptive text inside your IMG tag and inside all hotspot areas. That allows visitors without graphical browsers to still understand the purpose of the links.
- Text links: Never use an image map as your only navigational tool. Always include text links on the page too. Visitors using some assistive technologies find it helpful if you include links that take them directly to the main content of the page or to the text links.
- Readable text: Make sure that the text contained in your image map is legible. Carefully choose your colors to improve contrast and avoid red/green color combinations. Also, make sure that the text is large enough to read easily: don't try to save space by displaying your navigation system in 8-point type!
- Use client-side image maps: Client-side image maps display more quickly because the visitor's browser interprets them. Visitors don't have to wait for the browser to request instructions from the server each time they click on a hotspot. In addition, server-side image maps are not accessible to visitors using nongraphical browsers.
|
Use ALT Descriptive Text Wisely
Here's the code for a simple image map.
<IMG src="navBar.gif" usemap="#navMap"
alt="Cattery Navigation Bar">
<MAP name="navigationMap">
<AREA coords="125,15,200,46" shape="rect"
href="persian-cats.htm" alt="Persian Cats">
<AREA coords="230,15,320,46" shape="rect"
href="maine-cats.htm" alt="Maine Coon Cats">
<AREA coords="360,15,440,46" shape="rect"
href="siamese-cats.htm" alt="Siamese Cats">
<AREA coords="490,15,560,46" shape="rect"
href="contact.htm" alt="Contact the Laughing
Cat Cattery">
</MAP>
|
Note that we included ALT text descriptions with the IMG and AREA tags. We also used important keywords in the descriptions and the file name. Remember that search engine spiders can't see your images, but they do read ALT text descriptions and file names. Use that text to provide important information to both your human and spider visitors!
NetMechanic's Page Primer tool will remind you if you've forgotten to include ALT tags and other HTML code that helps search engines index and rank your Web pages. Page Primer is part of Search Engine Power Pack, a full-suite of Web promotion tools that help you optimize, submit, and track your page rank.
Careful With Menu-Driven Navigation
Another popular navigation structure is to use navigation menus created with JavaScript (such as select and go menus) or Java applets. While many of these menus look great and add a cutting-edge feel to your site, they can cause a host of problems - not just with accessibility.
- Incompatible browsers: Some browsers don't recognize JavaScript: WebTV only understands a limited version called JellyScript. IBM's Home Page Reader doesn't support applets at all.
- Old software versions: This is a particular problem is Java applets. Due to the Microsoft/Sun dispute over Java, even visitors with brand new PCs may have old versions of Java that don't recognize your applets.
- Device dependent: Avoid using either Java applets or JavaScript code that requires mouse input. For example, a visitor using keyboard navigation won't be able to fire the onDblclick event handler. If you use it in a link, you may block access to some visitors.
|
Script or applet-driven menus annoy many visitors who have problems moving their mouse with pinpoint accuracy and may lock out some visitors completely. But there are things you can do to make navigation easier:
- NOSCRIPT: Include a NOSCRIPT tag that contains text links. Visitors with JavaScript turned off will get the text links instead of the menu. Search engine spiders will follow those links too.
- Text links: Always provide alternate text-based navigation whether you're using applets, image maps, or JavaScript.
- Alternate events: If you use a device-dependent event handler like onMouseup, also include the onKeyup event handler so that the event will work from either the mouse or the keyboard.
- ALT text: Add an ALT text description to your APPLET tag that describes the purpose of the applet and explain that alternate text navigation is also available on the page.
|
Browser incompatibility problems aren't limited to JavaScript and Java. Even simple HTML mistakes can break your page in some browsers. Most busy webmasters don't have the time or the money required to adequately test their pages in a lot of browsers and operating systems.
Instead, they rely on NetMechanics's Browser Photo to show them actual screen shots of their Web page in 16 different browser and operating systems.
Visitors can do a lot of things on your site: read your content, buy your products, sign up for special offers, and recommend it their friends. One thing visitors won't do though is waste time trying to figure out your navigation system.
In Part 2 of this story, we'll show you how to use text links to increase your site's accessibility, usability, keyword density, and search engine appeal.
|
