So far, our link discussions have focused on text links. However, another common way to implement links on a web page is with an image or photo. Sometimes the image simply looks like a button that the user might click like the one shown here.

Other times, the image might consist of anything from a corporate logo to a photograph which when clicked takes you to a page that tells you more about the photo or a related topic.

If the image contains text, such as this one, the text color contrast is also important. In a future post, I will cover color contrast in more detail. For now, I will just say that you should limit the text in images, and when you do include text, it must follow the same color contrast rules as ordinary content text and the text should be included in the alt text that screen readers access for the visually impaired.

In any case, using an image as a link is often as simple as adding the image to the page. Then with the image selected just as you would select content text to be used as the link text, insert a link. The actual method and keystrokes may vary depending on the text editing tool you are using, but the concept is essentially the same everywhere. The link wraps around the image. (Hint: If you are coding your page manually, it is easier to create the <a> link first. Then in place of the link text, place the <img> tag to reference the image you want to display.)

In addition, you need to know that while links only need a title attribute to describe their action, images have two attributes that must contain text, the title attribute and the alt attribute.

As with a text link, the title attribute consists of text that appears visually when the user hovers over the image. However, the alt attribute has an enhanced role.  It is used by search engines and screen readers for the visually impaired to describe the image.  In addition, when the image is used with a link, it must also describe what happens when you click on the image. You need to say where the link opens and what is being displayed. That is the fundamental difference from a text link.

Suppose the following image appeared on a webpage. Would you think that this was just a man holding a baby alligator? Would you know that the picture had a link that took the user to a separate page that explained more about baby alligators?

Probably not. You may not even think to click on the image. Perhaps the title text should tell the user a bit more.  Suppose this photo included alt text telling the reader to click on the image to learn more about baby alligators in Florida.  You could duplicate the alt text as the title text so it would display visually helping even the visual visitors to your site.

(Yes, that is really me holding a live baby alligator compliments of the folks at Gatorland, Orlando, FL who had stopped by.)

The alternative would be to place text around the picture telling the user to click on it to see more information, but why not just put that in the title text?

Another type of image is one that contains multiple links. This image type is called an image map because you must map each area of the image to its own link information. The following corporate organization chart is one such image that might utilize an image map to provide more information to the user about each corporate position.

For an image map, the <img> tag contains an attribute called: usemap. This attribute connects to a <map> tag that has one <area> tag for each separate clickable area. For the above image, there are five separate clickable areas, one for each position. The <area> tag contains attributes that define

• • the shape of the clickable area
  • the coordinates of that area
  • the URL that defines where the user will be taken when they click within the area
  • the title attribute
  • and alt attribute

You can even define a title and alt attribute for the overall image in the <img> tag that will apply if the user clicks or hovers outside of all the position boxes. While image maps can be created manually, it is best to use a tool to calculate the coordinates to build the <map> tag code block such as the one at Image Map Generator.

Remember that this organization chart is still an image made up of dots of color, and a blind person cannot read the labels on the individual blocks with a screen reader that only reads text created with text characters. Therefore, you must provide that information in the alt text of each area perhaps something like: ‘Open the Bio Page for the position of President held by Mitch Healey’. The title text might simply identify visually the box in the organization chart: ‘Bio for President Mitch Healey’.

My goal here is not to teach you how to create an image map. Many Internet references can do that including How To Create Multiple Links On A Single Image with Image Map. My point is that multiple links within an image map must have their own individual title and alt text strings just like individual images with links.

Before leaving today, I want to ask what is the difference between alt text and title text? When correctly implemented on the web platform, the alt text is used by search engines and for the visually impaired and should describe what the image is and where it takes the user when clicked. The title attribute appears when you hover over the hotspot of an image map or link. While the title text is not used by search engines or screen readers, it does help visual users to understand what you are trying to do.  For that reason, it is my opinion that it is not necessarily wrong to use similar alt and title text strings with images that have links if doing so makes your intent clearer to all site visitors.

See you later this week.