SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 48
  1. #1
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alt or title or nothing?

    Could someone please advise me if I should include an alt or title attribute on my header images... or nothing?

    I havn't as of yet because they're kind of decorative.

    This would obviously not apply on the about page as it's header is an animated swf.

    Here's the site: http://www.jeremyhodge.pwp.blueyonder.co.uk

  2. #2
    Django Jedi neron-fx's Avatar
    Join Date
    Sep 2007
    Location
    Bristol/Bath, UK
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rabbitsfeat View Post
    Could someone please advise me if I should include an alt or title attribute on my header images... or nothing?

    I havn't as of yet because they're kind of decorative.

    This would obviously not apply on the about page as it's header is an animated swf.

    Here's the site: http://www.jeremyhodge.pwp.blueyonder.co.uk
    Hi rabbitsfeat,

    If it's an image, I generally apply Alt and Title attributes. This is very important for things like Accessibility and Screen readers. Ideally you should not be using images as spacers. use CSS to create your layout and apply margins and padding to the different elements of the page. That way you should only be applying these attributes to images that actually need a relevant title and alternate text. If its a decorative graphic and not just a spacer or place holder then there is no harm in applying and alt and title attribute as this just gives the user using a screen reader a better feel for the page.

    In your particular case I would apply alt and title attributes with the name of your painting and possibly the date you created it.

    EDIT: If you are using XHTML Strict 1.0 as your doctype then I think an Alt attribute is compulsory on all images anyway.
    Neron-Fx
    Everytime a user opens Internet Explorer, a web developer dies...
    http://www.savethedevelopers.org/

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rabbitsfeat View Post
    Could someone please advise me if I should include an alt or title attribute on my header images... or nothing?
    These images are purely decorative and should be background images, in my opinion. If you decide to use img elements after all, they should have alt="", since they don't convey any information that is relevant to the page.

    If you were to read the content of one of those pages to someone over the phone, would you bother describing the header image?

    Quote Originally Posted by neron-fx View Post
    If you are using XHTML Strict 1.0 as your doctype then I think an Alt attribute is compulsory on all images anyway.
    The alt attribute is required for img elements in HTML4 and XHTML1, Transitional as well as Strict.
    Birnam wood is come to Dunsinane

  4. #4
    Django Jedi neron-fx's Avatar
    Join Date
    Sep 2007
    Location
    Bristol/Bath, UK
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    The alt attribute is required for img elements in HTML4 and XHTML1, Transitional as well as Strict.
    Thanks for clearing that up AutisticCuckoo

    With regards to the original question, do you not think that the images are relevant parts of the sites content?? They are images of pictures that he has created. Surely they add to the content of the page and therefore should have the alt and title attributes?

    If it was just a swirl or some other basic graphic then I would agree with you 100%, but in this case IMHO I think some kind of alt should be a minimum?
    Neron-Fx
    Everytime a user opens Internet Explorer, a web developer dies...
    http://www.savethedevelopers.org/

  5. #5
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The images are applied like this:

    Code:
    .sectionAbout #masthead {
    		background: url(images/masthead-wolves.jpg);
    		}
    		
    .sectionEasel #masthead {
    		background: url(images/masthead-kingfishers.jpg);
    		}
    		
    .sectionGallery #masthead {
    		background: url(images/masthead-squirrel.jpg);
    		}
    		
    .sectionTuition #masthead {
    		background: url(images/masthead-jaguar.jpg);
    		}
    		
    .sectionContacts #masthead {
    		background: url(images/masthead-window.jpg);
    		}
    They are decorative, but I agree that they do kind of convey some meaning as to what sort of content you can expect to find on this site.

    The site is for my mums boyfriend and I don't think the paintings have titles and I doubt he remembers the date he painted them. So if any alt or title text is used it would probably be something like: Painting or picture of Wolves, Kingfishers, etc.

    Would it be a good idea to explain what that part of the page is in there somewhere? i.e. website banner painting of... that sort of thing? Or not.

    Thanks for your help so far.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by neron-fx View Post
    With regards to the original question, do you not think that the images are relevant parts of the sites content?? They are images of pictures that he has created. Surely they add to the content of the page and therefore should have the alt and title attributes?
    They are beautiful, but I don't see how they are part of the content. Labeling them as decorative doesn't mean they aren't important. They add to the general feeling of the page and draw interest to the content, but they are not part of the content as far as I can see.

    If you think otherwise, please explain the way you consider how the factual content of the page would change if the image were omitted. From my point of view (which is subjective) the page would become less aesthetically pleasing, without a doubt, but it wouldn't make a difference to the content as such.

    If the images do convey relevant information, then the alt text should be very simple to come up with: it should mirror the information conveyed by the image.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After all I guess you're right. When I finally get the copy for these pages that should give the information rather than putting anything in the alt attributes of these decorative images. You're right they just add to the asthetics.

    Should I just not bother at all then or put alt="" for these images?

    Incidentally, and I may be being dumb here but how do you actually add an alt attribute to an image being applied to a page as a background image, i.e.

    Code:
    .sectionAbout #masthead {
    		background: url(images/masthead-wolves.jpg);
    		}
    Thanks for all your help on this.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rabbitsfeat View Post
    Should I just not bother at all then or put alt="" for these images?
    If you keep them as img elements you should use alt="". The alt attribute is required and must not be omitted. By specifying an empty value you tell user agents that the image doesn't have a text equivalent, i.e., that it doesn't convey any vital information in this context.

    Quote Originally Posted by rabbitsfeat View Post
    Incidentally, and I may be being dumb here but how do you actually add an alt attribute to an image being applied to a page as a background image, i.e.
    You can't. If an image conveys important information (hence needs a text equivalent) it's part of the content, and you shouldn't use a background image. Background images are for purely decorative images that aren't part of the content.
    Birnam wood is come to Dunsinane

  9. #9
    Django Jedi neron-fx's Avatar
    Join Date
    Sep 2007
    Location
    Bristol/Bath, UK
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    They are beautiful, but I don't see how they are part of the content. Labeling them as decorative doesn't mean they aren't important. They add to the general feeling of the page and draw interest to the content, but they are not part of the content as far as I can see.

    If you think otherwise, please explain the way you consider how the factual content of the page would change if the image were omitted. From my point of view (which is subjective) the page would become less aesthetically pleasing, without a doubt, but it wouldn't make a difference to the content as such.

    If the images do convey relevant information, then the alt text should be very simple to come up with: it should mirror the information conveyed by the image.
    Hi guys,

    AutisticCuckoo, I see where you are coming from now and do agree. I was thinking that if the content somehow referenced the images in the header then that would make them relevant content and therefore require the tags. But if they are purely decorative then I do agree with what you are saying. I guess its because Im a web purist and believe that all content should be accessible to everyone... sometimes I go to the extremes
    Neron-Fx
    Everytime a user opens Internet Explorer, a web developer dies...
    http://www.savethedevelopers.org/

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I'm a purist but the other way around-- I see 99% of all images as decoration, possibly adding to the content the way Javascript does-- an image can make something clearer, like Javascript can make a form easier to handle, but they are enhancements of the content and not content itself-- because everything you need to say belongs in the actual textual content IMO. I throw as many images into the background as possible. I can't seem to do that with banners, so they sit in the HTML, and on sites where people submit photos, this has the same problem. In those cases, I'm trying to get both the advertisers and the image submitters to give me some alt text so that we have it-- I really don't like alt="" as it just gets around the validator but tells visitors "Hey! There's a picture here!" and nothing else : (

    The content should be accessible to everyone. So don't lock your content up in images and you're good to go.

  11. #11
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I really don't like alt="" as it just gets around the validator but tells visitors "Hey! There's a picture here!" and nothing else : (
    I disagree. For the main branding logo of your page for example if you do not have an alt tag and disable images what do you see?

    You do not see anything. This is one of the many reason why alt tags are important. If you have images as part of your content that means they are content. To me it's as bad as having a <p></p> with no content in between.

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Cooper, you completely misunderstand. It's "alt="" " that I don't like. With the empty quotes. That's why I try to use Gilder-Levin image replacement for things like logos-- the h1 or the p or whatever holds the text (which can be styled too : ) and the image is just a background sitting on top.

    You see nothing with alt="" (with the empty quotes). So, it gets around the validator (there's the required alt attribute) but it only lets the surfer know that there's an image there and nothing else. (and on my browsers, I don't even get that-- I get zero indication that there ever was an image, no border, no broken image link, nothing-- which is another thing I don't like about random alt text, they make it harder for me to follow a page when suddenly there's this random text that maybe summarises an image but has nothing to do with the paragraph I'm reading, and I can't tell it's the alt text of an image without turning images on.)

    So even on a site of ours where people send photos and they are dynamically generated on the page, I at least have some stupid text like
    alt="huisfoto" cause while I don't know enough about the photo to be any more descriptive, you at the very least know it's a house photo (on a real estate site).

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A logo should not have alt=""; the text equivalent should be the name of the company or organisation. It conveys important information, viz. which company's website you've reached.
    Birnam wood is come to Dunsinane

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I never said it should : (

  15. #15
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Cooper, you completely misunderstand. It's "alt="" " that I don't like. With the empty quotes.
    I can understand how empty alt tags can get annoying

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally, I find it much more annoying when people call them alt tags instead of alt attributes. There are no <alt> tags in (X)HTML.
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Personally, I find it much more annoying when people call them alt tags instead of alt attributes. There are no <alt> tags in (X)HTML.
    haha you are correct

  18. #18
    SitePoint Addict learnerseo's Avatar
    Join Date
    Feb 2008
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IMO, alt attributes as you say are necessary for certain images to rank well in Image search of SEs.

  19. #19
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by learnerseo View Post
    IMO, alt attributes as you say are necessary for certain images to rank well in Image search of SEs.

    The alt attribute is MANDATORY for images for the HTML to be valid. If you don't need an alt attribute then the image should be a background in the CSS rather than an <img> tag in the first place.

    Also the alt attribute should describe the purpose of the image for those who don't see the image. The only relevance that SEO has is that search engines don't see the image any more than blind people do.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  20. #20
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I would argue that 90&#37; of alt attributes should be empty if done properly.

    One of the most important things to realise is that the alt text is NOT a description of the image, it is a text alternative (use longdesc for an actual description). For example, if the image is captioned below it with the same information that the image conveys, you should include an empty alt text, otherwise the screen reader will read it out twice.

    If you are using an image to describe something, read the text through, replacing the image with its alt text. If it still makes sense, and you get the same information that the image conveyed in the first place from reading it like that, then you have done it right.

    For example - look at a bbc news article. Nearly every news article has an associated picture. A lot of the time, the picture isn't part of the content of the story - it is just a decorative image of maybe the person or scene involved in the story. However, even with this, I wouldn't argue that it should be a CSS background image - it is part of the content, but it doesn't convey any information. I would use an <img> tag with an empty alt attribute for that.

    As for title, I would tend to use that for conveying some extra useful (but not essential) information - it appears in the tooltip when you hover over an image, obviously. Generally though, like it says, the title of the image

  21. #21
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As Stomme Poes, I rather use image replacement on headers than actual <img> elements, but for the client's logo I'd like to make an exception.
    Some browsers don't print background images by default, so that would mean that were I to use an <img> as the company's logo, on the printed page the logo would never show up.
    Even though I'd rather use image replacement from a purist's point of view, it's IMHO not a practical solution for that situation.

  22. #22
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, from what I've read online, it would be better to have alt filled up as someone which i forgot who explained to me before that google has another spider which is specifically used to crawl images and how often does the spider crawls? they say 6 months. So according to the latest google update, my site hasn't changed at all interms of PageRank. Since I never wrote anything in those alt tags my site is considered empty ( correct me if I'm wrong ). Okay if you guys have no idea what I'm talking about visit The Best Wallpapers and correct me if I'm wrong from there. Should I add alt tags alone or should I add more text contents in my site?

  23. #23
    SitePoint Enthusiast atsa's Avatar
    Join Date
    Aug 2008
    Location
    INDIA
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want a w3c validated page than its necessary to give alt attribute to the images. It will also help in accessibility of website.

  24. #24
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,893
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rabbitsfeat View Post
    After all I guess you're right. When I finally get the copy for these pages that should give the information rather than putting anything in the alt attributes of these decorative images. You're right they just add to the asthetics.

    Should I just not bother at all then or put alt="" for these images?

    Incidentally, and I may be being dumb here but how do you actually add an alt attribute to an image being applied to a page as a background image, i.e.

    Code:
    .sectionAbout #masthead {
    		background: url(images/masthead-wolves.jpg);
    		}
    Thanks for all your help on this.
    If you are setting the image as a background image, you can't (and don't need to) set alt text - it's assumed that if it's in the background, it's just decorative. It's only when you use an img element that you need to set alt text.

    What you might want to do is to add a title="..." to the div id="masthead", which will give a tooltip for anyone who hovers over the div, so you could put supplementary information about the picture there. Don't put any essential information there, though, because there's no affordance so most people won't hover over the image and get the tooltip - if you think it's important for people to see the extra blurb about the picture, you'd be better to include it in the text on the page.

  25. #25
    SitePoint Enthusiast atsa's Avatar
    Join Date
    Aug 2008
    Location
    INDIA
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah i agree. No need to give "alt" for backgrounds.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •