SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 48 of 48
  1. #26
    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 Stormrider View Post
    I would argue that 90% 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
    Well stated and I agree as well.

  2. #27
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stormrider View Post
    I would argue that 90% of alt attributes should be empty if done properly.
    If the alt attribute is empty then it doesn't answer the questions that the alt attribute is for "Why is this image here? What is its purpose in the page?".
    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="^$">

  3. #28
    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)
    OK then, take this page: http://news.bbc.co.uk/1/hi/sci/tech/7591050.stm

    The image of the 2 frogs at the top. Would you have that as a css background image then? If not, what would the alt text be, considering it isn't important to understanding the story (it's just a decorative image related to the story) and that it has the caption underneath which will be read out by a screen reader anyway?

    As far as I'm concerned, that picture has no text alternative.

  4. #29
    SitePoint Zealot Bannaz's Avatar
    Join Date
    Apr 2002
    Location
    United Kingdom
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, add the alt and title tags. It all helps with SEO.
    Bannaz - Flash Banner Design
    █ Leading designers in online advertising.
    www.bannaz.com

  5. #30
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stormrider View Post
    OK then, take this page: http://news.bbc.co.uk/1/hi/sci/tech/7591050.stm

    The image of the 2 frogs at the top. Would you have that as a css background image then? If not, what would the alt text be, considering it isn't important to understanding the story (it's just a decorative image related to the story) and that it has the caption underneath which will be read out by a screen reader anyway?

    As far as I'm concerned, that picture has no text alternative.
    So as far as you are concerned the reason for including that image is that there is no reason for including that image in the page. Why then is it there at all? What information is the image there to convey - if it is decorative it should be in the background, if it is there for a reason the alt text should specify the reason, if there is no reason then it shouldn't be there at all so not only should the alt attribute be empty but the img element should be deleted.
    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="^$">

  6. #31
    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)
    Not all decorative images should be in the background. Even the w3c say you should leave the alt attribute empty when appropriate.

    The reason for including the image is so that people can relate to the story, so it is there for a reason, and related to the content.

    So what alt text should it have?

  7. #32
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay what if my site consists of only images? If you need to have a look. Should I add alt tags + text contents? Or alt tags would be sufficient?

  8. #33
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    These images are purely decorative and should be background images, in my opinion.
    That's what I was thinking.

    Here's what I usually do.
    Code:
    body h1
    {
      background: transparent url("header.png") scroll no-repeat 0 0;
      height: 100px;
      margin: 0;
      padding: 0;
    }
    body h1 a
    {
      display: block;
      height: 100px;
      text-decoration: none; /* Firefox required */
    }
    body h1 a span
    {
      visibility: hidden;
    }
    Code:
    <h1>
      <a href="/">
        <span>Site Title</span>
      </a>
    </h1>

  9. #34
    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)
    Quote Originally Posted by fr3akeeee View Post
    Okay what if my site consists of only images? If you need to have a look. Should I add alt tags + text contents? Or alt tags would be sufficient?
    In an example such as yours, where the entire purpose of the site is viewing images, and the images ARE the content - the meaning is lost if you can't see them - I'm not sure there is a lot you can do. There isn't really an alternative to viewing the image on a website that is all about viewing images. I would leave the alt text blank in this case, but I might be corrected by someone else!

  10. #35
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by felgall View Post
    If the alt attribute is empty then it doesn't answer the questions that the alt attribute is for "Why is this image here? What is its purpose in the page?".
    If the alt attribute is empty, it answers the question very clearly - the image is decorative and is not essential to the content or function of the page.

  11. #36
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by felgall View Post
    So as far as you are concerned the reason for including that image is that there is no reason for including that image in the page. Why then is it there at all? What information is the image there to convey - if it is decorative it should be in the background, if it is there for a reason the alt text should specify the reason, if there is no reason then it shouldn't be there at all so not only should the alt attribute be empty but the img element should be deleted.
    You can split "decorative" images into two groups - illustrative, such as those that accompany an article, and aesthetic, those that are used for design purposes.

    Aesthetic images should be in the background - that's what they usually are, background.

    Illustrative images aren't so easy to put in the background - you don't want them in the background, because they aren't, they are foreground - so it makes more sense to use an img element - you can then set a title attribute to give supplementary information as well.

    But just because they are foreground, doesn't mean they are an essential part of the page - if the page makes just as much sense without them, they don't need to be alt-ed.

  12. #37
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by fr3akeeee View Post
    Okay what if my site consists of only images? If you need to have a look. Should I add alt tags + text contents? Or alt tags would be sufficient?
    In picture galleries, I've always held that the images are an essential part of the content, so it makes sense to give them meaningful alt text. This way, anyone who is browsing with images turned off, eg because of a slow connection or to reduce bandwidth on a PAYG mobile device, can see from the alt text what the picture is of and decide whether to download it on a picture-by-picture case.

    It's also better for SEO

  13. #38
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by StormRider
    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 definitely put it in the background, except-- the page is dynamic, and it's damn difficult to add images to CSS (so I'm guessing they'd have to be using .before and .after or whatnot, which don't work with IE6)... and that that's the reason for them sitting in the HTML. For the same reason, we have photos of houses with no alt text on our site. Homeowners and real estate agents load all the home info in an XML file and it gets splattered onto our pages. I can't personally go through thousands of house photos and add alt text. There is no reasonable way to make those photos background images.

    Quote Originally Posted by Steve
    But just because they are foreground, doesn't mean they are an essential part of the page - if the page makes just as much sense without them, they don't need to be alt-ed.
    If my page makes sense without them, then the image is doing what Javascript does-- enhancing the page's content for those users who can use it. Therefore, for me, it's an extra. I don't like sticking extras in my HTML.

    Quote Originally Posted by Steve
    This way, anyone who is browsing with images turned off, eg because of a slow connection or to reduce bandwidth on a PAYG mobile device, can see from the alt text what the picture is of and decide whether to download it on a picture-by-picture case.
    This gets harder if the gallery is made up of, um, "modern art". You know, that stuff you can't tell what it is or what it means?

  14. #39
    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)
    Quote Originally Posted by Stomme poes View Post
    I would definitely put it in the background, except-- the page is dynamic, and it's damn difficult to add images to CSS (so I'm guessing they'd have to be using .before and .after or whatnot, which don't work with IE6)... and that that's the reason for them sitting in the HTML. For the same reason, we have photos of houses with no alt text on our site. Homeowners and real estate agents load all the home info in an XML file and it gets splattered onto our pages. I can't personally go through thousands of house photos and add alt text. There is no reasonable way to make those photos background images.
    Afraid I agree with Stevie here. There is a definite difference between illustrative and aesthetic images. The image in the example IS related to the content (it isn't part of the sites design) and should be an img tag, but it doesn't convey any information that can't be gained from the text/caption, so the alt text should be empty.

  15. #40
    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)
    The W3C say it best in their HTML5 sepcs:

    The most general rule for writing alternative text is that the intent is that replacing every image with the text of its alt attribute not change the meaning of the page.
    See here for a thoroughly detailed explaination: http://www.w3.org/html/wg/html5/#the-img

  16. #41
    SitePoint Evangelist
    Join Date
    Nov 2002
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually put both title and alt attributes on most images.

  17. #42
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by asp-hosting.ca View Post
    I usually put both title and alt attributes on most images.

    Adding a title to each image is required if you want all browsers to work the same way. If you don't then a bug in IE will copy the alt attribute into the missing title attribute. By supplying a title attribute (even if you leave it empty where you don't need title text) you correct for that bug.
    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="^$">

  18. #43
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Header: This is the top part of a Web document. You can usually find the title of the page and the URL here.
    Title bar: This contains the title that the Web designer named the page.
    Toolbar: This is where you find the buttons to navigate the Web. In your browser you can change the page you will get when clicking on the home button.
    URL or Location: This is where the Web address for the page you are viewing will appear. This information is vital if you plan to cite Web documents in your papers.
    Body: This is were the text or content of a Web page will be found.
    Footer: This usually contains information about the page author or the sponsor. You may also find, that the last time the page was updated here.
    you can search on google.
    -------------------------
    Jenilopez

  19. #44
    SitePoint Guru cyjetsu's Avatar
    Join Date
    May 2008
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always just have layout images such as headers, panels, logos etc as background-images in css for divs', then the html still validates no problem and I don't have to write lots of alt tags that I don't think give much benifit.

  20. #45
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Australia
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I only use the title tag if "The function of the image canot be adequately described with just the alt tag". Alt attribute should always be present, however if the image is decorative (say a graphic for LI items) the alt attribute should be empty (alt="").

    Adding alt values to everything on the page is essential, and those values alone are good enough for SEO purposes usually. Title comes in handy for altering the tooltip for the image mainly.

  21. #46
    SitePoint Guru cyjetsu's Avatar
    Join Date
    May 2008
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you saying instead of having divs with css background images for layout images, it would be better for SEO to have more images in the html with alt tags such as = "header" and "panel"?

  22. #47
    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)
    No, layout images should be in the css. Images used for an LI should also be in the css. Any image relating to the content (even if it is just decorative) I think should be an img.

  23. #48
    SitePoint Member onemilliondollar's Avatar
    Join Date
    Sep 2008
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i always put alt and title for image except the background. i think the alt and title will help in SEO.


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
  •