It’s really easy to add alt text in WordPress, making it a really good place to start if you want to make your website more accessible. Whether you do it as you upload images to your site, or you add alt text to your images later on in a batch, the process is straightforward.
Read on to find out how to add alt text to images in WordPress.
Estimated reading time: 6 minutes
What is alt text and why do you need to set it?
Alt text is a short text description given to images used on the web.
People with visual impairments often use screen readers when they browse the web. But screen readers can’t ‘read’ images, they work by reading the text content from the code used on web pages.
So when they come across an image on the page they read the alt text description.
According to SiteImprove, if a screen reader finds an empty alt description it will skip over the image – so the user won’t know an image was there. If a screen reader comes across an image with no alt text mentioned in the code, it will read the image filename instead.
Different types of images
Not all images will need an alt description, and it will often depend on the purpose and content of the image as to whether or not it’s needed. While researching this post I’ve learned a few additional things about alt text that I will need to implement myself.
I’m deferring to the Web Accessibility Initiative here on when and how to write alt text as they have much more expertise than I do in this area.
The Web Accessibility Initiative, splits images into several different categories:
- Informative images
- Decorative images
- Functional images
- Images of text
- Complex images
- Groups of images
- Image maps
The initiative gives you detailed information on which types of image need alt text and how to write it. It’s a really great resource with examples, and I recommend that you check it out.
It also has this really handy alt text decision tree to help you decide whether or not you need to set alt text for an image.
Want website hints and advice straight into your inbox every week?
Join my email list today and you’ll get my very best tips direct every week and also be the first to know when new offers and discounts go live.
What makes good alt text?
Most screen readers stop reading alt text at 125 characters, which isn’t many at all. So you need to be as descriptive as possible while also being as concise as possible.
If you can’t squeeze all the info you need within those 125 characters you’ll need to add a longer description elsewhere using one of the methods described in the complex images page from the Web Accessibility Initiative.
Don’t begin your alt text with ‘Image of’ or ‘Graphic of’ because the user will already know that an image or graphic is present on that part of the screen. This will also help you nail that character count too.
How to add alt text for images in WordPress?
Setting alt text in WordPress is done through the Media Library. You can do this as you upload images to your site, or you can do it later on after you’ve uploaded all your images.<br>
To add alt text as you’re uploading an image
When the media library popup is displayed, click on the Upload Files tab, then click the Select Files button and choose the image from your computer.
You’ll then be taken to the Media Library tab where your newly uploaded image will be pre-selected.
Set your alt text
In the Attachment Details panel of the Insert Media popup there is a text area labelled Alt Text. Type or paste your image description in there.
The alt description will be saved against this image when you click away from the text box. If you use the same image elsewhere on the site, the alt text set here will be applied.
Click the Insert Media button to add your image to your page.
To add alt text to already uploaded images.
Hover over the Media option in the main menu and click the Library option.
Select your image
Click on the image you want to add alt text to.
Type or paste your alt text description into the Alternative Text text area.
The alt description will be saved against this image when you click away from the text box. If you use the same image elsewhere on the site, the alt text set here will be applied.
Click the Insert Media button to add your image to your page.
Summary
- Adding alt text to your images is a great place to start making your website more accessible
- Not all images need alt text. You can find more information on this from the Web Accessibility Initiative
- Good alt text is informative yet concise. In some situations you may need to add additional text description below an image to make sure that the right information is provided to your users.
- To add alt text to an image in WordPress you need to use the Media Library. This is where all information for an image is stored on your website.
- You can set alt text in WordPress as you upload images to your site, or you can go to the media library later on and set them afterwards.
You may also enjoy
What is WordPress? Why use it for your business website?
How to improve user experience on your website
How to create a landing page in Elementor
