All links must contain either text or an image with alt text

 

In order for a link to be readable by screen reader users links must all contain either plain text, or in the case of a linked image, alt text describing where the link goes. If the linked image contains text, a good general rule is to make the alt text the same, or similar to the text in the image.

checkmark-smallA plain text link.

Source Code

<a href="#">Get Help</a>

Implementation

Get Help

checkmark-smallA linked image with appropriate alt text.

In this case, screen readers will announce the alt attribute to the user.

Source Code

<a href="#"><img src="images/get-help.jpg" alt="Get Help"></a>

Implementation

Get Help

x-smallA linked image with no text and an empty alt attribute.

In this case screen reader users will not know the function of this link.

Source Code

<a href="#"><img src="images/get-help.jpg" alt=""></a>

Implementation

x-smallA linked image with no text and a missing alt attribute.

In this case screen reader users will not know the function of this link.

Source Code

<a href="#"><img src="images/get-help.jpg"></a>

Implementation

x-smallA linked image with no text, a missing alt attribute, but using the title attribute to convey the description of the image.

Screen reader support for reading the title attribute for descriptions of images is inconsistent and should not be relied upon as the sole means to convey important information. However, it is alright to use the title attribute in conjunction with an alt attribute.

Source Code

<a href="#"><img src="images/get-help.jpg" title="Get Help"></a>

Implementation