Alt text for images

Add alternative (alt) text for images. Remember, images could include micrographs, photographs, pictures, paintings, Snagit of text,…

Painting.Micrograph. Crystal structure.

(Image sources: http://commons.wikimedia.org/wiki/File:Jeda_Villa_Painting.jpg; http://www.jbc.org/content/286/7/5023.full; http://www.ncbi.nlm.nih.gov/Structure/mmdb/mmdbsrv.cgi?uid=77602)

The alt text you use will be determined by the purpose of the image.

Decorative Images

If the purpose is decorative, that is, it does not convey information, don’t provide alt text. The alt text attribute should be null, like this:

alt = “”.

Example: This LibGuide content box has text and an image. In this case the image is purely decorative, not conveying any information; it does not need alt text.

research-data-canada-screenshot

What does null alt text look like? It is found within the Image Tag; see it in this snippet of HTML from the Plain Text Editor:

<p><img style=”vertical-align: top;” src=”http://lgimages.s3.amazonaws.com/data/imagemanager/15514/canada_research_data_strategy.jpg” alt=”” height=”210″ width=”307″ /></p>

 How to Add Null Alt Text

When you edit or insert an image in LibGuides, you get a dialogue box asking for information which includes text for the “alt tag”; this is where you insert the alt text, but…

Dialogue box showing editing fields with the alt tag field highlighted.

…leave the Alt Tag field blank. Instead, you will use the Plain Text Editor.

Screenshot illustrating the Plain Text editor.

Look for the image tag: <img />.
Add the null alt text: alt = “” so you get:
<img alt = “” />.

Another Example:

<p style=”text-align: center;”><img style=”border: 1px solid black;” src=”http://lgimages.s3.amazonaws.com/data/imagemanager/19580/fbissmall.jpg” alt=”” /></p>

 Images with Purpose

The alt text must convey the purpose of the image and that depends upon the context of its use; it is more than merely description.

This image may be showing students working in a library; alt text might say “Students using the Porter Library”. Or, it may be showing the new library space; alt text might say “Spacious new lobby at the Porter Library”.

Students working at stand-up computers in Porter Library.

 How to Add Alt Text

When you edit or insert an image in LibGuides, you get a dialogue box asking for information which includes text for the “alt tag”; this is where you insert the alt text.

Dialogue showing editing fields with the alt tag field highlighted.

 

 

June 11th, 2013


Categories

Links