alt and title attributes in IMG and A tags

**weegillis** · 06-15-2009, 02:54 PM

This page is set up for testing of mouse over effects on images and anchors containing (or not) alt and title attributes. Various configurations are tested, many of which are moot, but I threw them in, anyway.

I'm stunned by my findings, which puts a lot of my past (and recent) thinking out of skew. Now it will take a careful review of my work to see how it measures. Argh! More work!

Others are welcome to post their findings for browsers not tested here, which are many since I only tested on the most recent versions of IE, Opera, Firefox, Chrome and Safari (all on Windows XP machine).

The page is coded in HTML 4.01. Will the effects will be the same in XHMTL? Don't know. Will have to test.

Link: alt and title attributes in <IMG> and <A> tags

**weegillis** · 06-15-2009, 04:04 PM

Below is the shortened, "lite" version, with moot points and code samples redacted:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>alt and title attributes in &lt;IMG&gt; and &lt;A&gt; tags</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="language" content="en-CA">
<meta name="description" content="A web page to test mouse over effect on IMG and A tags with and without alternate text or title attributes">
<meta name="keywords" content="HTML,img tag,a tag,attributes,alt,title,browser test">
<meta name="author" content="RC Pierce">
<style type="text/css">
body {margin: 0; padding: 0; text-align: center; font-size: 100%; color: #000; background: #fff;}
h2 {font: bold 80% Verdana,Geneva,sans-serif;}
#content {width: 90%; margin: 0 auto; text-align: left;}
#content li {font: normal 80% Arial,Helvetica,sans-serif;}
img {vertical-align: middle; display: inline;}
img,
a img {border: none;}
#content li li {font-size: 100%;}
em,
code {font-family:Courier,serif;}
em {color: #600; background: #fff; margin-right: 0.5em;}
code {color: #060; background: #fff;}
li ul {margin-bottom: 1em;}
</style>

</head>
<body>
<div id="content">
<h1><em>alt</em> and <em>title</em> attributes in &lt;IMG&gt; and &lt;A&gt; tags</h1>

<h2>Stand alone image</h2>
<ol>
<li><img src="#" alt="ALT on &lt;IMG&gt;" width="120" height="60">
Tool tip in IE.<ul>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li>no <em>title</em> attribute</li>
</ul></li>
<li><img src="#" title="TITLE on &lt;IMG&gt;" width="120" height="60">
Tool tip in all browsers.<ul>
<li>no <em>alt</em> attribute</li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><img src="#" alt="" title="TITLE on &lt;IMG&gt;" width="120" height="60">
Tool tip in all browsers.<ul>
<li><em>alt=&quot;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><img src="#" alt="ALT on &lt;IMG&gt;" title="" width="120" height="60">
No tool tip in IE due to empty title attribute.<ul>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;&quot;</em></li>
</ul></li>
<li><img src="#" alt="ALT on &lt;IMG&gt;" title="TITLE on &lt;IMG&gt;" width="120" height="60">
Title attribute in toop tip for all browsers.<ul>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
</ol>

<h2>Stand alone anchor</h2>
<ol>
<li><a href="#">&lt;A&gt; with no <em>title</em> attribute</a></li>
<li><a href="#" title="">&lt;A&gt; with empty <em>title</em> attribute</a></li>
<li><a href="#" title="TITLE on A">&lt;A&gt; with <em>title</em> attribute</a></li>
</ol>

<h2>Anchor wrapping an image</h2>
<ol>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" width="120" height="60"></a>
Tool tip in all browsers.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li>no <em>alt</em> attribute on &lt;IMG&gt;</li>
<li>no <em>title</em> attribute on &lt;IMG&gt;</li>
</ul></li>
<li><a href="#"><img src="#" alt="ALT on &lt;IMG&gt;" width="120" height="60"></a>
Tool tip in IE.<ul>
<li>no <em>title</em> attribute on &lt;A&gt;</li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li>no <em>title</em> on &lt;IMG&gt;</li>
</ul></li>
<li><a href="#"><img src="#" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
Tool tip in all browsers.<ul>
<li>no <em>title</em> attribute on &lt;A&gt;</li>
<li>no <em>alt</em> attribute on &lt;IMG&gt;</li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em> on &lt;IMG&gt;</li>
</ul></li>
<li><a href="#"><img src="#" alt="ALT on &lt;IMG&gt;" title="" width="120" height="60"></a>
Empty title on IMG overrides alt attribute: No tool tip (in IE).<ul>
<li>no <em>title</em> attribute on &lt;A&gt;</li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;&quot;</em></li>
</ul></li>
<li><a href="#"><img src="#" alt="" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
Tool tip in all browsers.<ul>
<li>no <em>title</em> attribute on &lt;A&gt;</li>
<li><em>alt=&quot;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#"><img src="#" alt="ALT on &lt;IMG&gt;" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
Tool tip in all browsers.<ul>
<li>no <em>title</em> attribute on &lt;A&gt;</li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" title="" width="120" height="60"></a>
The title on A is pre-empted by an empty title on IMG: No tool tip in IE or Opera.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li>no <em>alt</em> attribute on &lt;IMG&gt;</li>
<li><em>title=&quot;&quot;</em></li>
</ul></li>
<li><a href="#" title=""><img src="#" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
Tool tip in all browsers.<ul>
<li><em>title=&quot;&quot; on &lt;A&gt;</em></li>
<li>no <em>alt</em> attribute on &lt;IMG&gt;</li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
Title on IMG in tool tip for all browsers.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li>no <em>alt</em> attribute on &lt;IMG&gt;</li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" alt="" width="120" height="60"></a>
No tool tip in IE. Tool tip for all others.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li><em>alt=&quot;&quot;</em></li>
<li>no <em>title</em> attribute on &lt;IMG&gt;</li>
</ul></li>
<li><a href="#" title=""><img src="#" alt="ALT on &lt;IMG&gt;" width="120" height="60"></a>
Tool tip in IE.<ul>
<li><em>title=&quot;&quot; on &lt;A&gt;</em></li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li>no <em>title</em> attribute on &lt;IMG&gt;</li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" alt="ALT on &lt;IMG&gt;" width="120" height="60"></a>
IE tool tip is alt text, others use title on A.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li>no <em>title</em> attribute on &lt;IMG&gt;</li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" alt="" title="" width="120" height="60"></a>
No tool tip in IE or Opera. Tool tip in others.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot; on &lt;A&gt;</em></li>
<li><em>alt=&quot;&quot;</em></li>
<li><em>title=&quot;&quot;</em></li>
</ul></li>
<li><a href="#" title=""><img src="#" alt="ALT on &lt;IMG&gt;" title="" width="120" height="60"></a>
No tool tip in IE due to empty title attribute on IMG.<ul>
<li><em>title=&quot;&quot; on &lt;A&gt;</em></li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;&quot;</em></li>
</ul></li>
<li><a href="#" title=""><img src="#" alt="" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
All browsers show title on IMG in tool tip.<ul>
<li><em>title=&quot;&quot; on &lt;A&gt;</em></li>
<li><em>alt=&quot;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" alt="ALT on &lt;IMG&gt;" title="" width="120" height="60"></a>
No tool tip in IE or Opera. Tool tip in others.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;&quot;</em></li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" alt="" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
All browsers show title on IMG in tool tip.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li><em>alt=&quot;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#" title=""><img src="#" alt="ALT on &lt;IMG&gt;" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
All browsers show title on IMG in tool tip.<ul>
<li><em>title=&quot;&quot; on &lt;A&gt;</em></li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" alt="ALT on &lt;IMG&gt;" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
All browsers show title on IMG in tool tip.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
</ol>
</div>
</body>
</html>

Please do not post this code on a live domain.

**mannequin-lady** · 06-15-2009, 04:17 PM

Originally Posted by weegillis

This page is set up for testing of mouse over effects on images and anchors containing (or not) alt and title attributes. Various configurations are tested, many of which are moot, but I threw them in, anyway.

Others are welcome to post their findings for browsers not tested here, which are many since I only tested on the most recent versions of IE, Opera, Firefox, Chrome and Safari (all on Windows XP machine).

Link: alt and title attributes in <IMG> and <A> tags

Did you mark which ones are moot? We opened up a can of worms, it seems.

I saved the page. Thank you. I guess you "volunteered" enough for a while!

**mannequin-lady** · 06-15-2009, 04:20 PM

I'm glad you did that because I was just about to ask for the code and no, I won't put it on a live domain.

Thanks very much!

**mannequin-lady** · 06-15-2009, 04:49 PM

weegillis, I removed the older test page from my domain and I'm studying the new code you provided. Also, I installed IE 8 on the secondary PC so I can compare the results, once I have some.

Since you've been so busy with this project, you may have missed this. I think everybody who I was trying to give credit to missed it, so here is what I posted in the reputation definition thread:

I have to provide reputation comments for twenty different people before I can give credit to the few who are actually helping me? That doesn't seem right.

I like giving credit where credit is due, such as to the following people:

weegillis, ctabuk, webnauts, deepsand, jordanMcClements, crankydave, tubby and rah.

Thank you to all of the above people for helping me with various elements of website design, Google AdSense, SEO and forum tips, among other topics.

Sincerely,

Steph

http://www.webproworld.com/webprowor...tml#post444929

**weegillis** · 06-15-2009, 05:03 PM

Redacted are,

The first four in the top section of the full version

1 and 2, 4 and 6, 8 and 12, 16 and 20 in the bottom section

**mannequin-lady** · 06-15-2009, 05:07 PM

Originally Posted by weegillis

Redacted are,

The first four in the top section of the full version

1 and 2, 4 and 6, 8 and 12, 16 and 20 in the bottom section

As long as I have the code you posted with the redactions retracted -

I should be all set.

Thanks again!
Steph

**weegillis** · 06-15-2009, 05:10 PM

You're welcome, Stephanie. I hope it proves useful to you and everyone else. it sure opened my eyes!

**mannequin-lady** · 06-15-2009, 05:20 PM

Originally Posted by weegillis

You're welcome, Stephanie. I hope it proves useful to you and everyone else. it sure opened my eyes!

It's definitely useful to me. I'm going to start fresh with it tomorrow. It's been a long day.

It should help a lot of others, also. Maybe we (you) will "make a difference"! After all, the point of this topic is to improve website accessibility. (IMO)

Now, if only there was a program that would do automatic closed captions for videos. Maybe in the year 2025.

Have an excellent day!

Steph

**weegillis** · 06-16-2009, 12:51 PM

My conclusion?

Text for users in the title attribute of the image. Everyone sees this in all browsers. A short, meaningful description ought rightly repeat or paraphrase the more complete details that appear in the page, proximity being a possible factor. SEO quality would apply, just as any well formed and optimized copy in the page. Write a long caption, cut it in half and polish, and you'll be left with a nice bit of text for the title. Limit the length to meet with search engine guidelines.

Text for user agents in the alt attribute. As long as the title attribute is set and populated with text, alt text doesn't display in IE.

For SEO, it makes perfect sense to use a brief keyword packed phrase that is more than 12 characters long, but less than 25 (my numbers, requires more investigation). Only populate alt attributes with text for images that both relate to the page, and that you want to have indexed.

I'm only speculating, though one can reason that there would be a suitable ratio of text in content to text in attributes. It bears further investigation. Assuming 400 words in the body, how many would be reasonable in the attributes? Anybody?

As to title attributes on anchors, there exists the question, "What will the user see in the tool tip?" If the title attribute on the image is populated with text, nobody sees the title text on the anchor. If a title attribute on the image exists but is NULL, IE and Opera see nothing, while other browsers revert to the text in the title attribute of the anchor, if it exists.

From an SEO standpoint, it seems most appropriate to use the text from the TITLE element of the target page, assuming it has been optimized for search engines. Otherwise one might rip some choice words from the meta description or the body of that page; words that have been optimized for the referring page, as well, would make sense.

What the user sees if one uses the title attribute on the image is consistent across all browsers so I would reason that this is the best place to insert meaningful text that relates to the image, the page and the call to action implied in the outbound link.

What this all boils down to is that all three attributes appear to have a separate, distinct use, so I'm going to go with all three, placing the appropriate text in each, knowing that the user only sees one phrase in the tool tip, the title on the image.

Thread: alt and title attributes in IMG and A tags

Thread Tools

Display

alt and title attributes in IMG and A tags

Re: alt and title attributes in IMG and A tags

Re: alt and title attributes in IMG and A tags

Re: alt and title attributes in IMG and A tags

Re: alt and title attributes in IMG and A tags

Re: alt and title attributes in IMG and A tags

Re: alt and title attributes in IMG and A tags

Re: alt and title attributes in IMG and A tags

Re: alt and title attributes in IMG and A tags

Re: alt and title attributes in IMG and A tags

Similar Threads

Title and Alt attributes on Images

Alt Vs. Title - Battle of the Attributes

Image alt tags and link title attributes

ALT vs. TITLE attributes: how to correctly use them

Formatting Meta tags: title VS DC.title VS http-equiv=title

Posting Permissions