WebAIM Blog

For the last several years, we have been using the Amazon.com web site to demonstrate functionality of WAVE. We do this because it is a complex site that has some accessibility features, many accessibility problems, and frankly, because the accessibility of the site seems to change almost daily. We’re never quite sure what Amazon developers are going to fix and/or break each time the site changes, but it’s always some new accessibility disaster and/or success that we can find, analyze, and discuss.

Today in a training, I noticed that their link to the “accessible” version of their site was being hidden off-screen using CSS. In the past, they’ve used an invisible 1 pixel X 1 pixel image at the top of the page to alert screen reader users to this version of their site. But what was most interesting is that the CSS used to hide the link (position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;) is the exact code recommended by us in this WebAIM article.

Well, they say that imitation is the best flattery and I’m pleased to see that someone at Amazon.com is reading our site. I hope they continue to read and implement accessibility - how wonderful it would be if a high-profile online store stepped up and truly implemented accessibility.

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.