As the saying goes, "a picture is worth a thousand words." Images are very powerful in conveying information and supplementing text material. However, some visitors to a website cannot see the images due to disabilities. Other users may choose not to display the images as a way of improving the download time, especially when using a slower Internet connection.
Regardless of the reason that images are not visible, it is imperative to create text equivalents for all images. In doing so, the intent and content of the image via text is conveyed - making the image accessible to all users.
A code sample for the basic structure of an image element in HTML is as follows:
<img src="FILENAME" alt="ALTERNATIVE DESCRIPTION" longdesc="HYPERLINK
FOR LONGER DESCRIPTION">
<a href="HYPERLINK FOR LONGER DESCRIPTION" title="Longer description
of image">[D]</a>
HTML
Images
<img>
tag is followed by numerous attributes: "src," "alt," and
"longdesc." There are other attributes that you can add to the <img>
tag, but the ones listed are important for accessibility.The "src" attribute specifies which file represents the image that should be loaded and displayed to the user. The path to the file needs to be the exact location of where the file is stored; it is a good practice to store all images for a website in a folder named "images."
The "alt" attribute is short for alternative and specifies a brief meaningful text message to display in lieu of (or sometimes in addition to) the image. Assistive technology like screen readers, which are generally used by individuals who are blind or visually impaired, will present this alternative text to the user. If a user has decided not to display or is unable to display images at all, this alternative text will be shown. Also, if a user who does have the image displayed moves a pointing device, such as a mouse, over the image, then this text will be presented to them.
Alternative text is meant for brief descriptions (recommended less than 40 characters but can be up to 1,024 characters); for longer entries, use the "longdesc" attribute as described below.
It is important to understand that all images must have an "alt" attribute in order to achieve basic accessibility. This includes images that are used as space holders and decoration. When an image is not conveying information to the user, the "alt" attribute still needs to be provided; the "alt" attribute should be left empty by setting the value equal to quotation marks (without a space between them) as in alt="". Do not make the alt="spacer" or alt="bullet"; this is both annoying and not usable for individuals who cannot see or are unable to display the images.
For images where the brief alternative description is not sufficient, the "longdesc" attribute, which is short for "long description", provides a URL or link to a larger, more in-depth description of the image. If the user follows the "longdesc", then a page with a more detailed description of the image is displayed. Not all browsers support the "longdesc" attribute, so it is also advisable to provide a description link.
To ensure accessibility, an additional description link, commonly
called a "D-link", should be added to the long description of the
image. This link should appear immediately following the <img>
tag, and should match the url of the "longdesc" attribute. The standard
way to denote a description link is [D]; however, if you have more than one
image on a webpage that needs a long description, it is a good practice and
better usability to uniquely identify each D-link, such as [D1], [D2], and so
on.
In summary, when creating accessible image elements, apply the following principals:
<img> tag that links to the same location as the "longdesc"
attribute.The following lab focuses on using images in HTML.
College of Architecture (COA)
Fax: 404-894-9320
Phone: 404-894-4960 (v/tty)
User Agreement
Previous Page
