Overview
It's important to provide image descriptions in the form of alternative text, or alt text, when adding images to your Dornsife website. This ensures that images are accessible for visitors with low vision or visitors using screen readers.
Alt text should describe the appearance or function of an image on a page. It should be a very concise sentence or two, as the most popular screen readers will stop reading alt text aloud after 125 characters. You do not need to include “Image of” or “Photo of” in the alt text as a screen reader will announce an image. Please make sure to start the sentence with a capital first letter and end it with a period.
In this guide, we review several methods for adding alt text to images in WordPress CMS. Be aware that if you do not add alt text, you will receive a warning message.
Adding alt text to images in the Media Library
Quick guide
If you haven't yet uploaded the file:
- Click Media in the left menu.
- Click Add Media File.
- Click Select Files and select an image or images from your computer.
- Wait for WordPress to finish uploading your files. You'll know the upload is complete when the thumbnail changes from a blue progress bar to a preview of your image.
Once the file is uploaded, you can add alt text:
- Click the image thumbnail to view its details.
- Fill in the Alternative Text field. You can optionally fill in the Title field. If the image is purely decorative, you can select the Decorative Image checkbox.
- Your updates are automatically saved, and you can close the "Attachment details" window.
Adding alt text to images within components
Add the alt text when uploading an image
Quick guide
- Within the component, click Add image.
- You can upload a new image from your computer or select an existing image:
- To upload a new image:
- Click the Upload files tab.
- Click Select Files and select the image from your computer.
- Wait for WordPress to finish uploading your image. You'll know the upload is complete when the thumbnail changes from a blue progress bar to a preview of your image.
- To select an existing image:
- Within the Media Library tab, click to select any existing image.
- Fill in the Alt Text field. You can also optionally fill in the Title field. Then, click Select.
- If the image is purely decorative, you can select the Decorative image checkbox. If you do not see this checkbox, click the image thumbnail.
- Save or update the page.
Detailed guide (with screenshots)
- Within the component, click Add image.
- You can upload a new image from your computer or select an existing image:
- To upload a new image:
- Click the Upload files tab.
- Click Select Files and select the image from your computer.
- Wait for WordPress to finish uploading your image. You'll know the upload is complete when the thumbnail changes from a blue progress bar to a preview of your image.
- To select an existing image:
- Within the Media Library tab, click to select any existing image.
- Fill in the Alt Text field. You can optionally fill in the Title field. Then, click Select.
- If the image is purely decorative, you can select the Decorative image checkbox. If you do not see this checkbox, click the image thumbnail.
- Save or update the page.
Add alt text to an image that has already been added
Quick guide
- Hover over the image. Click the Edit
icon.
- Fill in the Alt Text field. You can also optionally fill out the Title field. Then, click Update Image.
- Save or update the page.
Detailed guide (with screenshots)
- Hover over the image. Click the Edit icon.
- Fill in the Alt Text field. You can optionally fill in the Title field. Then, click Update Image.
- Save or update the page.
Adding alt text to images in the Description field
Most components in WordPress have a Description field, indicated by the Description label above the text box:
In most cases, you won't be adding images to a component's Description field, as it isn't intended for that purpose. However, if you do add an image, make sure to include alt text so that the image meets accessibility standards:
Quick guide
You can add alt text in either the Visual tab or the Text tab of the Description field:
Visual tab
- Click the image to select it.
- Click the Edit
icon.
- Fill in the Alternative text field. Then, click Update.
- Save or update the page.
Text tab
- Make sure you are in the Text tab.
- Locate the image, which is indicated by the <img> tag:
- Add the alt text in the following format:
- <img src="imageURL" alt="" />
- For example:
<img src="https://dornsife.usc.edu/dts/wp-content/uploads/sites/67/2023/04/support-team-header.png" alt="Support team illustration" />
- Save or update the page.