Chapter 64. Creating ScreenTips for Hyperlinks

Occasionally, when you hover over an image with the mouse pointer on a Web page, a ScreenTip appears, giving additional information about the image. You know from Topic 34 that you, the designer, have complete control over what the ScreenTip says, because the browser displays whatever appears in the alt attribute of the img tag:

[View full width]
 <img src="/books/2/30/1/html/2/horse.jpg" width="100" height="50" alt="An antique red wooden rocking horse with  a brass bell on its collar"> 

Adding alt text to an image helps to make it more accessible for the visually impaired. The text describes the content of the image, allowing anyone who hears the alt text to imagine the picture without having to see it.

The same principle holds for text hyperlinks, especially hyperlinks that don't appear within a block of text. Sighted visitors simply notice the blue color of the link text and the underline, and they know what to do without having to think about it. But when you separate out a list of links in a sidebar, breadcrumb trail, or bottom-of-the-page navigation, the purpose of these links may not be clear to those who don't have the benefit of the blue, the underline, or the position of the links on the page in relation to the rest of the content. Therefore, you improve the accessibility of your site if you spell out exactly what these links do.

The anchor tag doesn't have an alt attribute for you to use in this way, but it does have a title attribute that performs the same function:

 <p>   <a href="../index.htm" title="Go to the home page">HOME</a> |   <a href="../products/products.htm" title="Go to the Products page">PRODUCTS</a> |   <a href="../services/services.htm" title="Go to the Services page">SERVICES</a> |    <a href="../aboutus/aboutus.htm" title="Go to the About Us page">ABOUT US</a> </p> 

TIP

To make your ScreenTip as accessible as possible, don't just repeat the text of the link. That defeats the purpose. Instead, tell the visitor where the link goes. Don't give Home Page as the title of the link, in other words. Go to the home page is better.

When you hover over a link with the mouse pointer, the text in the title attribute appears as a ScreenTip. It's a nice touch for your sighted visitors. More importantly, accessibility tools such as screen readers include the title of the link in their output, so the visually impaired understand clearly where the links go.

TIP

In your link title, you don't need to say Click here, as in Click here to go to the Product page. Clicking is understood. Just say, Go to the Product page.