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.
Adding alt text to images in the Media Library
When you upload an image or document to the Media Library, it's a good habit to immediately fill out its Alternative Text field.
Quick guide
If you haven't yet uploaded the file:
- Click Media in the left menu.
- Click Add New Media File.
- Click Select Files and select the files 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 out the Alternative Text field. You can optionally fill out the Title field.
- Your updates are automatically saved, and you can close the "Attachment details" window.
Adding alt text to images within components
Adding 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 out the Alt Text field. You can also optionally fill out the Title field. Then, click Select.
- You can now 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 out the Alt Text field. You can optionally fill out the Title field. Then, click Select.
- You can now save or update the Page.
Adding alt text to an image that has already been added
Quick guide
- Hover over the image. Click the Edit
icon.
- Fill out the Alt Text field. You can also optionally fill out the Title field. Then, click Update Image.
- You can now save or update the Page.
Detailed guide (with screenshots)
- Hover over the image. Click the Edit icon.
- Fill out the Alt Text field. You can optionally fill out the Title field. Then, click Update Image.
- You can now 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 out the Alternative text field. Then, click Update.
- You can now 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" />
- You can now save or update the Page.