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 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

Answer 2

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

Use this to provide additional information that is not essential. Most visual browsers display title text as a tool tip when the element is hovered over, however it is up to the browser manufacturer to decide how the title text is rendered. Some will display the text in the status bar instead. Early versions of Safari did this, for instance.

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.

Answer 3

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 sited 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 weather 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.