1

This question already has an answer here:

In a situation where an image is an important feature of the page, but also acts as a link to a page containing a high-res version, how should its alt tag be populated.

In this instance it needs to fulfil dual purposes:

  1. A description of the image (as it is important in the context of the page)
  2. An indication of the link purpose / destination

How should both be fulfilled in the alt tag, and if they can't both be, which should take priority?

Note: I'm specifically interested in cases as outlined where both purposes apply. I'm not interested in situations where the image only functions as a link image to the main event.

Further Note: I am implementing a design over which I do not have final say. I am aware of basic accessibility guidelines, but as is so often the case no-one else on the project cares about making the site accessible, so I am left trying to do my best within given constraints.

So please don't answer or comment to tell me:

  1. That the image should be a text link instead
  2. That the link should contain text as well as an image

marked as duplicate by JonW Aug 23 '15 at 9:13

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • This is tricky to answer sans the context of the actual image and page in question. That said, if you can't fulfill both objectives, then the problem is that the image probably shouldn't be a link in the first place. – DA01 Aug 22 '15 at 23:14
  • @DA01 Unfortunately, like the majority of web designers, I often build out other people's designs, or design to other people's requirements. In my experience, clients and stakeholders will almost never make a decision that favours accessibility over visual style / appearance. This leaves it up to people like me to try and make a site as accessible as possible within constraints over which we have no control. So being told that 'the image probably shouldn't be a link' is not helpful. The fact is that it is and I'm asking how to handle it. – Undistraction Aug 23 '15 at 6:10
  • 1
    I'm sorry that it's not helpful to you but this site is about UX in general and answers here are meant to apply to the broadest audience possible. I get that we sometimes have to deal with crap from above. That doesn't mean we can't still promote the proper answer here. BTW, I'd never say the vast majority of web designers are building other's designs. That's obviously a problem in your organization that you have to deal with. I sympathize. All that said, my statement still stands: the answer to your question likely depends on the specific image and link and the context of the page. – DA01 Aug 23 '15 at 16:55
2

My recommendation would be to set the:

  • image's alt attribute to specify a text equivalent for the image
  • link's title attribute to describe the resource being linked to

    <A href="https://lebowskifest.com/fests/lebowski-fest-new-york"
      title="Lebowski Fest New York in August 2014">
        <IMG src="http://cdn2.screenjunkies.com/wp-content/uploads/2013/06/Screen-shot-2013-06-30-at-4.30.03-PM.png"
          alt="Walter Sobchak indicating disapproval.">
    </A>
    

W3C has published Techniques for WCAG 2.0 and in it they also recommend to supplement link text with the title attribute. That said, not having anchor text is an accessibility faux pas. If this is important to you, add anchor text and hide it using CSS. There are better ways of handling the CSS work behind this tactic, but wanted to link you to the W3C guidance to help you understand the intent behind it.

  • Thanks, but I was under the impression that using the title attribute was a really bad idea: silktide.com/… – Undistraction Aug 23 '15 at 6:15
  • I also find it hard to believe that the best solution for image links is still a hack to visually hide text. This would appear to be backed up by the document here: Note also "There are special requirements for images that are links. The ALT attribute acts as the link text' found in the article here: sitepoint.com/15-rules-making-accessible-links – Undistraction Aug 23 '15 at 6:24
0

ALT text serves a dual purpose.

Purpose 1:

Simple Google search for "purpose of alt tag" shows the following answer...

The alt text within the ALT tag should let the user know what an image's content and purpose are. Alt text is accessed by screen reader users to provide them with a text equivalent of images. In visual browsers, the alt text is displayed when an image is broken, or when all images have been disabled.

More information on Accessibility & Usability

Purpose 2:

ALT text is essential for an effective online presence. An old article "The importance of alt attributes aka alt tags or alt text" covers this topic pretty well.

Back to your answer:

You are right, both need to be covered. Let's say you have an image of a 2011 Bugatti Veyron with a link to a more high fidelity image of the same vehicle. One way to construct the ALT tag would be: "2011 Bugatti Veyron" or similar. Use the link "title" to identify the action behind the link "Follow the link to view a 2011 Bugatti Veyron".

Different images will require different text, provided what is on the image and the purpose of the enlarged / high fidelity image to the visitor.

  • As far as I understand it, using the title attribute for links is a bad idea: silktide.com/… – Undistraction Aug 23 '15 at 6:41
  • You are correct in your statement about screen readers and link TITLE tag. It does not imply you should NOT use title tag at all. TITLE tags are used for SEO. How to use link TITLE attribute correctly article covers that aspect. – Igorek Aug 27 '15 at 17:43
-1

first, I'd consider if an image is actually the best way, in any case, to act as a link; unless the you literally make it super clear that clicking the image will link you to this or that end point, aka as a signifier; perhaps you can show (a basic version of) your link image, which would help to asses that.

Provided that you give the image a clear signifier, the ALT text, being a description of the image itself, should than naturally reflect this fact. Before anyone mentions it; don't rely on title on links or anywhere as they tend to be skipped by screen readers.

If you don't have this signifier, but the affordance is super clear...than you should anyway include the clickability in the ALT text :-)

EDIT

As I misread your post, I want to rectify my answer a little bit by adding the following text:

If it is a photo album or something, you can thus simply add "click to enlarge" at the end of the alt text (...although I don't really know if the blind people will really benefit from this feature); if the image is the only image there and there is no clear signifier of the clickablility of the image (because its a picture of a tree or an apple or something)...then "click to enlarge" should IMO be placed underneath the image. Anyway, perhaps providing more details regarding the actual case for instance (since you're pretty vague about it), could help correct this answer.

  • Your answer has (almost) nothing to do with the question I asked. I think my question is pretty clear. You have answered with generic advice related to using images for links. At no point did I ask about how to make the image more obviously a link. All I'm interested in is how to approach the alt text in the example I have given. – Undistraction Aug 22 '15 at 22:02
  • I actually do answer your question, hence the edit, the only I did was add considerations to the table, as others did as well :-) – Xabre Aug 23 '15 at 7:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.