SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ALT and TITLE on image navigation link

    Hi,

    I have been given a navigation bar in graphic form that I need to use for a web site.

    I have placed it in an unordered list, positioned with CSS, however not sure what to write for the ALT and TITLE attributes and if I need to do anything special because I assume Screen Readers will not pick these up as hyperlinks.

    For example, I have:
    HTML Code:
    <li><a href="#"><img src="images/nav_company_link.jpg" height="10" width="59" alt="" title="Company Profile" /></a></li>
    Would that be the correct way of doing it? Or should the <a href=""> also have a title attribute?


    Many thanks for any suggestions.

  2. #2
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You must always include the text in the ALT attribute. The TITLE attribute is only for tooltips, and usually isn't read by screen readers. It doesn't have much (if any) significance in terms of SEO, and should not be included unless you actually need it. You code should therefore be:
    Code html4strict:
    <li><a href="http://www.example.com/"><img src="images/company-profile.png" width="59" height="10" alt="Company Profile"></a></li>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aaah, so I had them the wrong way around
    Nice!

    Thanks for the help.

    I guess this applies with all images, do they really need 'titles'?

  4. #4
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    The TITLE attribute is rarely needed for images. In fact, I can't think of any instances on a normal webpage where it would be relevant.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool.

    So just so I got this right, if the image is just text 'Company Profile' would be good.

    But if the image was the exterior of a building, just say 'Exterior of Company Offices' in the ALT?

    And the title attribute for <a href> would be 'View our Company Profile', or something like that?


    Thanks again for your patience, these really are the basics hehe.

  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 invision2 View Post
    But if the image was the exterior of a building, just say 'Exterior of Company Offices' in the ALT?
    It's very doubtful that this would ever be a useful text equivalent. At least I find it difficult to imagine a scenario where the text 'Exterior of Company Offices' would make sense.

    An ALT text isn't a description of the image; it's the text equivalent. It should provide the same information as the image conveys (as far as that is possible). That means the ALT text is highly dependent on the context; there isn't an ALT text that can always be used for a particular image, because the image conveys different information in different contexts.

    If the photo of the exterior of the company offices is just a decorative layout element, then it should have alt="". If the photo is used to show the location as a help for visitors, the ALT text could be 'our office is located between James Park and the canal', etc.
    Birnam wood is come to Dunsinane

  7. #7
    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)
    There is a better way of doing this. Remove the image, use plain text, then stick an empty SPAN element after the text (if you need to support Mac-IE, then an empty EM will do the trick as well) and position it.

    Here's an example I made for Ethics earlier this year: http://www.dan-schulz.com/for-others.../template.html (it even handles image hovers as well).

  8. #8
    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)
    One reason for including title="" in your image tags is to correct a bug in Internet Explorer. IE will copy the alt attribute to the title attribute if no title attribute is supplied so if you don't want it to mess up the page like that you need an empty title attribute to stop it occuring.
    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="^$">

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks!

    Brilliant AC, much clearer. All about the context and picture content.

    Dan, so place the img as a background-image in a span or div? Would this make more sense than using a blank 'alt'.

    Will add blank 'title' atts to my image tags

    Thanks for your time and contributions guys.

  10. #10
    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)
    If you use my method, go with a span. Note that I move the background position of the image around depending on what part of the menu it's showing at any given time - this cuts down on the number of HTTP requests which in turn can dramatically improve page download times and reduce latency as well.

  11. #11
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds brilliant, reducing download times sounds very cool.

    I don't suppose you could perhaps show me some 'real world' examples where you've used this and other usability/quicker page-loading styles.
    I'd love to see some of your commercial work to see how you construct sites, learn from the best

    If you wish I could PM you a link to the page I'm working on, perhaps you could give me a pointer or two on reducing download times.

    This SitePoint is a brilliant resource, part of my daily routine now


    Thanks!

  12. #12
    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)
    I would, but I'd have to violate more than a few NDAs to do so.

    As for PMing me, why don't you just post the link here as plain text? Just don't include the http and www. parts and it won't get parsed.

  13. #13
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, it's a bit of a tricky one, I'd rather not post it because it's not quite ready yet

    Thanks for the help so far anyways, I sent you a PM, but completely understand if you can't reply to it heh. Thanks again.


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
  •