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:

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

 

 

 

---