Drupal: Adding ALT Text and Title to an Image

How to Add ALT Text and Title to an Image in Drupal

These are written instructions for adding ALT Text, ALT title and checking and saving your work. There is also a video embedded on this page showing the procedure.

  1. When already logged in and in the Edit tab:
  2. Right click on the image
  3. Select image properties.
  4. In the alternative text field, add descriptive text and/or what information the image in conveying. In this example, the image shows the link window and the Browse Server button is called out with the text "Select Browse Server in the resulting window. "Enter all of that as a description: The link window and the Browse Server button is called out with the text "Select Browse Server in the resulting window"

Image Properties window showing filled in ALT text field

You can click OK now because you have entered the alt text. Steps for the ALT title and checking are below the video.

Video for how to add ALT Text and Title in Drupal

Text for the video

To add an ALT Title or Advisory Title

  1. Click on the advanced link and enter an Advisory Title.
  2. I entered "Selecting Browse Server in the Link window" for my advisory title.
  3. Then click OK.
  4. When the image is hovered over, the advisory title will pop up

The content of the ALT text and Advisory title fields should not be identical and vital information should only be put in the ALT text field. In Drupal, the Advisory Title creates the text in the "hover over."  A screen reader being used by someone who can't see the image will sometimes read both the ALT text and ALT title, or it may not read the Advisory Title at all because that feature can be turned off. The checklist for how to build an Advisory Title on the WebAim.org page is excellent: http://webaim.org/articles/gonewild/#title

To check your work and to look for missing ALT text from the Source code:

Select Source in the menu and use CTRL+F. In the find field, enter quotation marks "" then hit enter. You can see which images need alt text and can enter it right into the source code. Or you can deselect source and do the update by right clicking on the image.