SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 70
  1. #1
    SitePoint Enthusiast Mounty's Avatar
    Join Date
    Mar 2008
    Location
    UK
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Can the alt attribute for an img tag be empty?

    I believe the img tag requires the alt attribute to validate the markup, but is alt allowed to be an empty string?

    My validation tool seems to think it's ok, but I always thought it was required incase the image was missing

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    It can be empty, but you should always try to provide alternative text unless you have a seriously good reason not to do so. Be warned that by excluding a complete alt tag, visually impaired users will be unable to know that you have a picture in that placement.

  3. #3
    SitePoint Enthusiast Mounty's Avatar
    Join Date
    Mar 2008
    Location
    UK
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok then fair enough


    cheers

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Usually an emtyp alt attribute indicates that the image is purely decorative and ought to be added by the CSS rather than the HTML. Those in the HTML are usually there to convey some information and that information would need to go in the alt attribute for those who don't see the image.
    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="^$">

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The alt attribute provides the text equivalent (alternative) for an image. In other words, it should convey the same information as the image does (in that context).

    If an image doesn't convey any relevant information in a particular context, the text equivalent should be empty. Thus, alt="".
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Be warned that by excluding a complete alt tag, visually impaired users will be unable to know that you have a picture in that placement
    They would know it's there if they have a screen reader. It'll say "graphic".

    On a current site I've found myself using alt="" quite a lot. The reason being, background images can't be floated, where the text wraps around it, but the images are definitely decoration. Are there any good tricks for moving these things into the CSS?

  7. #7
    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 Stomme poes View Post
    Are there any good tricks for moving these things into the CSS?
    Not really. You could have an empty floated div and set the image as a background on that, but what would be the point?
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In a nutshell, alt tags are not important for validation, however, they are very important for both accessibilty and SEO.

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please, people, it's an alt attribute, not an <alt> tag.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Please, people, it's an alt attribute, not an <alt> tag.
    LOL. Good point. Alt attribute was what I meant.

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My comment wasn't directed to you personally, Simon. Too many people use the same misnomer, even people who allegedly are professionals. It's as if a medical doctor would refer to the heart as a gland.
    Birnam wood is come to Dunsinane

  12. #12
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    It's as if a medical doctor would refer to the heart as a gland.
    Well mine swells and excreets stuff every second of every day!

    I know it is an attribute rather than "tag" but I was still half asleep when I wrote it

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    They would know it's there if they have a screen reader. It'll say "graphic".

    On a current site I've found myself using alt="" quite a lot. The reason being, background images can't be floated, where the text wraps around it, but the images are definitely decoration. Are there any good tricks for moving these things into the CSS?
    I use empty SPANs for that on the rare occasions I actually need to use them.

  14. #14
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Please, people, it's an alt attribute, not an <alt> tag.
    Hahaha, I swear it gets better everyday tommy.

    Examples of Attributes -
    Code HTML4Strict:
    Alt,align,abbr,cellpadding,cellspacing,height,id,label,href,onblur,onclick,onload,onmousedown,onmousemove,

    Good point though. It really is important to learn the differences because if we didn't what would be though point right?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  15. #15
    SitePoint Wizard bronze trophy devbanana's Avatar
    Join Date
    Apr 2006
    Location
    Pennsylvania
    Posts
    1,736
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    They would know it's there if they have a screen reader. It'll say "graphic".
    Not at all true if the alt attribute is empty. It will say nothing.
    Laudetur Iesus Christus!
    Christ's Little Flock
    Jesus is the Good Shepherd

  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)
    Quote Originally Posted by devbanana View Post
    Not at all true if the alt attribute is empty. It will say nothing.
    Yes, but the question was how screen readers handle an omitted (i.e., missing, not existing-but-empty) alt attribute.
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Wizard bronze trophy devbanana's Avatar
    Join Date
    Apr 2006
    Location
    Pennsylvania
    Posts
    1,736
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Yes, but the question was how screen readers handle an omitted (i.e., missing, not existing-but-empty) alt attribute.
    Same as if it is empty. I thought someone believed it would say something when encountering an image if it had an empty alt attribute. But whether it is empty or non-existent altogether, it will be as though the image is not there.
    Laudetur Iesus Christus!
    Christ's Little Flock
    Jesus is the Good Shepherd

  18. #18
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've heard a screen reader (may have been Window-Eyes, not sure) that would spell out the image URL (after saying the word 'image') in the absence of an alt attribute. That was a few years ago, though, so perhaps newer versions ignore it.
    Birnam wood is come to Dunsinane

  19. #19
    SitePoint Wizard bronze trophy devbanana's Avatar
    Join Date
    Apr 2006
    Location
    Pennsylvania
    Posts
    1,736
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    I've heard a screen reader (may have been Window-Eyes, not sure) that would spell out the image URL (after saying the word 'image') in the absence of an alt attribute. That was a few years ago, though, so perhaps newer versions ignore it.
    In JAWS (which is what I use), it has an option to do that, but by default it reads the alt attribute and ignores it otherwise.

    The only time it'll read the URL is if the image is within a link. But if someone neglected to put in an alt attribute, it is often the case that the image has a cryptic name as well, so it reveals no more information about the target of the link.

    For instance, on this page, the five links after the logo have no alt attributes, so I hear something like this:

    Link graphic ss/sapphiresteel_pagegfx_r2_c4 On mouse over
    Link graphic ss/sapphiresteel_pagegfx_r2_c5 On mouse over
    Link graphic ss/sapphiresteel_pagegfx_r2_c7 On mouse over
    Link graphic ss/sapphiresteel_pagegfx_r2_c9 On mouse over
    Link graphic ss/sapphiresteel_pagegfx_r2_c11 On mouse over
    Luckily, not all of their links are like that.
    Laudetur Iesus Christus!
    Christ's Little Flock
    Jesus is the Good Shepherd

  20. #20
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you should not empty

  21. #21
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is important for seo as well i believe

  22. #22
    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)
    Personally, I think the majority of alt attributes should end up being empty. Depends on the type of site you have, but a LOT of images are only used for decoration, even if they are related to the content, it's often just a photo to spice up the look of a page. It's actually fairly rare (again, depending on the site) for a photo to be a part of the content, I find. Even then, a lot of diagrams have a caption, which negates the use of alt text anyway (you wouldn't want a screen reader to read the same thing out twice...)

    A lot of people get 'text alternative' mixed up with 'description', and they are not the same thing.

    I would argue that the majority of alt attributes should be empty if they are being used properly.

  23. #23
    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 Mounty View Post
    I believe the img tag requires the alt attribute to validate the markup, but is alt allowed to be an empty string?

    My validation tool seems to think it's ok, but I always thought it was required incase the image was missing
    Yes, that is all absolutely true. Any <img> element must have an alt attribute, but it can be empty (ie alt="") if that's appropriate.

    If the image contains information that people would benefit from seeing, you need to put some meaningful text in - but if the image is purely decorative, or is simply an icon illustrating the adjacent text, it's best to leave it empty.

    What you have to ask yourself is - if you were browsing the page without images (whether because you can't see them, you have images turned off, or the image just doesn't load properly), would you want to know (a) that there was an image there, and (b) what was in the image? If not, it's fine to leave the attribute empty.

    http://reference.sitepoint.com/html/img/alt

  24. #24
    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 Stormrider View Post
    Personally, I think the majority of alt attributes should end up being empty.
    I agree.

    Quote Originally Posted by Stormrider View Post
    A lot of people get 'text alternative' mixed up with 'description', and they are not the same thing.
    Exactly!

    I would recommend those of you who are unsure about how to use the alt attribute to read Must I have an ALT attribute for every image? in the HTML FAQ. Compare the four different scenarios where a particular image is used, and note how very different the text equivalent is in each case.
    Birnam wood is come to Dunsinane

  25. #25
    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 Alzbeta View Post
    I think if it is being emptied, there should always an alternative for text for the benefits of the reader.
    What about images that are for decoration only?


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
  •