Alt and title-attribute for decorative images

[deeper]

Hi,
on my site the same decorative pics are on all pages. At the moment they have no title, but an alt-attribute like "Coloured wings, seperator-graphic for the car-site".

For decorative pics, like separators, one should use alt="" and no title-attribute. That's what I could research.


But what will Googles spider say then? Will he say "Hey, I like alt, but this guy here has forgotten to fill it with text. Throw him to hell or at least give him a +1000 penalty." :)

[lucy24]

Never mind the googlebot: think of your humans.

If the alt is blank (either absent altogether-- a validation no-no-- or "") the pictureless user has no idea what's missing. In ebooks I'll say something like "decoration", or use a functional equivalent like "--" for decorative lines. Or "|" depending on which way the line is facing ;)

[phranque]

when an image has no semantic meaning you should provide the alt attribute with a null value.

render your document with images turned off or using a text-only browser such as lynx and the answer will be obvious.

[deeper]

@phranque:
Will Google understand my alt="" correctly as intentionally empty, indicating "I know there should be describing text, but this is just a decoration pic"?

W3C says "If no title attribute is used, and the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored."

Google is an "assistive technology"? I only know assistive listening devices :)

@lucy24:
Do your user understand the hint "--" as horizontal decorative line?
My question respects user and G as well. But it may be a spam issue because of the same images on all pages. Certainly your suggestions raise no red flags.

[JD_Toims]

W3C says "If no title attribute is used, and the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored."

I'd go with this, because it's technically accurate information and thinking of visitors first [rather than Google], someone with a screen reader doesn't really need all the possible associated alt info read to them to find what they're looking for -- It seems like it would be a waste of their time to me to tell them 15 or 20 [or whatever number] of times the image they would be viewing if they could see the screen is decorative only.

Also, the last round of testing I did showed the title attribute had no impact on rankings and was not used in the snippet, but the alt text of images was used in the snippet of the results for searches I made on Google, so it could possibly [likely in-my-opinion] have an impact on the topicality [and therefore rankings] of a resource, which means to me, where an image is beneficial to visitors and topical to a given resource I'll try to describe what it displays accurately in the alt, but otherwise I'll leave the alt null.

[lucy24]

If no title attribute is used, and the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored.

Oh, thanks for finding that. It's useful to know.

Do your user understand the hint "--" as horizontal decorative line?

Well, here I'm talking in the narrow realm of e-books. If the printed original had a decorative horizontal squiggle separating sections of text, you'll want to have something visible if they're reading in a no-images mode. A line containing
----
is a minimalist form of the same information.

It may also be worth considering that there are two ways for an image not to display. One's a text-only medium, whether it's Lynx or a screen reader.

The other is a regular browser that happens not to show the image. It might be a one-off where a single file went walkabout or you misspelled one link; it might be a low-bandwidth user who set their prefs that way. (Can you still tell a browser not to display images?) In this second case, you get the same visual effect as with an ad blocker: the image itself isn't there, but its allocated space is blank. That's assuming you've got width and height in the html, which you really should.

So then, on top of everything else, you sometimes need to make sure the alt text doesn't take up more screen space than the picture did.

I realize your original question was about SEO and I'm just blathering on about humans. Oh well :)

Do all browsers now handle the "title" attribute correctly? I can remember when w3 had to keep explaining that the reason Firefox seemed weird was that it was the only browser that :: drumroll :: did what it was supposed to do.

[CaptainSalad2]

My main site, the logo has a alt tag="COMPANY NAME LOGO". Today in the serps my site title is showing as "COMPANY NAME LOGO". For some reason google has overridden my title tag and used the alt tag of my logo image! Not good IMO as now I will have to revise my alt tags to be more descriptive on the page in general rather than the specific element.

Alt tags were, I believe designed for text only browsers and the days of dial up when rendering of the page took 4ever and a description of the element was user friendly, so the role of alt tags appears to have changed if they are given this much importance by google?

[lucy24]

There are other threads about google's recent habit of making up a page title if they think the real title doesn't fit the search. If you change an alt to match one search, you'll end up with a worse match on other searches, so you can't win.

Using "Widget Logo" as a made-up title seems pretty silly, though. (I'm assuming that's the literal word "logo".) Is there something in the page layout that would lead search engines to think your logo is functionally the <h1>?

[JD_Toims]

I might try putting a title= on the image and changing the alt= to null to see what they decide to do with the title in the SERPs if the alt isn't present.

[deeper]

Are there any special rules for the logo-alt? I suppose it should contain the domain or company name and you should use a title-attribute?

[JD_Toims]

This is really the best resource for information on alts and titles.

