What are the "Description" and "Short Description" fields for?

The "Description" field on the Edit Icons page, and the "Short Description" when you select Insert Image on the update page, both allow you to provide a text alternative for your images. This text alternative will be used for the ALT attribute ("alt text") of the image when it is displayed on the page. Most screenreaders and text-based browsers will print or read the ALT attribute, since they can't display the image. By entering a meaningful description of your image, you'll help people who use those assistive technologies to benefit from your image as much as people who can see it.

The best descriptions are short but meaningful. Describe the most important information the image conveys. You might describe the same image in different ways depending on context, or based on what you think is the most important part of the image. For example, you could describe one image as "Self-Portrait of me, Curiosity the Mars Rover", or "Mars Science Laboratory in Gale Crater", or "adorable robot!" You do not need to preface your description with "Image:" or enclose your text in square brackets ([ ]), because screenreaders will describe the text as an image appropriately.

For an icon description, the description will be printed or read every time your userpic is displayed, so keep them brief. Choose the one or two elements of the icon that summarize the emotion or effect you're trying to convey. For instance, if the image is of you and your expression is the most important part of the image, the description might be "Me, smiling", or if the gesture is the most important part, the description might be "Me, making the peace sign". Also, remember that most screenreaders will read out punctuation, so avoid the use of repeated non-essential punctuation. For instance, if the text of your icon is "{{{hugs}}}", instead of using the exact text in the description field, consider using "Hugs", "The word 'hugs'", or "The word 'hugs', enclosed in triple braces".

You don't have to describe every part of your image. Just pick the things you'd most want someone to know about it if their browser didn't display images or if they were using a screenreader.

To test how your descriptions will appear, you can view a page that contains your icon in a text-only web browser, or (in some browsers) by disabling images in your browser. You can also put the URL of the page into WAVE, the web accessibility evaluator, which will show you the alternative text on the page.

All images should have alternative text. If an image has no ALT attribute, screenreaders will read the entire URL or filename of the image, which can be very noisy for screenreader users, as well as uninformative. If the image is something that is absolutely uninteresting for people who can't see it (such as an image link that replicates a text link right next to it), you can explicitly tell the screenreader to ignore the image by creating blank alternative text: alt="". Only do this if you are sure the image is not interesting or useful to people who can't see it. (For user icons, the alternative text is never blank, even if you leave the description field empty: it contains your username and the keyword used to select the icon.)

Writing good alternative text can take a lot of practice, but it helps many people when you do it. You can learn more about how to pick the best alternative text.

Last Activity:
March 7th, 2013 (denise)


Creative Commons License
Licensing

Back to the User Icons FAQ category.
Back to the full FAQ list.
Return to the Search Page.
Need more help? Go to the Support Area.