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
相关问题
- What is better practice use or for accessi
- Accessibility Custom Actions aren't announced
- Bug in GNOME's Java-Atk-Wrapper - how to disab
- Proper ARIA attribute for field/value pairs outsid
- How accessibility affect font sizes in iOS and And
相关文章
- Pronounce “DoIT” as “do it” for screen readers and
- Double tap doesn't click the parent view in ta
- What are the key components of web accessibility?
- Is there any callback or anything (any parameter i
- W3C document states
- Should I avoid javascript , jquery, flash, ajax, s
- How to notify the user of important events for a d
- is there any css validator with CSS3 and vendor sp
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, itsalt
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 innanealt
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 emptyalt
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:Here's good piece of advice, better put than I could
Remember that the
longdesc
attribute is supposed to be a link to further information, not text as some people missuse it.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.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