Usability/Accessability: Alt Text on Logos

What is the accepted standard?

[Nick_W]

Hi all,

I'm just going through someone elses (rather good) code. I've come across somthing I think they have wrong but I don't know the answer either.

Logos: If the logo is text, say a company/site name and slogan shouldnt the alt text for that logó mirror that?

Okay, I'm pretty sure that's right but here's the tricky bit: The logo is linked to the home page.

So, what should the title attribute of the anchor be bearing in mind the alt text of the graphic? Home? ... or what?

Is there an accepted standard?

I'm inclined to mirror what the logo says for the alt text and have "Back to the home page of site.com" as the title attribute of the anchor.

I'm not bothered about KW's, I need pure usability/accessability.

Many thanks for your thoughts...

Nick

[jdMorgan]

I use ALT to say what the graphic is, "Image of WYZ Co. logo", and TITLE to say what it does if clicked.

I've adopted the rule that ALT is for the blind using screen-readers, the visually-impaired who may not be able to discern detail in the image, and people who browse with images disabled to conserve limited connection bandwidth.

Link TITLEs can be whatever you want them to be, as long as they are acceptable if the user has enabled the option to display TITLEs on hover.

Works for me...
Jim

[korkus2000]

I have to agree. The ALT or Alternative text should be describing what cannot be seen. Title should be like tool tips in an application letting you know what the thing does. I would think text links do not need any help describing what cannot be seen, but need to elaborate on where it goes. I would think home is a good standard for the web but if you take the time to use the title I would be more descriptive.

>>I'm inclined to mirror what the logo says for the alt text and have "Back to the home page of site.com" as the title attribute of the anchor.

I would go with that over "Home".

[Nick_W]

Thanks guys.

It just threw me to see it done a different way and doubt began to creep in... ;-)

Nick

[SuzyUK]

I use ALT to say what the graphic is, "Image of WYZ Co. logo", and TITLE to say what it does if clicked.

I agree about the ALT, and would use the alt text "Graphic: site name logo" - this for accessibility

Back to the home page of site.com

And I agree with this for TITLE - get the company name in there for SEO.

I thought that SE spiders liked "title" text... but CMIIW please..

Suzy
;)

<added> I knew there was something else..

In the case of <img> elements, JAWS will speak title attribute information rather than alt attribute information when both are included.

This taken from webaim.org [webaim.org]
</added>

[edited by: SuzyUK at 5:44 pm (utc) on May 8, 2003]

[Nick_W]

>>Graphic: site name logo

But what if the logo says somthing?

Nick

[Storyteller]

Unfortunately, for caption of linked images, IE prefers the image's ALT text over anchor's TITLE. So putting "Home" in the ALT would provide IE users (read: everyone) with a better experience. This is obviously a bug, but I don't think it's soon to be corrected.

Mozilla gets it right, but who cares ;(

[drbrain]

I would put the logo text directly into the alt attribute, put the destination into the anchor's title attribute, and perhaps put a longdesc attribute on the image if it needed more description. (Perhaps even using a RFC 2397 data: URI so I wouldn't have to create a whole new page. There are tools out there to help with this. Then again, I doubt a braile or speech renderer would understand a data: URI anyway.)

Just imagine reading the document with all images replaced by their alt attribute text. Does it still make perfect sense? That's my standard.

[jdMorgan]

Storyteller,

I think they've fixed this recently - IE6 uses the TITLE text on hover, just as Mozilla does (I just tried it to confirm). Might be a user setting, but I think my copy's still got its default settings.

Jim

[SuzyUK]

But what if the logo says somthing?

put the "something" in too..

on further reading: I discovered it's not a perfect world after all! ;)

accessibility guidelines are that the title and alt attributes serve different purposes (alt for the text to display if the image can't be shown, title for the "tooltip"/longer description), and it's recommended that it should remain so, however just as visual browsers have different ways of rendering, so screenreaders may still read the alt text and not the title text, indeed they read the alt text if there is no title attribute anyway..

Although it's recommended that you use short alt text, you should also think about the image that you're using it for.

So in this case i.e. a company logo and description..probably best to make them the same... and drop the "Graphic:" if it's serving as a text heading

Suzy

[Nick_W]

Yep, that's what I did!

Thanks everyone. Can you drop a link to the source Suzy (assuming it's appropriate)...

Thanks

Nick

[g1smd]

If clicking the image takes you somewhere, or performs an action, then I like the alt text to say where it goes.

Try browsing a forum with graphics turned off, then especially try finding the Reply, Edit, PM, etc, buttons when the site only has this infrmation in the Title attribute, not in the Alt attribute.

[SuzyUK]

Nick...most of it came from reading that link I added to msg 5

then the rest came from various sources, it's a bit like CSS it will be great when the various attributes are properly rendered (visually and aurally), but until then it's making the best of what there is...

e.g. NN will not render the "alt" text as a tooltip but IE will..so trying to make them (title and alt) different will only confuse the issue until browsers conform (sound familiar?)

Suzy

[nancyb]

be careful what you put in the title attribute. I used to use both alt for what the image was and title for where the link went. But Google often included what was in the title attribute as part of the description. This often was misleading for the actual page that was listed in the serps.

I think I need to figure out how to use CSS to have the logo visible at the top of page but so the title attribute is not read first by the bots.