Alt or alternative text helps search engines and screen readers to understand the meaning of your images. Core WordPress software comes with multiple options for adding alt text to the images you upload on your site. However, there are no default options to bulk edit alt text and you need a third-party plugin for that.
Alt Text Attribute in HTML
Before proceeding, it is necessary to understand alt is an attribute used with image tag in HTML. The syntax will look something like below:
<img alt="This is my image" src="my image URL">
So, when you add alt text, WordPress will insert alt tag in the source HTML code. Some website builders like Weebly automatically adds the alt text to all uploaded images as “Picture”. This is not correct as all images on your site can’t have the alt text as “Picture”. In addition, you can’t find missing alt text problems when doing SEO auditing on your site. In order to avoid these issues, WordPress by default will leave the alt text field as blank. Therefore, you have to fill up the field manually for each image. However, if your images are purely for decorative purpose and not related to the content of the article then leave alt text as blank.
1. Add Alt Text for a New Image in Gutenberg Editor’s Media Library
- Create or edit a post in Gutenberg editor.
- Insert an “Image” block and click on “Media Library” option.
- Go to “Upload files” tab and click on “Select Files” button to browse and upload an image. Alternatively, go to “Media Library” tab to select an existing image previously uploaded on your site.
- After uploading or finding from the list, select it and you will find “Alt Text” box on the right section.
- Type your alt text and click “Select” button to insert the image in your content.
You can use this same method when you use “Upload” or “Insert from URL” options in “Image” block.
2. Add Alt Text for an Existing Image in Gutenberg
There are many SEO tools and auditing options available to scan through your site and find images missing alt attribute. If you find an existing image is missing the attribute, edit the post containing that image. Click on the image and check under “Blocks” tab in the right sidebar. Enter your text in “Alternative Text” box and click “Update” button to republish your post.
If you want to delete and reset the alt text, click on the three vertical icons showing against “Settings”. Select “Reset” option showing against “Alternative text” option to delete existing alt text. Now, you can add new text for the image.
3. Adding Alt Text in Media Library (Outside Editor)
It is also possible to add the attribute outside Gutenberg editor.
- When you are in WordPress admin panel, go to “Media > Library” section.
- Click on the image from the list or use the search box to find and open the image.
- On the “Attachment details” pop-up, enter the alt text in “Alternative Text” box.
- Close the pop-up and WordPress will automatically save your changes.
4. Adding Alt Text in Classic Editor
Alternative text entered from “Media > Library” section will reflect when you insert the image in Gutenberg or Classic Editor. Follow the below steps, if you want to change or add alt text directly from Classic Editor. This is the option for custom post types like WooCommerce products which do not use Gutenberg editor.
- Click “Add Media” button when creating or editing your post.
- Select an image and type your input in “Alt Text” box on the right side.
- Alternatively, after inserting an image select it and click edit icon.
- You can enter the “Alternative Text” in the “Image details” pop-up that appears and click “Update” button.
- Make sure to click on “Publish” or “Update” button to publish the page with updated alt text attribute for the image.
5. Bulk Edit Alt Text in WordPress
Since WordPress does not offer bulk edit option, here we will explain with Image Alt Text plugin. This plugin helps to bulk edit the images missing alt attribute, edit existing image’s alt text and automatically add image name as alt text with single click. If you use image names as alternative text, then this is an ideal plugin to update all your old images and fix missing alt text.
- Go to “Plugins > Add New” section in your WordPress admin panel.
- Search for “bulk at text” and “Image Alt Text” plugin. Install and activate the plugin on your site.
- Go to “Image Alt Text” menu which is added by the plugin and navigate to “Media Without Alt” tab.
- Click “Bulk Alt Text” button to automatically add the image name as alt text for all the images in the list.
- If you want to manually add the text, then enter your alternative text for each image and click “Add” button.
- Once alt text is added, images will be moved to “Media With Alt” tab. Go to that tab to check the current text and edit them if needed.
Clicking on the edit icon showing under “Action” column will open the “Attachment details” editor from “Media Library” section. From there you can add caption, title and description for the image if you like to add. As this is not the purpose of the plugin, you need to do this for one-by-one image.
6. Alt Text for Gallery Images
Good part is that when you process multiple images through gallery, it is possible to add alt text for all the images on the same screen. You can select each gallery image and add alt text to them. WordPress will automatically insert alt attributes for all images when you insert the gallery in your post/page.
You can use the “Gallery” block in Gutenberg editor or create gallery when inserting images in Classic Editor.
Verifying Alt Text
As mentioned, alt is inserted with HTML image tag in the source code. Though you can always check the source code of the published page, it is also possible to check the code before publishing.
- On Gutenberg – select the image and click the “Options” icon in toolbar. Select “Edit as HTML” option from the menu and confirm the code is having alt attribute along with the text you have entered. Click “Edit visually” button to return to visual mode.
- On Classic Editor – click “Text” the tab to toggle text editor. Find the img tag for the image where you should see an alt attribute is added with your text.