An image that is a link

If the following is an icon that links to a contextual help screen, what would be the best attributes/values to add for accessibility and why?

<a href="help.html"><img src="help.png" /></a>

<a href="help.html"><img src="help.png" alt="Help"></a>

Why? Because the alt attribute is required – your markup is invalid without it – and because it provides the text equivalent of the icon to those who cannot perceive the image. And that includes assistive technology like a screen reader.

That is all I thought would be needed, but I followed a link from the sticky “All You Need For Accessibility - Tutorials, Tools, Books, Validators, etc” post and it mentioned (not using my specific example) other attributes like “title” and “longdesc”. Would including these in our example add to accessibility or be superfluous? If adding them would be beneficial, to where would you add them?

I guess, in order to know what to include, I need to learn more about how various users and technology perceive various elements.

For example, would a screen reader read that as something like “Link help”?

I believe title and longdesc is beneficial for SEO purposes, but not positive.

longdesc is used when the alt attribute can’t provide you with enough room to adequately provide an alternative description. I’ve never had that issue so I’ve never used it, but I believe it takes a URI to a webpage where you provide the extended description (in addition to a summary in the alt attribute)

title, I believe, is used for headings, and while I’ve used it for links before, I don’t think you’re supposed to.

The title attribute is read by screen readers and can be seen as a tool tip when hovering over an element with it. It can be used to provide the full meaning of an abbreviation in the abbr tag, and it can be used to expand on the contents of a link. In your case, I don’t see that as important, as everyone will know what Help refers to.

title has nothing to do with search engine optimization. Search engines typically doesn’t read the contents of the title attribute at all, and even if they did, it would be wrong to abuse it to improve search engine rankings.

Thank you all for your responses.

So would the following be an accurate summary in regard to images?

  1. Always use alt in an img tag
  2. Use title in an img tag to describe the image when the alt is not descriptive enough
  3. Use longdesc in an img tag (as well as or instead of title) to describe the image when title is not descriptive enough

Also, what would be the best way to add titles, etc to the following URL in order to convey the following:

  1. The image is of a Kiwi (the bird, not a fruit or a New Zealander)
  2. The kiwis.html page has information about the Kiwi (the bird, not a fruit or a New Zealander)
<a href="kiwi.html"><img src="kiwi.jpg" alt="kiwi" /></a>

I am thinking the anchor should have a title like “Information about New Zealand’s native bird, the Kiwi” and the image needs no further attributes as it is effectively equivalent to a text link saying “Kiwi”. Is that correct?

for take w3validation we also need the img alt tag so alt tag use is good for seo purpose

In this particular case they would be superfluous (which is why I omitted them). You might use title but I doubt that it would add anything useful:

<a href="help.html"><img src="help.png" alt="Help" title="Learn more about this topic"></a>

The longdesc attribute is definitely not needed in this case, since no-one needs to know exactly what the help icon looks like; only that it means ‘help’.

No, they are not. They are meant to increase usability and accessibility, not to be abused for stupid ‘SEO’ purposes. Write good content and you don’t have to resort to ugly tricks that are detrimental to many users.

Yes, that about sums it up, except that the title should not try to describe the image. That’s the job of the longdesc if the image really needs to be described in so much detail. Use title to provide extra, non-critical, information that cannot be ascertained from the image itself.

It depends on what kiwi.html contains, but perhaps something like ‘Learn more about the kiwi’s habitat and see more images’? Or perhaps simply ‘© 2010, John Kiwi’? :slight_smile:

There is no such thing as an <alt> tag in any known version of HTML. And the alt attribute is for accessibility, not idiot SEO abuse. :mad:

Actually, I tend to use titles on anchors even if the image has an alt attribute. While alt is meant to describe the image content (for screen readers) there’s something to say about giving the anchor a description of where clicking on the link will redirect the user. In your example I would move the title from the image to the anchor as it accurately describes the purpose of the link (where as the alt attribute describes the content of the image), sort of works hand in hand, plus it’s more useful to someone who hovers over the link than a “Help” button that just says “Help” rather than describing it’s function. :slight_smile:

Out of interest, how would each of the following be spoken by a screen reader?

<a href="help.html"><img src="help.png" alt="help" title="Learn more about this topic" /></a>

