ALT and TITLE on image navigation link

[invision2]

Hi,

I have been given a navigation bar in graphic form that I need to use for a web site.

I have placed it in an unordered list, positioned with CSS, however not sure what to write for the ALT and TITLE attributes and if I need to do anything special because I assume Screen Readers will not pick these up as hyperlinks.

For example, I have:

<li><a href="#"><img src="images/nav_company_link.jpg" height="10" width="59" alt="" title="Company Profile" /></a></li>

Would that be the correct way of doing it? Or should the <a href=""> also have a title attribute?


Many thanks for any suggestions.

[C. Ankerstjerne]

You must always include the text in the ALT attribute. The TITLE attribute is only for tooltips, and usually isn't read by screen readers. It doesn't have much (if any) significance in terms of SEO, and should not be included unless you actually need it. You code should therefore be:

<li><a href="http://www.example.com/"><img src="images/company-profile.png" width="59" height="10" alt="Company Profile"></a></li>

[invision2]

Aaah, so I had them the wrong way around
Nice!

Thanks for the help.

I guess this applies with all images, do they really need 'titles'?

[C. Ankerstjerne]

You're welcome

The TITLE attribute is rarely needed for images. In fact, I can't think of any instances on a normal webpage where it would be relevant.

[invision2]

Cool.

So just so I got this right, if the image is just text 'Company Profile' would be good.

But if the image was the exterior of a building, just say 'Exterior of Company Offices' in the ALT?

And the title attribute for <a href> would be 'View our Company Profile', or something like that?


Thanks again for your patience, these really are the basics hehe.

[AutisticCuckoo]

But if the image was the exterior of a building, just say 'Exterior of Company Offices' in the ALT?

It's very doubtful that this would ever be a useful text equivalent. At least I find it difficult to imagine a scenario where the text 'Exterior of Company Offices' would make sense.

An ALT text isn't a description of the image; it's the text equivalent. It should provide the same information as the image conveys (as far as that is possible). That means the ALT text is highly dependent on the context; there isn't an ALT text that can always be used for a particular image, because the image conveys different information in different contexts.

If the photo of the exterior of the company offices is just a decorative layout element, then it should have alt="". If the photo is used to show the location as a help for visitors, the ALT text could be 'our office is located between James Park and the canal', etc.

[Dan Schulz]

There is a better way of doing this. Remove the image, use plain text, then stick an empty SPAN element after the text (if you need to support Mac-IE, then an empty EM will do the trick as well) and position it.

Here's an example I made for Ethics earlier this year: http://www.dan-schulz.com/for-others.../template.html (it even handles image hovers as well).

[felgall]

One reason for including title="" in your image tags is to correct a bug in Internet Explorer. IE will copy the alt attribute to the title attribute if no title attribute is supplied so if you don't want it to mess up the page like that you need an empty title attribute to stop it occuring.

[invision2]

Brilliant AC, much clearer. All about the context and picture content.

Dan, so place the img as a background-image in a span or div? Would this make more sense than using a blank 'alt'.

Will add blank 'title' atts to my image tags

Thanks for your time and contributions guys.

[Dan Schulz]

If you use my method, go with a span. Note that I move the background position of the image around depending on what part of the menu it's showing at any given time - this cuts down on the number of HTTP requests which in turn can dramatically improve page download times and reduce latency as well.

[invision2]

Sounds brilliant, reducing download times sounds very cool.

I don't suppose you could perhaps show me some 'real world' examples where you've used this and other usability/quicker page-loading styles.
I'd love to see some of your commercial work to see how you construct sites, learn from the best

If you wish I could PM you a link to the page I'm working on, perhaps you could give me a pointer or two on reducing download times.

This SitePoint is a brilliant resource, part of my daily routine now


Thanks!

[Dan Schulz]

I would, but I'd have to violate more than a few NDAs to do so.

As for PMing me, why don't you just post the link here as plain text? Just don't include the http and www. parts and it won't get parsed.

[invision2]

Oh, it's a bit of a tricky one, I'd rather not post it because it's not quite ready yet

Thanks for the help so far anyways, I sent you a PM, but completely understand if you can't reply to it heh. Thanks again.