How to write good alt text for images to help screen reader and blind user to understand what is picture about?

Question

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

Answer 1

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

Alt tags should be brief and descriptive. For example, Stack Overflow'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.

Answer 2

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