alt text in css layout?

[Alan Cole]

I've been 'playing' with css layout recently and have been using
background images for specific <divs> to control the layout of section
headers.

So, for example a hypothetical div called 'about this page' will have a
pretty background image containing the words 'about this page'

e.g.
#about_this_page h2
{
background: #59365f url(images/about_this_page.gif) no-repeat;
}

(positioning etc. has been omitted)

If I was using a similar technique with a table layout I would give the
particular cell a background_image and also give that image the ALT text
alt="about this page"

So my questions are:
Is there a way to assign alternative (alt) text to a background image in
CSS?
If so how?
If not, what is the accepted way to provide alt text in such
circumstances using css?

At the moment I have been setting up another style for a <span> element
within the about_this_page div (sorry if the terminology is wrong) that
basically pushes the text off the screen... will screen readers / text
only browsers 'see' this text?
e.g.

#about_this_page h2 span
{
text-indent: -2000px;
margin: 0;
padding: 0;
}

so the html becomes:
<div id="about_this_page">
<h2><span>About This Page</span></h2>
</div>

I hope that makes sense.
Al.

 

[Dylan Parry]

At the moment I have been setting up another style for a <span> element
within the about_this_page div (sorry if the terminology is wrong) that
basically pushes the text off the screen... will screen readers / text
only browsers 'see' this text?

The way I would do it would be:

<h2 id="myheading"><span>My Heading</span></h2>

h2#myheading {
background: url('http://www.mydomain.com/myheading.jpg') no-repeat;
height: /image_height/px
}
h2 span {
display: none;
}

Where /image_height/ is the height of the myheading.jpg image. You might
have to assign a width to the h2#myheading as well, but I'm not sure
about that

 

[jake]

The way I would do it would be:

<h2 id="myheading"><span>My Heading</span></h2>

h2#myheading {
background: url('http://www.mydomain.com/myheading.jpg') no-repeat;
height: /image_height/px
}
h2 span {
display: none;
}

Where /image_height/ is the height of the myheading.jpg image. You
might have to assign a width to the h2#myheading as well, but I'm not
sure about that

'display:none' will be respected by many screen readers and will,
therefore, be invisible to them.

http://www.stopdesign.com/articles/replace_text/

regards.

 

[jake]

In message <[email protected]>,

I have been setting up another style for a <span> element
within the about_this_page div (sorry if the terminology is wrong) that
basically pushes the text off the screen... will screen readers / text
only browsers 'see' this text?

Yes .... that should work with most (all?) screen readers.

 

[Spartanicus]

If I was using a similar technique with a table layout I would give the
particular cell a background_image and also give that image the ALT text
alt="about this page"

Background images don't have attributes (both with presentational HTML
or CSS).

There's a drawback to using background images, for it to work you need
to assign a width and height to the element that has the background
image. A user should be able to disable display of images, the occupied
screen space should then be freed up. Using background images prevents
that functionality.

At the moment I have been setting up another style for a <span> element
within the about_this_page div (sorry if the terminology is wrong) that
basically pushes the text off the screen... will screen readers / text
only browsers 'see' this text?
e.g.

#about_this_page h2 span
{
text-indent: -2000px;
margin: 0;
padding: 0;
}

The typical method to prevent content from being rendered on screen
whilst allowing it to be read out by speaking UAs is to absolutely
position it off screen, example:

h1 span{position:absolute;top:-99em;left:-99em}

so the html becomes:
<div id="about_this_page">
<h2><span>About This Page</span></h2>
</div>

1) Do you need the div wrapper?
2) Shouldn't that be "About this *Site*"?
3) Shouldn't that be the h1 header?

 

[Spartanicus]

The way I would do it would be:

h2 span {
display: none;
}

Screen readers typically piggy back onto a rendering engine such as IE,
they read out what it outputs to the screen, hence content suppressed
with display:none is not read out.

 

[Alan Cole]

1) Do you need the div wrapper?
2) Shouldn't that be "About this *Site*"?
3) Shouldn't that be the h1 header?

This was a hypothetical example!

Sounds as though I was just about doing things correctly though.

Thanks.

Al.

 

[Dylan Parry]

'display:none' will be respected by many screen readers and will,
therefore, be invisible to them.

Well that's just a bugger isn't it?

In which case, I would use:

<div id="myheading">
<h2 class="hidden">My Heading</h2>
</div>

div#myheading {
background: url('image.jpg') no-repeat;
height: #px;
}
h2.hidden {
height: 0px; // I know!
overflow: hidden;
}

The idea being that the h2.hidden can be used numerous times instead of
setting up a parent/child style rule, which would only work once.

 

[Spartanicus]

This was a hypothetical example!

If you make mistakes like that in a usenet posting I'm betting you make
the same mistakes in non hypothetical documents.

Let's briefly look at http://www.tsunami-site-design.co.uk [Website
Design]:

1) Tables used for layout
2) Transitional doctype
3) Presentational html
4) Incorrect usage of the title attribute on images
5) Incorrect h1 content

I could go on, but I got sick looking at your code.

Sounds as though I was just about doing things correctly though.

Get your eyes & ears checked.

 

[jake]

In message <[email protected]>,


Yes .... that should work with most (all?) screen readers.

Although, come to think of it in your context, graphical browser users

 

[David Dorward]

So my questions are:
Is there a way to assign alternative (alt) text to a background image in
CSS?

No, although various ways to fake it have been discussed elsewhere in this
thread.

If not, what is the accepted way to provide alt text in such
circumstances using css?

CSS is the presentation layer; content belongs in the content layer. If the
image contains content, then use an <img> element.