alt text in css layout?

Discussion in 'HTML' started by Alan Cole, Dec 3, 2004.

  1. Alan Cole

    Alan Cole Guest

    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.

    --
    Alan Cole. E-mail: justal at lineone dot net
    http://www.forces-of-nature.co.uk [Coastal Sports]
    http://www.tsunami-site-design.co.uk [Website Design]
    http://tinyurl.com/64xrd [Plusnet ISP]
    Alan Cole, Dec 3, 2004
    #1
    1. Advertising

  2. Alan Cole

    Dylan Parry Guest

    Alan Cole wrote:

    > 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 :)

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Dec 3, 2004
    #2
    1. Advertising

  3. Alan Cole

    jake Guest

    In message <>, Dylan Parry
    <> writes
    >Alan Cole wrote:
    >
    >> 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 :)
    >

    '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
    jake, Dec 3, 2004
    #3
  4. Alan Cole

    jake Guest

    In message <>,
    Alan Cole <> writes
    [snip]

    > 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.

    >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.
    >


    --
    Jake
    jake, Dec 3, 2004
    #4
  5. Alan Cole

    Spartanicus Guest

    Alan Cole <> wrote:

    >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
    Spartanicus, Dec 3, 2004
    #5
  6. Alan Cole

    Spartanicus Guest

    Dylan Parry <> wrote:

    >> 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 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.

    --
    Spartanicus
    Spartanicus, Dec 3, 2004
    #6
  7. Alan Cole

    Alan Cole Guest


    > >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?


    This was a hypothetical example!

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

    Thanks.

    Al.

    --
    Alan Cole. E-mail: justal at lineone dot net
    http://www.forces-of-nature.co.uk [Coastal Sports]
    http://www.tsunami-site-design.co.uk [Website Design]
    http://tinyurl.com/64xrd [Plusnet ISP]
    Alan Cole, Dec 3, 2004
    #7
  8. Alan Cole

    Dylan Parry Guest

    jake wrote:

    > '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.

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Dec 3, 2004
    #8
  9. Alan Cole

    Spartanicus Guest

    Alan Cole <> wrote:

    >> >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?

    >
    >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.

    --
    Spartanicus
    Spartanicus, Dec 3, 2004
    #9
  10. Alan Cole

    jake Guest

    In message <>, jake
    <> writes
    >In message <>,
    >Alan Cole <> writes
    >[snip]
    >
    >> 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.
    >

    Although, come to think of it in your context, graphical browser users
    who turn off image download won't then see anything for the <h2> ......

    >>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.
    >>

    >


    --
    Jake
    jake, Dec 3, 2004
    #10
  11. Alan Cole wrote:

    > 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.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
    David Dorward, Dec 3, 2004
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    695
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    978
  3. Replies:
    1
    Views:
    557
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    983
    Wÿrm
    Jun 20, 2006
  5. Replies:
    29
    Views:
    848
    Ben C
    Mar 21, 2008
Loading...

Share This Page