Support » Themes and Templates » Adding Alt Text to an image

  • Is there a way to add Alt Text to a background image? I have a small image in my CSS under “h2” which displays alongside the date of my posts. In the css I have:
    background-image: url ('');
    I’ve tried placing the usual html code within the parenthesis but it doesn’t work.

Viewing 7 replies - 1 through 7 (of 7 total)
  • No, you can’t. By putting the image in the CSS it becomes part of the presentational aspect of the web page and hence it is no longer part of the content (separation of form and content).
    When someone with a visual handicap visits your site with a text-only or text-to-speech browser the image ‘under’ your H2’s is effectively not there for them, hence you don’t even need to add an “alt” text.
    Note: “alt” text is supposed to give a description of visual elements in the content of the page, however if you want to create a “mouse tip” balloon text when you hover over a certain element, you should always use “title”, which can be added to virtually any tag you’d like.
    So, this is possible:
    <h2 title="some mouse tip text goes here">h2 Title goes here</h2>

    Except for image tags. You can’t use title in them only “alt”. It won’t validate for XHTML.

    bummer….I guess I’ll have to use the image slicer in PSP to add alternate text to the image file itself and then imbed that in the css.

    “title” in an img tag validates as xhtml transitional… I don’t know about strict.
    you can set both alt and title on images and the browser will actually display the title when hovering over the image. alt really isn’t for that, it’s just that IE does that.

    So, do I use “title” just like I would use “alt”?
    background-image: url ('' title='blahblahblah');
    background-image: title ('blahblahblah');

    No. You simply cannot put “alt” or “title” attributes in your stylesheet because the are HTML attributes.
    Both “alt” and “title” should be in your index.php template and not in your stylesheet.
    If you have the image background you’re talking about set on a “h2” element, you should set the “title” attribute on that “h2” element and not on the background image.
    I’m not sure I can make this any clearer, but this is simply the way it is. If you need some help with your actual HTML or CSS, please post a link so we can have a look at it, because so far we’ve only been talking theory 🙂
    The difference between “alt” and “title” is that the text in “alt” is there purely for those situations where you cannot view the image that the alt text is attached to (like when you are blind or when you are using a text-only browser like Lynx), while the text in the “title” attribute should show up in a little mouse tip balloon when you hover over the element that you have put attribute on.
    Many people confuse this, because Internet Explorer shows the “alt” text in the mouse tip balloon when there is not “title” attribute. Check this difference with Firefox and you’ll see that it won’t display the “alt” text as a mouse tip.



    I don’t get it?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Adding Alt Text to an image’ is closed to new replies.