<a href="help.html" title="Learn more about this topic"><img src="help.png" alt="help" /></a>

Screen readers are generally linary, and identifies some tag types. You example might therefore be read as Link Graphic Help Learn more about this topic and Link Learn more about this topic Graphic Help. The second might also be read just like the first, if the screen reader reads the contents of the link before reading the title of the link. This is purely theoretical, however, and different screen readers will have different approaches.

Out of interest, how would each of the following be spoken by a screen reader?

Depends on their settings, and I’ve found that my JAWS7 is different default than my JAWS10. They both read alt text, but if there’s a title, one of them (I think it was 7) would favour the title OVER the alt text : (

My version 10 though screws up my link who has an <a href=“somewhere” title=“see the list of insanity!”><img src=“transparent.gif” alt=“”>…
on default settings, it would read the url of “transparent.gif” and not the title.
Default behaviour is to read the source url of an image who is inside an anchor if there is no alt text, but if I choose in my settings “read titles” it will ignore alt text if I put it in there. I couldn’t find a way to set both (read both), they are radio buttons : (
The image in question was a window-shim (or whatever they’re called) so a background image can do sliding doors while also having alt text (cause there is alt text, alt=“” was just a test).

Screen readers
Also, JAWS is but one screen reader. They are all bizarrely different, worse than browser differences! The big ones you may want to look for more info for are JAWS by Freedom Scientific (commercial, Windows-only); Window-Eyes by GWMicro (commercial, Windows-only); NVDA (opensource and free-as-in-beer, Windows); VoiceOver (free-as-in-beer, comes default on all OSX Macs) and maybe Orca if you know you’ll have significant Linux-with-Gnome users… heard of a new one being worked on in Germany called SUE, we’ll see if someone battles to the top as “the open-source Linux screen reader” tho likely there will always be a couple of them, not just one.

Tooltip fail
One place to really avoid titles with links is when you have dropdown menus. The titles really get in the way of sighted users who have a mouse. They often cover the text of the submenus! Jakob Nielsen has posted screenshots of dropdown-menu FAIL showing just this, but it’s hit me too as a surfer, esp since I usually can’t avoid using the mouse for dropdowns.

Beyond that, you’ll see lots of sites who, likely because of their editing software, have titles on all links equal to the anchor text. These are nasty and unwarrented, don’t do it : )

From what I am aware, the majority would read the contents by default first and then move onto the “defining” alt or title which contains the image. In the first case some would use the alt attribute (correctly) and some will use the title (incorrectly) over the other. But in the second example it will read both the title and the alt attribute (from what I’ve encountered) so it’s probably the best option. To give you an idea it’ll say something along the lines of “link… learn more about this topic… help” in preference to “link help” or “link… learn more about this topic” (that’s if they read it correctly of course). :slight_smile:

What you posted is rather scary Stomme, I’ve played with other screen readers to see what it does and it seems that anchor title + image alt is the safest combination (in terms of correct presentation) but I wasn’t aware that JAWS had a tendency to skip the anchor to focus on the image, and then take preference of the title over alt, talk about being trapped between a rock and a hard place. You would think for such an expensive piece of junk it would be able to get the simple things right :stuck_out_tongue:

Well, if you have
<a href=“foo” title=“go to the foo man choo”><img src=“foo.png” alt=“Foo”></a>

it would be treated like
<a href=“foo”>Foo</a>
ideally. So the alt text is the anchor text as far as the reader is concerned. If you have “read titles” on then it may read the title but I haven’t been able to make mine do that : )
If you have
<a href=“foo” title=“go to the foo man choo”><img src=“foo.png”></a>
(or with alt=“”)
then what I get is
link graphic h t t p colon slash slash example dot com slash foo dot png
on 10 while 7 would read out
link go to the foo man choo

Without an image, I can get title text in anchors if I’ve selected “read titles” in my config
<a href=“foo” title=“go to the foo man choo”>Foo</a>
go to the foo man chooFoo
(yeah add a space at the end of your title)
<a href=“foo” title="go to the foo man choo ">Foo</a>

depends so completely on the reader that I just do what I’ve read helps others and actually I try NOT to write for JAWS, that’d be like writing for IE.

*note I really need to get off my lazy butt and get NVDA. Orca I have so many problems with Firefox I just can’t test with it.