WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: CSS background image Alt Text

for

Number of posts in this thread: 3 (In chronological order)

From: Ben Morrison
Date: Fri, Jun 27 2003 4:08AM
Subject: CSS background image Alt Text
No previous message | Next message →

Hi,

Im in the process of a re-design of our site. Using CSS for layout I have
the following:

#homenav{
background:#F11A07 url(images/dogstar.gif) no-repeat 140px 35px;
}

Which is great, perfect position, can lay text where I want over it etc.

But, how do I specify alt text for such an image? The image says
"welcome to dogstar". Could I use:

#welcome{
display:none
}
<div id="welcome">welcome to dogstar</div>

How has anyone else solved this?

ben



----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: Jukka K. Korpela
Date: Fri, Jun 27 2003 4:24AM
Subject: Re: CSS background image Alt Text
← Previous message | Next message →

On Fri, 27 Jun 2003, Ben Morrison wrote:

> But, how do I specify alt text for [a background] image?

You don't. That's why background images shouldn't be used for actual
content. Remember that they will be omitted when style sheets are
disabled, too. On printing, browsers typically omit background images,
though they might have an option for getting them printed.

> The image says "welcome to dogstar". Could I use:
>
> #welcome{
> display:none
> }
> <div id="welcome">welcome to dogstar</div>

When CSS is off and images are on, there would be duplication.
When CSS in on and images are off, the message would not appear.

The best approach is to make it a content image embedded via <img>, and
optionally styled. (Advanced browsers, such as Mozilla and Opera, apply
text-related CSS properties to alt texts too.)

On the other hand, is the welcoming message really needed? If there is a
useful heading that tells what the page is about, and adequate contextual
links, then "welcome to..." would not be necessary, just
something auxiliary, presentation rather than content proper.

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: Michael Goddard
Date: Fri, Jun 27 2003 6:41AM
Subject: RE: CSS background image Alt Text
← Previous message | No next message

I believe that it is NOT possible to input an alt attribute to a background
image since it becomes part of the document and not a separate entity or
object. You CAN however input a title attribute within the div tag which
will pop up a balloon upon hold the cursor over the div layer.

<div id="welcome" title="Welcome to dogstar">welcome to dogstar</div>

Hope this helps. I personally do not know if you can control this via CSS
though.

Michael



-----Original Message-----
From: Ben Morrison [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Friday, June 27, 2003 6:04 AM
To: = EMAIL ADDRESS REMOVED =
Subject: CSS background image Alt Text


Hi,

Im in the process of a re-design of our site. Using CSS for layout I have
the following:

#homenav{
background:#F11A07 url(images/dogstar.gif) no-repeat 140px 35px; }

Which is great, perfect position, can lay text where I want over it etc.

But, how do I specify alt text for such an image? The image says "welcome to
dogstar". Could I use:

#welcome{
display:none
}
<div id="welcome">welcome to dogstar</div>

How has anyone else solved this?

ben



----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/






----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/