Technology Help Website: Add or Edit Alternative Text
Alternative text, or "alt text", provides a text equivalent for images, charts, graphs, and more. This article discusses how to add Alternative Text in the Technology Help Website (it.umn.edu) via Drupal.
Before adding or editing Alternative Text in the Technology Help website, familiarize yourself with the importance of Making Images Accessible Using Alternative Text.
This article covers the following topics:
- Setting the alt text attribute on a Drupal page
- Setting "null" alt text on a Drupal page
- Additional resources
When you add an image in a page on the Technology Help website, you must provide alternative text using the alt text attribute.
- After Uploading an Image or Using an Existing image, select Edit next to the image.
- Fill out the Alternative text field. The HTML attribute is automatically generated when you fill out the Alternative text field in the image's Edit mode.
- What you enter into the Alternative Text field depends entirely on the image's context. A good guideline here is to think: what meaning is a sighted user deriving from this image? Then, use that information to write your alt text. This will ensure that anyone who can't see the image is still getting equal access to its meaning.
If the information provided by an image is already described in the surrounding text, and the image provides no additional information, you may be able to use null (empty) alt text. This allows assistive technology, such as a screen reader, to ignore it. Otherwise, the screen reader will read both the surrounding text and the alt text which would be repetitive and distracting.
To generate "null" alt text in Drupal, you should put the Alternative text field.
Note: In HTML, represents a non-breaking space, so the HTML for the "null" alt attribute will be "" in the Source Code (two quotation marks without a space).