Alt text and linked images
November 12, 2007
Alternative text for images is rule number one of web accessibility. While the lack of appropriate alternative text is perhaps the biggest barrier to accessibility for screen reader users, I have noticed a tremendous increase in the use of alternative text and thus, general web accessibility, in recent years. However, I am now noticing a very alarming trend of missing or inappropriate alternative text for images within links.
When an image has no alt attribute or if the alt attribute is empty or null (alt=”"), screen readers essentially ignore those images. Decorative images should be given empty or null alt text. When the content presented in an image is conveyed elsewhere, such as in a caption, the image may also be given empty alt text. However, any time an image is the only content within a link, the image MUST be given alternative text that presents the function of that link.
Consider the following, examples that may be found in an online photo album.
Photo of an amazing lightning storm
In this case, the content of the image is presented in the caption, so the image may be given empty alt text.
Photo of an amazing lightning storm
In the above example, the image itself is a link. When a screen reader encounters a link, it must present something to the user. For text links, it would typically identify that a link is present and then read the text within the anchor element. When the content of the link is an image that does not have alternative text, the screen reader has no content to identify for the link. As a result, screen readers will typically read either the image file name or the URL of the page being linked to. In most cases, this is of little or no value to the user - or even worse, it makes the page even more inaccessible than if the link and image had been ignored altogether.
Presentation of linked images are becoming more prevalent, yet they rarely have appropriate alternative text.
In the situation above, one solution would be to duplicate the caption within the alternative text of the image. This will result in redundancy - the screen reader would read something like, “Link. Photo of an amazing lightning storm. Photo of an amazing lightning storm.” An even better solution is to place both the image AND the caption within the link.
In the above example, because text within the link provides the content of the image and the function of the link, the image itself can be given an empty alt value.
The HTML 5 working group is currently proposing that the alt attribute be made optional for images. The argument is that screen readers ignore images that have no alt attribute, so there is little justification in requiring the attribute for images that do not need it. This argument is quite sound, although I believe that this would promote a much more lax approach to accessibility and will result in more content-conveying images that do not have appropriate alternative text. But when an image is the only element within a link, it must have alternative text so that the function of the link is provided to all users. Unless the HTML 5 specification explicitly requires this, their proposal that the alt attribute be made optional will certainly cultivate an environment where accessibility is decreased.
