Why does alt-text not show up in Firefox, Chrome or Safari?

I recently installed Firefox, but every time I previewed my website, hovering over the images produced no ‘alt text’.  It worked fine in Internet Explorer so why not Firefox?  Was something wrong with it?

It turns out the opposite is true, it is Internet Explorer that’s wrong for showing alt text in the first place.  Alt text is text information equivalent to the image’s content or function. It may be used when a human or a robot may want to use text instead of an image, or for people who view pages in text-only mode, or who are blind or visually impaired and use screen readers or for people who just turn off images. The alt-tag is an alternative for that image, hence the name.

 


Let’s see an example using my company logo:

Worcestershire Web Design - quality, affordable websites

The code for this is:

<img src=”http://worcestershirewebdesign.co.uk/blah…/blah…jpg” alt=”Worcestershire Web Design – quality, affordable websites” />

(I’m using xhtml in this example, but html works the same)

If you hover over this image in Firefox, Safari or Chrome, no alt-text appears, but switch over to Internet Explorer and the alt “Worcestershire Web Design – quality, affordable websites” appears.  Why? read on…

 


So what should ‘alt-text’ look like anyway?

Using the above example with my browser’s images turned off and as you can see, the ‘alt‘ text is displayed where the image would have been if I hadn’t have turned it off.

 


So how do I get the alt-text to appear in Firefox?

Apart from turning your images off, you don’t – you use a ‘title-tag’ instead.  Title-tags are the correct way to get text information to appear on screen when hovering over an image with your cursor, not alt-tags.  Title-tags are coded in the same way as alt-tags, but you just change the word ‘alt’ to ‘title’.

Using the same example as before:

The code for this now is:

<img src=”http://worcestershirewebdesign.co.uk/blah…/blah…jpg” title=”this is an example use of title text” />

If you hover over this image in Firefox now, the words “this is an example use of title text” appears.

 


So which tag is correct, ‘alt’ or ‘title’?

Actually, you should be using both just be aware of the different uses.

  • Alt text: shown in place of an image to give people the equivalent of what the picture was, taking into account if the image has content or has a function (a photo of a horse shows content, a link-button image has function)
  • Title text: shown to give an image, text or link some title text

Using the same piece of code again but this time with both alt and title tags:

<img src=”http://worcestershirewebdesign.co.uk/blah…/blah…jpg” alt=”Worcestershire Web Design – quality, affordable websites” title=”this is an example of title text”/>

 


Are there any other uses for title text?

Plenty. Try hovering over this word: here.

Now try hovering over this link: www.worcestershirewebdesign.co.uk.

The simple code used for getting title text to appear over a word is:

<p title=”Use title text on words”>here</p>

and again for a link:

<a href=“http://www.worcestershirewebdesign.co.uk” target=“_blank” title=”Or you can use title text over links>www.worcestershirewebdesign.co.uk </a>

 

Many thanks to Florent V. for correcting some errors that were originally on this page.

 


Related information and links.

There is an excellent article on the appropriate use of alternative text at WebAIM.org which goes into much more detail. Definitely worth a look.

Not using Firefox yet?  download the latest version for free at http://www.mozilla.com/en-US/firefox/

Latest W3Schools figures show 47.5% of people now use Firefox http://www.w3schools.com/browsers/browsers_stats.asp

Figures from other sites show different statistics on browser usage so you may also want to check out: http://gs.statcounter.com/

 

 

I hope you found this information useful and I welcome your comments.

If you have any specific questions related to website development, please email me or post a comment.

 

Worcestershire Web Designer

 

 

 


Bookmark and Share

