Distinct Link Text

When creating links on a page it is very important to use distinct link text. It can be confusing if you have multiple links with the same name pointing to different URLs

The screen shot below shows a web site that has many “View Detail” buttons. The screen shot also shows the JAWS “List Links” window. The screen reader can pull all the links on a page into this popup window. Notice the links are all distinct. The page has used an image to create the “View Detail” buttons with a distinct ALT attribute. This causes the visual user to see a simple button, but the screen reader user hears a more complete link.

Try to imagine you are speaking to a friend over the telephone. Read the link text to your friend. Could s/he understand from your reading what the link really does?

This is also very good for Search Engine Optimization. The Search Engine Bot cannot see the image and will use the ALT attribute.

Example 1:

This example uses ALT attributes to make the links distinct.

Screen Shot show a search results page with many Add to Cart buttons.

Code


<img 
src="Conn-8D-CONNstellation-Series-Double-Horn-483596-i1438330.wwbw.jpg" 
alt="View Conn 8D CONNstellation Series Double Horn Product Details"
>

Example 2:

This example has used images with no ALT attributes for “More Details”, “Add to Cart”, and “Compare”. The blind user cannot order from this page. It’s a law suite waiting to happen.

Screen Shot show a search results page with many Add to Cart buttons.

Code


<imgsrc="addtocart.jpg">

Works With

ALT and TITLE attributes in the IMG tag
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

  • WCAG 2.0 SC 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)

Comments are closed.