E-mail List Archives
Thread: coding attributes for image links
Number of posts in this thread: 11 (In chronological order)
From: Robin Brunner
Date: Tue, May 05 2009 1:15PM
Subject: coding attributes for image links
No previous message | Next message →
Is there a standard for coding
images which are also links?
The alt attribute goes in the <img> tag,
but what about the title attribute?
Sample code:
<a href="hhm.php"
tabindex="4">
<img src="images/hhmlogo.bmp"
width=120 height=128
alt="Helping Hands Logo"
title="Helping Hands Ministry Provides Emergency Financial Assistance and Referrals"/>
</a>
Put the title attribute in
the <img> or in the <a>, or both?
And please say why - e.g. IE's using alt as a tooltip. Or needs an empty title attribute because...
I can't find good direction on which way might yield the most inclusive page.
Thank you!
Robin Switzer Brunner
CompuPlace Director
601 Second Ave SE #3
Cedar Rapids, Iowa 52401-1305
319-362-4284
= EMAIL ADDRESS REMOVED =
www.ecc-cr.net
From: Jared Smith
Date: Tue, May 05 2009 2:35PM
Subject: Re: coding attributes for image links
← Previous message | Next message →
The title attribute is intended for advisory information. By my
interpretation, if the title text is necessary for accessibility,
that's probably more than 'advisory'. And if the title text is the
same as the visible text (or alt text), then this isn't really
advisory either - it's duplicated information.
So in the example you posted, as long as the necessary information to
make the image accessible is provided in the alt text, then you can
provide whatever other advisory information in the title attribute.
I would add the title attribute to either the link or the image. In
this case, the title seems to be more associated with the image rather
than the link. Just remember that title typically is not read by
screen readers, but it *could* be read, so it's a good idea to keep
that advisory information succinct.
IE shows alt text in a tooltip. It shouldn't. This is a misapplication
of alt text. An empty title does suppress this tooltip in IE, but I
wouldn't really worry about it.
Jared Smith
WebAIM.org
From: Keith Parks
Date: Tue, May 05 2009 3:00PM
Subject: Re: coding attributes for image links
← Previous message | Next message →
On May 5, 2009, at 1:31 PM, Jared Smith wrote:
> So in the example you posted, as long as the necessary information to
> make the image accessible is provided in the alt text, then you can
> provide whatever other advisory information in the title attribute.
>
> I would add the title attribute to either the link or the image. In
> this case, the title seems to be more associated with the image rather
> than the link.
First off, Jared probably knows more than I do. Nevertheless...
Seems to me that, while you *could* add the Title to either element,
having a Title on the link would be more helpful. While it looks like
from your code that it links to the Helping Hands Ministry (hhm.php),
and by convention a logo image is often a link to an organization's
home page, stating this specifically in the link Title is to me the
kind of "advisory information" it is useful to have.
<a href="hhm.php" title="link to the Helping Hands Ministry site"
tabindex="4">
So what I'm also saying is that your current title that is on the
image I would *not* recommend be also applied *as is* to the link.
My 2ยข.
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
Proud member of D/d.U.T.R.T.W.O.C.H.S.
(Designers/developers United To Rid The Web Of "Click Here" Syndrome)
From: Christophe Strobbe
Date: Wed, May 06 2009 2:35AM
Subject: Re: coding attributes for image links
← Previous message | Next message →
Hi,
At 22:31 5/05/2009, Jared Smith wrote:
>(...) Just remember that title typically is not read by
>screen readers, but it *could* be read, so it's a good idea to keep
>that advisory information succinct.
As far as I know, the title attribute is not accessible to keyboard
users, unless they happen to use a screen reader that is configured
to read the title attribute.
>IE shows alt text in a tooltip. It shouldn't. This is a misapplication
>of alt text. (...)
There is actually no evidence in the HTML 4.01 specification that
displaying the alt attribute as a tooltip is a violation or a
"misapplication". See
<http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#adef-alt>;.
If you want to bash IE for displaying alt as a tooltip, you'll have
to find rationale outside the spec. I've never seen any arguments
that go beyond "the other browsers don't do it". In fact, there are
even people who defend this behaviour because it has advantages for
certain low-vision users. (I don't have pointers, sorry.)
Best regards,
Christophe
--
Christophe Strobbe
K.U.Leuven - Dept. of Electrical Engineering - SCD
Research Group on Document Architectures
Kasteelpark Arenberg 10 bus 2442
B-3001 Leuven-Heverlee
BELGIUM
tel: +32 16 32 85 51
http://www.docarch.be/
---
"Better products and services through end-user empowerment"
http://www.usem-net.eu/
---
Please don't invite me to LinkedIn, Facebook, Quechup or other
"social networks". You may have agreed to their "privacy policy", but
I haven't.
From: Jared Smith
Date: Wed, May 06 2009 8:35AM
Subject: Re: coding attributes for image links
← Previous message | Next message →
On Wed, May 6, 2009 at 2:32 AM, Christophe Strobbe wrote:
> There is actually no evidence in the HTML 4.01 specification that
> displaying the alt attribute as a tooltip is a violation or a
> "misapplication".
True, the spec you provide does not say, "Don't show alt text in a
tooltip." But it does say, "... alternate text to serve as content
when the element cannot be rendered normally" and "For user agents
that cannot display images... this attribute specifies alternate
text." By my (and I think most people's) interpretation of this,
*alternative* text should only be rendered when the image cannot be
rendered.
> I've never seen any arguments that go beyond "the other browsers don't do it".
And considering the general compliance to standards in IE versus "the
other browsers", this should probably be evidence enough that IE is
probably doing it wrong.
Ultimately, it doesn't really matter that much though.
Jared
From: Christophe Strobbe
Date: Wed, May 06 2009 9:45AM
Subject: Re: coding attributes for image links
← Previous message | Next message →
At 16:33 6/05/2009, Jared Smith wrote:
>On Wed, May 6, 2009 at 2:32 AM, Christophe Strobbe wrote:
>
> > There is actually no evidence in the HTML 4.01 specification that
> > displaying the alt attribute as a tooltip is a violation or a
> > "misapplication".
>
>True, the spec you provide does not say, "Don't show alt text in a
>tooltip." But it does say, "... alternate text to serve as content
>when the element cannot be rendered normally" and "For user agents
>that cannot display images... this attribute specifies alternate
>text." By my (and I think most people's) interpretation of this,
>*alternative* text should only be rendered when the image cannot be
>rendered.
The point is that saying: "For user agents that cannot display
images... this attribute specifies alternate text" does not mean that
providing a tooltip is prohibited. Internet Explorer already showed
tooltips like this when HTML 4.0 was drafted but the editors did not
make any statement on this kind of behaviour, even though the spec
contains many other "should not" statements.
> > I've never seen any arguments that go beyond "the other browsers
> don't do it".
>
>And considering the general compliance to standards in IE versus "the
>other browsers", this should probably be evidence enough that IE is
>probably doing it wrong.
1. Does this mean that the real reason behind this interpretation of
the HTML 4 spec is IE bashing?
2. There are no official reference implementations of HTML (in fact,
I have never seen a browser that implements all of HTML), so the
behaviour of other browsers is not always a reliable indicator.
>Ultimately, it doesn't really matter that much though.
Does this mean that stating that IE's behaviour is not according to
specification is unnecessary quibbling?
Best regards,
Christophe
--
Christophe Strobbe
K.U.Leuven - Dept. of Electrical Engineering - SCD
Research Group on Document Architectures
Kasteelpark Arenberg 10 bus 2442
B-3001 Leuven-Heverlee
BELGIUM
tel: +32 16 32 85 51
http://www.docarch.be/
---
"Better products and services through end-user empowerment"
http://www.usem-net.eu/
---
Please don't invite me to LinkedIn, Facebook, Quechup or other
"social networks". You may have agreed to their "privacy policy", but
I haven't.
From: Jared Smith
Date: Wed, May 06 2009 10:30AM
Subject: Re: coding attributes for image links
← Previous message | Next message →
On Wed, May 6, 2009 at 9:44 AM, Christophe Strobbe wrote:
>>And considering the general compliance to standards in IE versus "the
>>other browsers", this should probably be evidence enough that IE is
>>probably doing it wrong.
>
> 1. Does this mean that the real reason behind this interpretation of
> the HTML 4 spec is IE bashing?
Yes. :-) Mostly.
> 2. There are no official reference implementations of HTML (in fact,
> I have never seen a browser that implements all of HTML), so the
> behaviour of other browsers is not always a reliable indicator.
True. But if you have 10 browsers that interpret things one way and IE
that interprets it an entirely different way, I think it's relatively
safe to assume which interpretation is more likely to be correct.
We see this all the time - if enough browsers do things regardless of
whether it's right or not, it naturally becomes *the* way of doing it.
Take the fact that screen readers read title text for form elements
missing a label. By the spec, I think this is totally wrong and
inappropriate, but if everyone does it, it eventually becomes an
appropriate technique (as is evidenced by its inclusion as a technique
in WCAG 2.0).
>>Ultimately, it doesn't really matter that much though.
>
> Does this mean that stating that IE's behaviour is not according to
> specification is unnecessary quibbling?
Yeah. If the debate is over correct implementation of the HTML spec,
then it's noteworthy. But the discussion here is about accessibility.
Some argue the alt tooltip is useful for accessibility and others
argue that it is distracting and decreases accessibility. There won't
be consensus here, but quibbling over such things can be fun and even
enlightening sometimes.
Jared
From: Lisa A. Cammarota
Date: Thu, May 07 2009 8:30AM
Subject: Re: coding attributes for image links
← Previous message | Next message →
Robin,
Personally, I like to add images to links through a css. Generally, I've found that the text in the link is descriptive enough. The only time I would deviate from this is if the image presented more content then the textual description. For instance a web page that is a gallery of pictures. In this case, I would include the image in the page using the <img> tag and include an appropriate alt description to describe the picture. Another situation would be the home page logo.
So, if the link you've listed goes to a home page I would do something like..
html
<a href="hhm.php" id="homePage" tabindex="4">Helping Hands Ministry</a>
CSS
#homePage{
width=120px;
height=128px;
background-image: url('images/hhmlogo.bmp);
background-repeat: no-repeat;
background-position: center left;
}
What's the gain?
> Images that don't add additional content are removed, making the html page smaller.
> Easier for a screen reader user to traverse
> Faster for the browser to load
> Separates aesthetics from the code
> You don't have to worry about whether or not a browser will read the title or alt text. It's plain text so it will be read.
Hope this helps :o)
Lisa Cammarota
>>> "Robin Brunner" < = EMAIL ADDRESS REMOVED = > 5/5/2009 3:13 PM >>>
Is there a standard for coding
images which are also links?
The alt attribute goes in the <img> tag,
but what about the title attribute?
Sample code:
<a href="hhm.php"
tabindex="4">
<img src="images/hhmlogo.bmp"
width=120 height=128
alt="Helping Hands Logo"
title="Helping Hands Ministry Provides Emergency Financial Assistance and Referrals"/>
</a>
Put the title attribute in
the <img> or in the <a>, or both?
And please say why - e.g. IE's using alt as a tooltip. Or needs an empty title attribute because...
I can't find good direction on which way might yield the most inclusive page.
Thank you!
Robin Switzer Brunner
CompuPlace Director
601 Second Ave SE #3
Cedar Rapids, Iowa 52401-1305
319-362-4284
= EMAIL ADDRESS REMOVED =
www.ecc-cr.net
From: Evans, Donald (Contractor)
Date: Thu, May 07 2009 9:15AM
Subject: Re: coding attributes for image links
← Previous message | Next message →
This CSS image will disappear using high contrast mode. Is that an issue?
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lisa A. Cammarota
Sent: Thursday, May 07, 2009 10:23 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] coding attributes for image links
Robin,
Personally, I like to add images to links through a css. Generally, I've found that the text in the link is descriptive enough. The only time I would deviate from this is if the image presented more content then the textual description. For instance a web page that is a gallery of pictures. In this case, I would include the image in the page using the <img> tag and include an appropriate alt description to describe the picture. Another situation would be the home page logo.
So, if the link you've listed goes to a home page I would do something like..
html
<a href="hhm.php" id="homePage" tabindex="4">Helping Hands Ministry</a>
CSS
#homePage{
width=120px;
height=128px;
background-image: url('images/hhmlogo.bmp);
background-repeat: no-repeat;
background-position: center left;
}
What's the gain?
> Images that don't add additional content are removed, making the html page smaller.
> Easier for a screen reader user to traverse
> Faster for the browser to load
> Separates aesthetics from the code
> You don't have to worry about whether or not a browser will read the title or alt text. It's plain text so it will be read.
Hope this helps :o)
Lisa Cammarota
>>> "Robin Brunner" < = EMAIL ADDRESS REMOVED = > 5/5/2009 3:13 PM >>>
Is there a standard for coding
images which are also links?
The alt attribute goes in the <img> tag,
but what about the title attribute?
Sample code:
<a href="hhm.php"
tabindex="4">
<img src="images/hhmlogo.bmp"
width=120 height=128
alt="Helping Hands Logo"
title="Helping Hands Ministry Provides Emergency Financial Assistance and Referrals"/>
</a>
Put the title attribute in
the <img> or in the <a>, or both?
And please say why - e.g. IE's using alt as a tooltip. Or needs an empty title attribute because...
I can't find good direction on which way might yield the most inclusive page.
Thank you!
Robin Switzer Brunner
CompuPlace Director
601 Second Ave SE #3
Cedar Rapids, Iowa 52401-1305
319-362-4284
= EMAIL ADDRESS REMOVED =
www.ecc-cr.net
From: Lisa A. Cammarota
Date: Thu, May 07 2009 12:10PM
Subject: Re: coding attributes for image links
← Previous message | Next message →
Not sure, guess it depends on how important the image is to the page.
>>> "Evans, Donald (Contractor)" < = EMAIL ADDRESS REMOVED = > 5/7/2009 11:10 AM >>>
This CSS image will disappear using high contrast mode. Is that an issue?
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lisa A. Cammarota
Sent: Thursday, May 07, 2009 10:23 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] coding attributes for image links
Robin,
Personally, I like to add images to links through a css. Generally, I've found that the text in the link is descriptive enough. The only time I would deviate from this is if the image presented more content then the textual description. For instance a web page that is a gallery of pictures. In this case, I would include the image in the page using the <img> tag and include an appropriate alt description to describe the picture. Another situation would be the home page logo.
So, if the link you've listed goes to a home page I would do something like..
html
<a href="hhm.php" id="homePage" tabindex="4">Helping Hands Ministry</a>
CSS
#homePage{
width=120px;
height=128px;
background-image: url('images/hhmlogo.bmp);
background-repeat: no-repeat;
background-position: center left;
}
What's the gain?
> Images that don't add additional content are removed, making the html page smaller.
> Easier for a screen reader user to traverse
> Faster for the browser to load
> Separates aesthetics from the code
> You don't have to worry about whether or not a browser will read the title or alt text. It's plain text so it will be read.
Hope this helps :o)
Lisa Cammarota
>>> "Robin Brunner" < = EMAIL ADDRESS REMOVED = > 5/5/2009 3:13 PM >>>
Is there a standard for coding
images which are also links?
The alt attribute goes in the <img> tag,
but what about the title attribute?
Sample code:
<a href="hhm.php"
tabindex="4">
<img src="images/hhmlogo.bmp"
width=120 height=128
alt="Helping Hands Logo"
title="Helping Hands Ministry Provides Emergency Financial Assistance and Referrals"/>
</a>
Put the title attribute in
the <img> or in the <a>, or both?
And please say why - e.g. IE's using alt as a tooltip. Or needs an empty title attribute because...
I can't find good direction on which way might yield the most inclusive page.
Thank you!
Robin Switzer Brunner
CompuPlace Director
601 Second Ave SE #3
Cedar Rapids, Iowa 52401-1305
319-362-4284
= EMAIL ADDRESS REMOVED =
www.ecc-cr.net
From: Peter Weil
Date: Fri, May 08 2009 7:20AM
Subject: Re: coding attributes for image links
← Previous message | No next message
On May 6, 2009, at 10:44 AM, Christophe Strobbe wrote:
> Does this mean that stating that IE's behaviour is not according to
> specification is unnecessary quibbling?
It appears that the IE team has already acknowledged this behavior as
a bug:
http://robertnyman.com/2009/05/07/the-alt-attribute-is-not-for-tooltips/