SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 40
  1. #1
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using "alt" versus "title" in an <img> tag. "alt" not work for Firefox 3

    I have always used

    <img alt="some video title" src="..." >

    and never checked whether it works on Firefox 2 or 3. But looks like it doesn't work on FF when we hover the mouse cursor over the image, and to make it work, we need to use

    <img title="some video title" src="..." >

    is it actually TRUE? since when did it happen, from HTML 3 to HTML 4? It seems weird why FF not support it at all and just disregard it. Many thanks.

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you expect it to be supported by FF?
    alt, by definition, is an alternative text when an image is not loaded. For example, when images are turned off.
    title is what browser displays in tooltip.
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  3. #3
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alex.w747 View Post
    How do you expect it to be supported by FF?
    alt, by definition, is an alternative text when an image is not loaded. For example, when images are turned off.
    title is what browser displays in tooltip.
    it is just that IE always show the ALT text as a tooltip as well...

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which is incorrect behavior. Firefox is correct. Never trust IE to do anything right.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2009
    Location
    Baton Rouge, LA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From an accessibility standpoint:
    Screen readers read out alt text by default, unless the user customizes the settings. So you would want to keep the alt attribute. I would only add title attribute in addition to alt when I have icons that are not self-explanatory to the sighted user, e.g. a small icon on a formatting toolbar. I just checked as I typed this post, and this is actually how the formatting icons above the text area on this forum work. No need to add title tag to a product photo in my opinion, unless it shows product ID or some other identifier that is of interest to the sighted user.
    "The browser is your first client" - Quote: Myself
    Please visit me at: vanillacloud.com

  6. #6
    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)
    To fix the Internet Explorer bug you need to always specify a title attribute alongside the mandatory alt attribute. If you don't then the bug means IE will copy the alt attribute (intended to be displayed when people can't see the image) into the title (which displays when you mouse over the field).
    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="^$">

  7. #7
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i was checking over the HTML 3.2 spec

    http://www.w3.org/TR/REC-html32#img

    and seems like "title" is not yet there. so maybe it is only an HTML 4 addition.

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2009
    Location
    Baton Rouge, LA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by winterheat View Post
    i was checking over the HTML 3.2 spec

    http://www.w3.org/TR/REC-html32#img

    and seems like "title" is not yet there. so maybe it is only an HTML 4 addition.
    What consequences does that have for using title attribute? When would you create a page with a HTML 3.2 DTD rather than HTML 4.01 DTD? Just trying to understand the implications of what you are saying.
    "The browser is your first client" - Quote: Myself
    Please visit me at: vanillacloud.com

  9. #9
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by melissapbr View Post
    What consequences does that have for using title attribute? When would you create a page with a HTML 3.2 DTD rather than HTML 4.01 DTD? Just trying to understand the implications of what you are saying.
    just that i was using "alt" all the time and wasn't aware of "title"... and googling gave the spec of "img" for HTML 3.2 and saw no title, so I was just wondering if title has become popular some time along the way.

  10. #10
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    found this and it may help

    http://www.456bereastreet.com/archiv...le_attributes/

    short summary:
    alt is required for validation, and is for when img is not viewable to user (for whatever reason, like graphics disabled or for visual impaired visitors).
    title is not required for validation, and is for tool tip.

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Sometimes it's ILLEGAL to not have an alt attribute specified. Something about it not being legal and your depriving disabled people...I don't remember the exacts on the law but my e-business teacher said it's required for some sites.

    Off Topic:

    Can anyone shed light?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Zealot
    Join Date
    Feb 2009
    Location
    Baton Rouge, LA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Sometimes it's ILLEGAL to not have an alt attribute specified. Something about it not being legal and your depriving disabled people...I don't remember the exacts on the law but my e-business teacher said it's required for some sites.

    Off Topic:

    Can anyone shed light?
    If you create websites or web applications (e.g. as a government contracting company) that are federally funded (plus a lot of state agencies also follow the law in their own policies, down to the local level), they have to be Section 508 compliant (the federal law that deals with equal access to information technology). You can read up about it at section508.gov. It's a variation of W3C accessibility guidelines (WCAG 2.0). Many web designers have to complete documentation stating compliance. That's the context of what I mentioned in my earlier post about the difference between title and alt attribute for screenreaders (your website has to be screenreader accessible under both WCAG and Section 508).
    Last edited by melissapbr; Mar 4, 2009 at 09:00.
    "The browser is your first client" - Quote: Myself
    Please visit me at: vanillacloud.com

  13. #13
    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)
    Providing alt tags is considered amongst the bare minimum any developer should do to make sure their site works for people with disabilities. It’s no longer seen as a best practice, more like a minimum requirement for web pages and I would not build a website for anyone that does not include alternative text on images. If the image does not require an explanation (which also means it does not belong as part of the content) then it should not be in the HTML, it should instead be part of the CSS as a background image. The reason for this is, if it is not important enough to have a description (so everyone knows the image exists) then it is a style element and does not belong as part of the structure), at least this is my opinion.

  14. #14
    SitePoint Zealot
    Join Date
    Feb 2009
    Location
    Baton Rouge, LA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Providing alt tags is considered amongst the bare minimum any developer should do to make sure their site works for people with disabilities. Itís no longer seen as a best practice, more like a minimum requirement for web pages and I would not build a website for anyone that does not include alternative text on images. If the image does not require an explanation (which also means it does not belong as part of the content) then it should not be in the HTML, it should instead be part of the CSS as a background image. The reason for this is, if it is not important enough to have a description (so everyone knows the image exists) then it is a style element and does not belong as part of the structure), at least this is my opinion.
    This would be an ideal solution, I agree that you cannot make a website without taking the alt attribute seriously. I just wanted to add to it that there are a lot of resources available that explain how to write good alt text (because a lot of people provide really bad alt text) - do you want to describe the image (like what's happening on a photo) or the function of the image (like an edit icon), maximum length of alt text, etc. Go to http://webaim.org/techniques/images/ if you are not familiar with creating good alt text.
    "The browser is your first client" - Quote: Myself
    Please visit me at: vanillacloud.com

  15. #15
    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)
    The best way to write your alt text is to write the text for the page without the image.and make sure that it makes complete sense. Your image then replaces a section of that text with a picture that provides that part of the information in a clearer way than the text does. The text that is replaced by the image is the alt description for those who can'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="^$">

  16. #16
    SitePoint Evangelist ferrari_chris's Avatar
    Join Date
    Mar 2008
    Location
    NP, New Zealand
    Posts
    576
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope the alt tag can hold 1000 words then, because that's what an image is worth textually...

  17. #17
    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 ferrari_chris View Post
    I hope the alt tag can hold 1000 words then, because that's what an image is worth textually...
    No it can only hold a short sentence. If you need 1000 words then a separate web page linked through the longdesc attribute is the way to do it.
    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. #18
    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)
    I think he was being sarcastic, but I thought it was very funny

  19. #19
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol Alt tag should not be a big paragraph rather should be most relevant to the image for which you are using. Keep it short and meaningful.
    Fully Managed Dedicated Server with 24/7/365 Live support.

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Logically it SHOULDN'T be a long paragraph. It is just a short text version for Lynx browsers and other browsers with images disabled. It should just describe what the image basically is.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    If the image does not require an explanation (which also means it does not belong as part of the content) then it should not be in the HTML, it should instead be part of the CSS as a background image.
    Exception, people uploading images. There's no way in the nine hells you are going to get realtors to actually write something they've never heard of (alt text? what's that?) and send it in with their home photos (and if you could, you know it would be 9 pages long and often IN ALL CAPS WITH BAD PUNCTUASHUN). And let's say you have hundreds of realtors uploading photos of thousands of houses.
    We have been forced to use alt="" as the images canNOT be CSS backgrounds. They are content BUT they seriously cannot have alt text (not until someone writes a robot that can look at an image and write a decent description lawlz).

    Of course, knowing my coder he has either removed the alt attribute altogether, or left it as I had it in my examples, which were alt="huisfoto" (not what it should be, but what I stuck in there as an example).

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Alt attributes are required to validate, but unless it is some sort of gov't website they are not required to use alt tags unless the information is vital and the equal information act, or whatever that act is called.

    Personally noone's going to always get this right. Some cheat by using empty alt attributes to validate. I personally was guilty of that until I decided to lynx my site up and fix all the alts missing.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Some cheat by using empty alt attributes to validate.
    It's not always "cheating". Sometimes something is HTML, but doesn't really have anything to say (it's not quite the same as decoration). It is indeed then appropriate to have alt="".

    I don't know that my example counts as appropriate or cheating, though. But I seriously can't think of a way to get any meaningful text (in multiple languages!) in there. Oh yeah, I forgot, the realtors in my above instance would also need to provide the alt text in at least 7 different languages. Lawlz.

    Offtopic:
    It's not a tag.

  24. #24
    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 Stomme poes View Post
    Exception, people uploading images. There's no way in the nine hells you are going to get realtors to actually write something they've never heard of
    On the upload control you could simply add a text box and put "Image Description", it would at least start encouraging people to add something in the alternative text, even if itís not totally descriptive, or you could have the upload control check the photo meta data for a description (some modern cameras / cell phones allow you to add stuff like geo-data, a label (description) and other stuff). Small stuff like that would help boost the alt tag usage.

  25. #25
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    You surely don't want a bunch of coordinates or EXIF data in your alt text!
    On the upload control you could simply add a text box and put "Image Description", it would at least start encouraging people to add something in the alternative text, even if it’s not totally descriptive...
    I had thought though of something like "description" in the form where the realtors upload the picture... but these people can't write to save their lives. They would stuff their house's keywords in there and generally destroy any worth of the attribute at all. AND IN ALL CAPS (which we were going to filter out but then placenames and other proper nouns looked retarded...). Sure, there'd be text there... but not useful text.

    alt="BALCON, VERANDA, OP STRAND prachtige villa in torrevieja spanje"
    alt="BALCON, VERANDA, OP STRAND prachtige villa in torrevieja spanje"
    alt="BALCON, VERANDA, OP STRAND prachtige villa in torrevieja spanje"
    alt="steengebouwd prachtige villa chalet vakantie TORREVIEJA SPANJE paardenrijden"

    Or better:
    alt="een huis op een grasachtige huevel op een zonnige dag"
    (a house on a grass hill on a sunny day) as people will take that literally "describe the image". We actually don't want a description, but a replacement. I'm not sure if there really IS a replacement here.

    example page <-- a shell basis for my colleague to pump into his template, not the live site. The images in the scroller are the examples. The text below has been beautified by me because it was my example, but usually it's pretty poor copy. : )

    Ultimately I thought, these are photos of a house on the description page... all the information about the house is on that page (so there's nothing conveyed in the photos that the realtor hasn't actually put into words somewhere else on the page), and on that page the photos are all in a scroller. So it's a list (I should have actually made it a list but too late, it's just a bunch of anchors) of photos. People who can see care what the house looks like, for looks sake. And most of the photos posted are not to show house features, but to look beautiful so people book/buy them (same page on a selling page as well).

    On the page with nothing but photos, I haven't decided, but currently it's also just alt="" (if my colleague left that in). There is no other content on that page, but if you're image-disabled why are you going to the photos page?


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
  •