Emphasis Added

This example is the same as the previous example, except that the link is on the W3C web site. The text alternative is a brief description of the link target.

<a href="http://w3.org">
<img src="images/w3c_home.png" width="72" height="48" alt="W3C home">
</a>

Here's an example of an image being used as a decorative banner for a person's blog, the image offers no information and so an empty alt attribute is used.

<header>
<div><img src="border.gif" alt="" width="400" height="30"></div>
<h1>Clara's Blog</h1>
</header>
<p>Welcome to my blog...</p>

http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#alt

Emphasis Added

The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.

http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

[lucy24]

Edit: Dammit, jd, I think your whole post has made mine superfluous because I typed too slow.

---

In human terms:

The alt is displayed when the image isn't.
The title is displayed when the user hovers over the image.

So they should be mutually exclusive. (Some voice readers may speak both by default, but they really shouldn't.)

If you're using an image as text, the alt and title should both be identical to the visible text. The title is for accessibility: If someone has lousy eyesight for reading but can still see pictures, they can have the computer read the "title" out loud on request.

I like to put the image inside the same <h..> tags it would have if it were text, so the alt will display with the intended emphasis (in Lynx it's indentation and/or text color).

[JD_Toims]

Edit: Dammit, jd, I think your whole post has made mine superfluous because I typed too slow.

LMAO! Sorry Lucy24 -- You do usually beat me to threads though :)

[mcskoufis]

I like to put the image inside the same <h..> tags it would have if it were text

Lucy24 wouldn't that raise a flag for spam in Google? Have no evidence to support this but my logic says so... I understand your intention, but I would avoid if possible.

[JD_Toims]

[Begins to reply; notices Lucy24 hasn't replied yet; deletes reply and waits patiently to chime in later.]

[deeper]

JD_Toims, lucy24:
Thanks for your contributions.

What is meant by "image credit"? The source, copyright?

"Mutually exclusive".... interesting... and rarely seen!? It seems as often it's the same with other words.

[JD_Toims]

The source, copyright?

Yes, I think either [or both] would be appropriate depending on the exact situation.

What I didn't reply with earlier is I've run things very close to the way Lucy24 said she does and haven't had issues with it -- Mine were slightly different, because they were true image-swaps, so the <hN> tag I used contained the exact text the image I ran inside the tag and displayed rather than the heading text did.

[Note: It's easy enough to use non-standard fonts now, so I don't bother with image-swaps any more, but it used to be it was easier and more reliable to run an image-swap if I wanted a non-standard font for a heading -- I haven't tested in a while though so things may have changed, but like I said, when I used the image-swap technique I didn't have any issues with search engines because of it.]

[lucy24]

Mutually exclusive

I meant that any given user at any given time will have access to only one or the other. If they don't see images they'll get the alt. If they do see images, they have the option of getting the title. In most situations, the alt and title serve different functions so they'll contain different text. But in the case of image-as-text you need to make sure the user gets the same information either way.

wouldn't that raise a flag for spam in Google?

I don't see why it would. The robot, er, I mean the computer behind the robot looks at the positioning and distribution of headers. In particular, it expects to find an h1 on every page. (I know this because wmt is always yattering at me about it.) Give it a pair of <h1>tags</h1> enclosing an image with a suitable alt, and it will be happy.

There do still exist browsers that don't do embedded fonts. And then there's the size issue. Unless you take the time to edit down your font, it's liable to be an awfully big file. Mine average out to around 100k-- and that's the median, not the mean. Some font files are many, many megabytes. Double if you need italics. (Quadruple if you want bold, but you can get around that with a carefully written @ rule.)

[JD_Toims]

I don't see why it would. The robot, er, I mean the computer behind the robot looks at the positioning and distribution of headers. In particular, it expects to find an h1 on every page. (I know this because wmt is always yattering at me about it.) Give it a pair of <h1>tags</h1> enclosing an image with a suitable alt, and it will be happy.

Yup -- And one interesting note about headings <hN> tags is they're the implicit start of a new section of a document, so even if the HTML5 <section> is not used <h3> technically means <section><h3> to compliant user-agents.

Note: The only thing [except for some robots.txt issues that are reported here occasionally] I've found Google to be non-compliant about is when they switched their handling of 302s to be almost identical to 301s due to the issues they had with 302-hijacking. One of the first [and only] times I've seen them break HTTP/HTML protocol is when they began treating 302s almost exactly the same way as they treat 301s rather than how they "should" according to the HTTP docs. Other than that they're *very* HTTP/HTML protocol compliant, so following the standards set by the W3C and using things as they're intended is a good plan in-my-opinion.