Jump to content

Notes on using alt attributes


LSW

Recommended Posts

The following points were written originally to pull my thoughts together for a accessibility briefing on the status of web sites belonging to the state of Alaska, I thought I would add them here for you to read as well.

 

As usual they are mirrored under LSW: Notes on the alt attribute

 

--------------------------------------------------------------------------------

 

The issue here is as follows:

  • Alt stands for Alternative text. This means a text alternative to the information held or represented by an image. The popular misconception is that you need describe the image or say what the image is. This is not quite the point. The text is meant as an alternative to inform the user of any info they may be missing. If the image has no informative value it need not have alt text.
  • The alt attribute however is required on every image. If there is no information to be shared, it may be left blank, alt="".
  • If an image has information like a "Pie chart" you would wish to offer the same info as an alt attribute. You would textually show the same info, you can decide if the fact that the image is a pie chart is of importance or not. If not, then simply add the % shown. alt="Jueau: Rainfall 70%, Cloudy 20%, Sunshine 10%". You would not describe the image as in alt="3D pie chart using the colors red, yellow and green. Green being sunny days, red rain and yellow cloudy..."
  • Do not use alt text for decorative images. Common is alt="bottom right corner". Although correct, this has no informative value as it pertains only to the look of the site for visual users. In these cases having a screen reader notify the user during the flow of the information that it has reached an image representing the bottom right corner is of no importance and adds to the general "noise." By leaving the alt in place but empty, the screen reader will skip the image and the user will either not know an image is present or will understand that the image is of no real value and they are missing nothing.
  • By default, the screen reader will read the name of the image if an alt text is not available. The user would hear "image snodgrass-sen-center.jpg." This of course has no value to them. By adding the alt attribute it will either ignore the image or read the alt text given.
  • For the above image a correct alt attribute would be to describe the information in the image... not the image itself. In this case alt="Commissioner Snuffy Smith and Director Gomer Pile visit with seniors at the Snodgrass Senior Center on Wednesday, May 23, 2007.", no description of the surroundings or even in what position the officials are standing in is given as it is of no value for the visually impaired.
  • Again the same image, if the image does however have a caption, in this case you would not want a caption and an alt text as this would result in the screen reader reading both and the information is doubled. You do not want the alt alone as the visual user will not have access to it. However the caption, due to it's positioning would be clear enough to a screen reader user that the two belong together. So in the case of captions, as there are no HTML elements to deal with captions, it is justified to leave the alt attribute blank as the caption text already describes the information of the image and you would leave the left and right specifications in place for the visual users to identify which person fits which name and title.

 

So in closing, it is imperative that all images regardless are given a alt attribute, alt text should only be used if the image portraits important information. If the image is purely decorative the alt attribute is left empty and in the case of images with captions the alt attribute should be left empty.

 

In her article "Reviving Anorexic Web Writing" Amber Simmons makes a very good point about how alt text can make even decorative images more interesting and give an emotional alternative meaning to the vision impaired.

Thoughtfully constructed alt text is valuable because it provides emotional content; it should make the reader feel something. Given a photograph of the University of Texas tower, for example, simple alt text that says, "UT tower" might not be terribly useful to someone who has never seen the tower, though it may be useful to someone who knows what the tower looks like. But alt text that says, "Evening view of UT tower aglow after a big Texas win" is better, because it is meaningful to anyone, sighted or not - it projects pride, kinship, tradition. It conveys very particular emotions using revealing language. - Amber Simmons

The "longdesc" is the big brother of the alt attribute. It stands for "Long description." The specs do not limit the length of the alt attribute. Usually the alt attribute is kept fairly short. Longdesc in unlimited, rule of thumb is that it would be more sentences. The issue here is the opinion of many in the community that if an image is of such importance and complexity to need a long description, then the content deserves a page itself or a description directly in the content of the original page with the image as a visual aid to the textual information. For years longdesc was not widely supported by user agents, I have heard comments suggesting it is still not well supported and from others that it is widely supported now. The longdesc is added as an attribute with the alt attribute and links to a separate file with the description.


 

I discovered a interesting use for the "Longdesc" attribute in the Section508.gov FAQ :

For pictures illustrating a tone or mood you may wish to convey, a good method is to have both a 3-5 word "alt" and a long description of 1-3 sentences, or more if required. This will allow a screen reader user to access the longer description, but does not require the user to hear it every time that he/she returns to the page.

[Edited May 2008]

Link to comment
Share on other sites

×
×
  • Create New...