homepage Welcome to WebmasterWorld Guest from 107.21.187.131
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

    
Alt Attribute
Display on Hover...
pageoneresults




msg:3252879
 10:36 pm on Feb 14, 2007 (gmt 0)

Microsoft, you have it wrong! The alt attribute is not supposed to display on hover. You are the only browser that does this (I believe).

I have an image that is linked and I need to provide a title attribute so that it displays as a tool tip on hover. Because you, Microsoft, display the alt attribute on hover, my tool tips don't work. :(

 

cmarshall




msg:3252928
 11:56 pm on Feb 14, 2007 (gmt 0)

Well, I'll be damned. You're right. I've never noticed this because I've always followed an implicit practice of using title text in my alt.

Now I know why.

iamlost




msg:3252929
 11:59 pm on Feb 14, 2007 (gmt 0)

The title attribute will normally override the alt in IE.

If only the alt is used IE will display its contents as a tooltip.
<img src="foo.jpg" alt="foo"> : tooltip=[foo]

If title is used, even empty, IE will show it instead.
<img src="foo.jpg" alt="foo" title="pic of a foo"> : tooltip=[pic of a foo]
<img src="foo.jpg" alt="foo" title=""> : no tooltip.

cmarshall




msg:3252938
 12:35 am on Feb 15, 2007 (gmt 0)

The title attribute will normally override the alt in IE.

If only the alt is used IE will display its contents as a tooltip.
<img src="foo.jpg" alt="foo"> : tooltip=[foo]

If title is used, even empty, IE will show it instead.
<img src="foo.jpg" alt="foo" title="pic of a foo"> : tooltip=[pic of a foo]
<img src="foo.jpg" alt="foo" title=""> : no tooltip.

The one I tested with (and, I suspect, the one p1r was talking about) was this:

<a title="surrounding anchor" href="#"><img src="images/banner.gif" alt="inner image" /></a>

IE Displays "inner image." Everything else displays "surrounding anchor."

pageoneresults




msg:3252970
 1:32 am on Feb 15, 2007 (gmt 0)

The one I tested with (and, I suspect, the one p1r was talking about) was this:

That would be correct. It breaks an important usability feature.

P.S. It has actually been like this for as long as I can remember. I thought they might fix it in IE7, but they did not.

iamlost




msg:3256169
 5:05 pm on Feb 18, 2007 (gmt 0)

pageoneresults: sure wish you'd posted example code so I could have kept my foot out of my mouth. Thanks cmarshall for the clarification.

I have wandered back through my templates to see why that split title/alt situation never caught my attention before. Apparently I have never split the two.

My x-browser conflict list thanks you both for the 'new' member.

pageoneresults




msg:3256213
 6:37 pm on Feb 18, 2007 (gmt 0)

iamlost, don't worry about it. This is something that few usually delve into. Heck, my mouth is large enough to insert both feet. ;)

<a title="Description of Link Destination" href="/widgets/file.htm"><img src="/widgets/images/file.gif" alt="Description of Widget Image" /></a>

There are two functions occurring above. One describes the destination of the link (title=""). The other describes the content of the image (alt="").

When you have an image that is linked like the above, it is good practice to describe the linked destination and the image separately. They normally would not be the same which is what most will do, replicate their alt attribute in the title attribute.

One describes the image, the other describes the destination of the link.

These are both usability and accessibility features that go beyond the standard misuse of these two attributes. ;)

iamlost




msg:3256348
 10:17 pm on Feb 18, 2007 (gmt 0)

What surprised me and took some checking was that I haven't linked an image (or conversely added an image to a link) directly in the HTML for several years, rather only included it via CSS background. Thus that particular IE feature was not encountered in contrast with other browsers.

I had not realised how long since I made that transition. The older I get the faster time goes by. Oh how I miss those school summer vacations that seemed to last forever...

cmarshall




msg:3256362
 10:52 pm on Feb 18, 2007 (gmt 0)

That's pretty much the same for me. I always use block-display anchors with background-images.

pageoneresults




msg:3256365
 10:58 pm on Feb 18, 2007 (gmt 0)

I always use block-display anchors with background-images.

You lose the power of the linked image and alt attribute when using background images.

bobothecat




msg:3256389
 11:39 pm on Feb 18, 2007 (gmt 0)

7.4.3 The title attribute
Attribute definitions

title = text [CS]
This attribute offers advisory information about the element for which it is set.
Unlike the TITLE element, which provides information about an entire document and may only appear once, the title attribute may annotate any number of elements. Please consult an element's definition to verify that it supports this attribute.

Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:

...some text...
Here's a photo of
<A href="http://someplace.com/neatstuff.gif" title="Me scuba diving">
me scuba diving last summer
</A>
...some more text...

The title attribute has an additional role when used with the LINK element to designate an external style sheet. Please consult the section on links and style sheets for details.

Note. To improve the quality of speech synthesis for cases handled poorly by standard techniques, future versions of HTML may include an attribute for encoding phonemic and prosodic information.

[w3.org...]

If this doesn't help... or if I screwed-up... sticky me.

iamlost




msg:3256475
 2:02 am on Feb 19, 2007 (gmt 0)

I agree that there is great power in images.

However, I believe that in most (all?) anchor-link situations an image is an enhancement, not a necessity. The text must be there, an image may be there. So if I add an image it is delivered as a CSS decorative background.

If an image is an informational necessity (as in one image = 1000 words) it resides appropriately in content with a visible caption.

I prefer using a <dl> with the <dt> holding the image plus appropriate title and alt attributes and the <dd> the caption plus link (uaually with title) if required. A matter of personal preference.

I detest uncaptioned information images - tabbing or hovering to learn concealed truth is a pain. And I like my links visible and obvious - mousing about in search of concealed links is silly. Really a matter of Accessibility and Usability.

It is also a matter of ease of substition. I find it easier to program containers.
And ease of noting copyright - have you noticed how few sites do so?

DrDoc




msg:3271862
 8:50 pm on Mar 5, 2007 (gmt 0)

Without changing your markup for those pesky linked images ...

<a title="Description of Link Destination" href="/widgets/file.htm"><img src="/widgets/images/file.gif" alt="Description of Widget Image"></a> 
<!--[if lte IE 7]>
<script type="text/javascript">
img = document.images;
for(i = 0; i < img.length; i++) {
elem = document.images[i];
if(elem.title == '' && elem.parentNode.tagName == 'A') {
elem.title = elem.parentNode.title;
}
}
</script>
<![endif]-->

In IE only -- if you have an image without an explicit title attribute, it will use that of the surrounding link.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved