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