Screen reader users may choose to navigate the content of a page by tabbing through links and bypassing other content. It is important that each link has meaningful text describing the purpose of the link without relying on the surrounding text. While it is important to be descriptive it is also important to keep links as concise as possible. Screen readers already inform users that they have encountered a link so there is no need to include language such as “link to” or “click the link” in link text.
Examples of links that may be unclear if read out of context of the surrounding content:
- Click Here to see today's weather.
- More Info about web accessibility.
- Read More about building websites in Drupal.
Examples of links that are concise, descriptive and clear:
- Today's weather.
- Learn about web accessibility
- Building websites in Drupal
Avoiding Redundant Links
Remember that screen reader users often navigate a page by tabbing from link to link as the screen reader announces each link. If redundant links going to the same destination are grouped together, it can be cumbersome for screen reader users. In the following example of redundant links we have an image of the Golden Gate Bridge that links to the same page as the linked caption below it. The screen reader will announce something like “Link graphic Golden Gate Bridge. Golden Gate Bridge Link”.
Golden Gate Bridge
In this case, instead of linking both the image and the caption we can instead create one link that contains both the image and the caption. The HTML code might look like this:
<a href=”#linktopage”><img src=”goldenGateBridge.jpg” alt=”” /><br />Golden Gate Bridge</a>
Notice, the alt text is left blank. That is because the caption is part of the link and will be announced by the screen reader. The user will hear something like “Link Golden Gate Bridge”.
Guidelines for Links
- Link text should be meaningful independent of the surrounding context.
- Link text should be concise.
- There is no need to include text such as “Link” or “Click here” in the link text.
- If possible, avoid the use of redundant links going to the same destination.
