More on meaningless link labels

Roger Johansson has an excellent blog posting on “Click here and other meaningless link phrases“. Screen reader users often (and very often on home pages, site maps, and link indexes) open a list of all of the links on a web page. The link label (everything between the <a> and the </a>) is read for each link. As such, the link label must make sense out of context. This is relatively easy with text, but slightly more difficult when the link contains an image.

Whenever an image is the only content inside a link, that image MUST have functional alternative text. When a screen reader accesses such a link, it will identify the presence of a link then read the alternative text for that image. But if the image is missing alternative text or if the alternative text is empty (alt=””), then the screen reader does not have any content to convey for that link. Most screen readers in this instance will read the URL for the link, which often is not very helpful at all.

As mentioned in my alt text article, the alternative text for an image should convey the CONTENT and FUNCTION of the image. Defining function can be quite difficult. Here’s a few tips:

• You typically do not need the words “link to” in the alternative text because a screen reader will identify the image as being within a link. It should be apparent visually that the image is a clickable link.
• Often, the content of the image alone will not suffice for linked images. You often need to describe where the link will take the user. For instance, if I provide a photo of my daughter that links to her online photo gallery, alternative text of “My daughter” probably isn’t sufficient. “My daughter’s photo gallery” would provide both the content and the function.
• Do not go overboard in describing the function. Be succinct, but adequately describe the content and function. Alt text in these instances is often used to provide additional information and instructions. In most cases, you need to provide no more content than is provided visually with the image.
• You typically do not want to include the URL of the page you are linking to in the image alternative text. Screen reader users can have the URL identified if they choose and sighted users may view the status bar in most browsers for the same information.
• Remember, if text is also contained within the link, the alternative text for the image may be that text. There’s no need to provide the text twice. An example of this is the RSS image in the left-hand menu of our site. The alt attribute is empty because the content and function is provided in the text.

So next time you make a link that contains an image, ensure that it has appropriate alternative text that presents the content of the image as well as the function of the link.