28 Responses to “Why does alt-text not show up in Firefox, Chrome or Safari?”

  1. James says:

    Useful post even after years of web development. From the blog,

    website design essex.

  2. Kate Jones says:

    Internet Explorer is not wrong to show tags. Do I detect anti-Microsoft bias here? The alt-tags are very helpful in giving added info about the image and its link. So thank you immensely for the “title” fix. Just what I was needing to keep up the functions of my site on the other browsers. I’ll add a link to you in my Web tools references. Jolly good work!

  3. JimJ says:

    OH! When I used to use IE (some years ago now!) I always wondered what the point of the alt text popping up was. Then, changing to Firefox, I had to wonder why it wasn’t popping up anymore! Turns out I’m not just crazy – IE is wrong! Thanks for clearing that up for me..

  4. Alexandra says:

    Thank you for the info on alt tags… I use Blogger and I thought there was a problem with the platform I am using but you have shown a simple fix.

  5. Victor says:

    “The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

    The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).”

    — w3schools.com

  6. nice tips you have listed on your post.

  7. the webguru says:

    As a site developer I can say that your page was pretty helpful. Thanks for the insights.

  8. Florent V. says:

    There is a mistake you may want to correct in this article:

    “latest W3C figures show 45.5% of people now use Firefox [link to W3Schools]”

    - W3C does not track browser usage. The website you’re linking to is W3Schools, which is unassociated with W3C.
    - And the page you’re linking to has text saying: “this is just data for our website, which is tech-oriented, so it doesn’t reflect the general market”.

    For more accurate browser usage data, you may want to take a look at Net Applications, Statcounter Global Stats, and AT Internet Institute. Gemium has interesting information for Eastern Europe, too.

    • Florent, I’ve changed the reference to W3Schools instead of W3C. The W3Schools page does state:

      “The statistics above are extracted from W3Schools’ log-files, but we are also monitoring other sources around the Internet to assure the quality of these figures”

      - but I take your point and I’ve included the link to Statcounter.

      Thank you for your other comments, I’ve amended the post so it should now be more accurate and I’ve included the link to WebAIM.org website.

  9. Santi says:

    Thanks for the information, very useful.

  10. nintendost says:

    Article very interesting, I will necessarily add it in the selected works and I will visit this site

  11. plutopants says:

    Sorry, this does not seem to work in my Firefox (3.5.2). I use both ALT & TITLE tags but FF has given up for some reason. Just a small rectangle appears in FF when I mouseover your logo above.

  12. I really like your post. Does it copyright protected?

    • yes, but you can link directly to this post, or rewrite it in your own style – a link back would be appreciated, though.

      I don’t mind you taking a small extract from the post but if you were to copy it all, Search Engines would tend to look on your page as duplicate content and give it a lower ranking than if you were to re-write the post yourself.

      • anthony says:

        Hello: I am having difficulties in getting my images to display on my webpage and was wondering if you can provide some assistance. I have been to many forums and no one has a solution to my problem. The alt image is displaying in my browser but not the image. the images can clearly been seen in internet explorer,but when put in preview in my browser, only the alt information and the box where the image should be displays but no image is there. I read details of your site of how to structure the alt tag along with the title tag and I have tried turning my browser pic both on and of but no luck in getting my image to appear. The alt text keeps showing up, no image appears. I do not know what is wrong. I do not have a website address as of yet that will allow you to see what I am experiencing, but it is the same as the example you have showed with your company name in the alt tag text. my email adress is tany23f@hotmail.com

        • anthony says:

          sorry guys I mean the images can clear be seen in my editor but not my browser. The alt tag text shows up but no images. I have tried as mentioned above in turning my browser image on and off but no luck.
          tany23f@hotmail.com

          • anthony says:

            I am not sure if the path as to how I add my images to my folder list in my editor is playing a role in the images not displaying in IE. what I am doing is, taking the images from my desktop by selecting file, then import the file.This then brings it to my folder in my editor program and from there I drag and drop the image to my desired location. Still only the alt tag displays with no image. suggestions are greatly appreciated.

          • anthony says:

            While I was waiting a response for what is going on with my images not showing, I noticed that one file of images which I have in my folder list in my editor program displays both in the browser. I have a second file which I added to my folder in my editor that came from my desktop, when I click and drag an image from this second folder list to my desired location on my page, the image only displays in my editor and not in my browser, only the alt tag information displays along with the box where the image should be. I am not sure what is going on. like I mentioned earlier, images from my first file shows in both my editor and browser but images from my second file that are added to my page only displays in my editor and not in the browser- only the alt information shows.

  13. JaneRadriges says:

    The article is ver good. Write please more

  14. deneme says:

    Thanks for article. Everytime like to read you.

  15. Hobosic says:

    Hi, Thanks for article. Everytime like to read you.
    Hobosic

  16. Arianacouh says:

    Good work! Thank you very much! I always wanted to write in my blog something like that. Can I take part of your post to my blog? Of course, I will add backlink?

  17. mark says:

    Great site, Good info

  18. Assenonus says:

    Great site this worcestershirewebdesign.co.uk and I am really pleased to see you have what I am actually looking for here and this this post is exactly what I am interested in. I shall be pleased to become a regular visitor :)

Leave a Reply

*

Dansette