WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: coding attributes for image links

for

From: Evans, Donald (Contractor)
Date: May 7, 2009 9:15AM

This CSS image will disappear using high contrast mode. Is that an issue?

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Lisa A. Cammarota
Sent: Thursday, May 07, 2009 10:23 AM
To: <EMAIL 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 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 REMOVED>
www.ecc-cr.net