Take the 2-minute tour ×

How to write good alt text for images to help screen reader and blind user to understand what is picture about ? and if we are using Alt text then what should be in a Title="text" if we are using both in special cases like menu images etc

share|improve this question

3 Answers 3

up vote 10 down vote accepted

You should not make the visually impaired user understand what the image is all about. For the blind, the image effectively doesn't exist, all that there is is the text.

The alt text should work as a single sentence/paragraph that can be replaced for the image, convey the same content and still make sense in the context of the adjacent content.

If the image is something that is part of the GUI, then the alt text should convey an action (a verb), line upvote, answer this or log out.

You should visit your site with links and try to understand your site. If there is for example a pie chart, its alt text should be a small summary of the percentages. If you just have a pretty flower next to a blog post, don't give it an innane alt text like flower image companion of blogpost #324 or even worse flower.jpg.

If the image is important to the navigation or to get information, try to give it an alt text that makes the site work without the image. If the image is only presentational, give it an empty alt text.

title, as far as I know, should only displayed when hovered, so they should give extra information to the image, so useless duplication of information should be avoided. For screen readers, this is a bit trickier, as support and configuration can be very different between users.

Some empirical data shows title as useless:

  • Most users of screen reading software do not change their default settings to access the TITLE attribute information on links.
  • Most screen reading software can access TITLE attribute content on form controls by default.
  • Some screen reading software cannot access TITLE attribute information.
  • Users of screen magnifiers can read TITLE attribute text at lower magnification levels.
  • Users of screen magnifiers cannot read TITLE attribute text, that contains more than 1 or 2 words, at higher magnification levels.

Here's good piece of advice, better put than I could


One good use of the title attribute is to add descriptive text to links, especially if the link text itself doesn’t clearly describe the link’s destination. This way you can help visitors know where the link will take them, possible saving them from loading a page only to find out it wasn’t anything they’re interested in. Another potential use is to provide additional information for an image, like maybe a date or other information that is likely not essential.

Remember that the longdesc attribute is supposed to be a link to further information, not text as some people missuse it.

share|improve this answer
If there is alt text the immage does exist. FOr example I can vote up and down on stackoverflow even though it's an immage not a link. –  Jared Nov 16 '09 at 13:19
@Jared: I'm trying to say that you should feel like the page was made with text only, and not that you are missing out anything with such things as <img src="my-image.gif" alt="my-image.gif"> or <img src="smiley.gif" alt="an image of a smiley"> that don't give you anything more than more text to hear. –  voyager Nov 16 '09 at 22:22

I'm a screen reader user and will use Stackoverflow as an example of both the good and bad.

Alt tags should be brief and descriptive. For example stackoverflow's alt tags for the vote up and vote down options are nice since they don't take long to read and get to the point quickly. Examples of bad alt tags are the make this question a favorite and accept this answer. Neither of the tags are descriptive, the favorite tag is just "*" and the accept the answer tag is "check" The only way for me to tell what they are is to read the source or have someone sighted let me know what they are for.

As far as title attributes go I don't really have much advice. My screen reader doesn't read them by default so I don't normally use them. An example of something that could be useful is additional information. For example the reason my accepted answer rate is so low is because I have no way of telling whether I have accepted an answer on a question. It would be nice if the title attribute on the accept this answer graphic would say something like "click to accept this answer" if the answer wasn't accepted and "Click to remove this answer as the accepted answer" if it is the accepted answer.

share|improve this answer
Thanks for ur reply –  Jitendra Vyas Nov 16 '09 at 12:58
+1 good first hand experience. –  alex May 2 '11 at 14:24

I think the best practise is to put same content in alt and title attributes.

Regarding 'what to write' - just simple, in few words what is on the picture.

Check this article where alt attributes are described pretty well: http://www.cs.tut.fi/~jkorpela/html/alt.html

share|improve this answer
First thing alt and title are attributes not Tag, second, If we will put same content in alt and title then screen reader will repeat same content twice. which makes no sense –  Jitendra Vyas Nov 16 '09 at 12:04
Fair point, attribute, not tag. Depends on the screen reader you use you can set which attribute to read anyway. –  rochal Nov 16 '09 at 12:15

Your Answer


