To restate the problem you're trying to solve: you want a user who has a screen-reader (or another kind of browser that lacks images) to be able to tell where the link goes. I think that you've forgotten that you're actually trying to solve a bigger problem: you want all your users to be able to tell where your link is going.
Normally, you achieve this by making the link body describe the target of the link: I wrote a previous article on this subject. BBC News wrote about it. Click here for a picture of me shaking hands with the Queen. Notice that I said, "link body," not, "link text." When the link is an image, it too must do the job of telling the user what to expect.
In your example, it's clear from a picture of Fluffy that the link will go to more info about him, but it's not clear that it will go to Wikipedia.
If your link body is an image, and it's clear from the image where the link goes, and the alt text describes the image, then it must be clear from the alt text too. The alt text doesn't have to do anything extra to describe where the link goes. On the other hand, if your link body is an image, and it's not clear where the link goes to, then you should add a caption even for the users who will see the image.
In your example, you might have Fluffy skateboarding, and include the text, "Fluffy is featured on Wikipedia," as a caption inside the link body. If you do this, then your alt text still doesn't have to do anything extra, because all users will see the caption.
If, for whatever reason, you don't want to make the link target clear to users who can see images - maybe you're afraid the descriptive text will clutter the page, and prettiness is more important to you than usability - you might be tempted to use the a
tag's title
attribute (not the img
tag's) to add extra information. Don't bother, as this is not useful for screen-readers. This article shows you how it fails (this one's a genuine link), and describes an awful workaround that uses CSS to show extra text to a screen-reader or other text browser, but hide it from a graphical browser. Bleurgh. But the point is, if you use this technique, you still don't need to change the alt text because it's a link: your alt text describes the image, and your hidden caption describes where the link goes.
In summary, this question is just a special case of the question, "How do I let my users know where an image links to?" By thinking about the user's perspective from navigation, we've come up with three ways to do this, in order of preference:-
- Choose an image that makes it obvious, and then use the alt text to describe the image.
- If you can't make it obvious from the image, add (inside the link body) a caption that makes the relationship clear between the image and the link, and use the alt text to describe the image.
- If layout constraints stop you adding a caption, add an invisible caption describing the link just for text browsers & screen-readers, and use the alt text to describe the image.
Whichever alternative you take, the answer to your literal question is the same: the alt text should always describe or represent the image.
If you like, this hierarchy is a parallel to designing a button in a GUI: the best option is to make it obvious what the button does; then you consider adding a tooltip; and as a last resort you explain it in the help file or manual.
So, to sum up for your example, we start by thinking about how to make a Wikipedia article obvious to the user. It's completely non-obvious that your photo of Fluffy would link to Wikipedia, even if the Wikipedia page uses the same photo. So don't make the photo link to Wikipedia. Have a link to Wikipedia elsewhere, using a Wikipedia icon (and the alt text "Wikipedia"), or maybe a screenshot of the Fluffy photo in context on the page (and the alt text "Fluffy is featured in the Wikipedia article on cats" or similar). This way, you don't need to resort to having a visible or invisible descriptive caption, and you've made the user experience nicer for all your users, not just those on screen-readers. You can still include the Fluffy photo if you like, but it doesn't have to be a link at all.