Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Story on base tag.
base tag story search bar.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Tips on managing links.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

Accessibility Tip:
Designing Accessible Navigation Part 1

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
January 2002
Vol. 5, No. 1
 • Promotion Tip
 • HTML Tip
 • Accessibility Tip
  

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.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2010,
Keynote NetMechanic
All rights reserved.