SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Any need for both in this scenario (title and alt attributes)

    Hi,

    Is there any point in having the title attribute on the link in this case...?

    Basically linking to the larger version of an image.

    Code HTML4Strict:
    <a href="images/puppies_large.jpg" title="Some puppies"><img src="images/puppies_small.jpg" alt="Some puppies"></a>

    To me it seems overkill and would surely be annoying for anyone using a screenreader?

    A designer I work with keeps insisting on both so that when people hover over the image it tells you what it is no matter what browser but that isn't the purpose of either attributes is it!

    Any insight would be welcomed

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Having 'duplicated' alt and title attributes on a picture is just wrong and it is completely pointless. The title in this instance is attached to a link not an image so should provide additional information regarding the link not the image. Whereas the alt is supposed to be only viewable if the image is unavailable.

  3. #3
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    Having 'duplicated' alt and title attributes on a picture is just wrong and it is completely pointless.
    Disagree.

    First, both attributes should be on the img, not on the href. The alt attribute is what the browser displays if the image can't be loaded. The title attribute is what the browser displays as a tooltip popup when you hover on the image. Each has its own purpose.

    In this case, "Some puppies" as the tooltip is, indeed, pointless, since the site visitor doesn't need to be told what the image is when he hovers his mouse on it - he can see it! In this case, a more sensible title attribute might be "Open large image" - that would tell the visitor what will happen if he clicks on the small image.

    If you don't want any tooltip at all, use title="". Don't just leave the attribute out, because IE, contrary to standards, will then use the alt attribute for the tooltip, which is certainly NOT what you want.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Tell people in plain text elsewhere that clicking the thumbnail goes to a larger version.

    I would argue the alt text there should say the purpose of the link, not the "text" of the picture, unless it's a gallery? Because when you have
    <a href="somewhere"><img.../></a>
    the image is taking the place of what WOULD have been anchor text. (if it's a gallery then I guess it would need to say "larger version of this picture of puppies" and alt text on the large version just whatever's appropriate to that image)

    In this case, a more sensible title attribute might be "Open large image" - that would tell the visitor what will happen if he clicks on the small image.
    Quite evil to kinda give the finger to those who aren't using a mouse. With the explosion of mobile browsing this is just getting worse. Everyone should be told clicking on the image brings you to the large one.

    Of course, browser vendors *could* make title accessible to non-mousers, but for whatever reason, they choose not to. So WE the developers are stuck fixing this. Which sucks balls.

    If you don't want any tooltip at all, use title="". Don't just leave the attribute out, because IE, contrary to standards, will then use the alt attribute for the tooltip, which is certainly NOT what you want.
    Sometimes I do this, but more often I've discovered regular IE users are expecting that tooltip... some people even use it to orient themselves. So many times I just leave it. People like their bugs.

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I use it I would always use the title attribute (on the link... didn't realise you could add the title attribute to an img!) to give the user extra information about where the link is destined.

    One of the reasons I brought this up is, as I mentioned, the designer I work with seems insistent on adding both with identical content to images purely so that the tooltip appears across browsers. I knew this was incorrect I just wanted your opinions, which have really helped.

    Here is the page I was talking about in this instance (extra titles removed.. oh and warning, there are boobies)

    Would you change anything?

  6. #6
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've still got a cross-browser inconsistency.

    First, I need to correct something I said earlier. If there's no "title" attribute, IE7 (and earlier) uses the "alt" attribute as the popup tooltip. Later versions finally fixed this (mirabile dictu).

    So, on your page, hovering the mouse on the thumbnails yields no popup tooltip, except in IE7. There, you get the contents of the "alt" attribute as the tooltip.

    For true cross-browser consistency, if you don't want a popup tooltip at all, use title="" on every img.

  7. #7
    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 mikeebee8 View Post
    If I use it I would always use the title attribute (on the link... didn't realise you could add the title attribute to an img!) to give the user extra information about where the link is destined.
    You can add a title to any displayed HTML element, and it will give the title text as a tooltip on :hover.

  8. #8
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the input guys


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
  •