WordPress.org

Ready to get started?Download WordPress

Forums

Adding Alt Text to an image (8 posts)

  1. Jabbok
    Member
    Posted 9 years ago #

    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 ('www.thedirectory.com');
    I've tried placing the usual html code within the parenthesis but it doesn't work.
    Thanks.....

  2. Muffinboy
    Member
    Posted 9 years ago #

    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>

  3. Stuart
    Member
    Posted 9 years ago #

    Except for image tags. You can't use title in them only "alt". It won't validate for XHTML.

  4. Jabbok
    Member
    Posted 9 years ago #

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

  5. Muffinboy
    Member
    Posted 9 years ago #

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

  6. Jabbok
    Member
    Posted 9 years ago #

    So, do I use "title" just like I would use "alt"?
    background-image: url ('www.thedirectory.com' title='blahblahblah');
    or
    background-image: title ('blahblahblah');

  7. Muffinboy
    Member
    Posted 9 years ago #

    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.

  8. ravetildon
    Member
    Posted 8 years ago #

    I don't get it?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.