Fix Missing Alt Text

When you insert an image into a page in WordPress, WordPress assigns the alt text that is associated with the image at that time.  This means if you upload an image but forget to enter the alt text before inserting it into a page, the image won’t have any alt text.  If you subsequently go back through your media library and backfill missing alt text, WordPress will not update the alt text for images that were previously inserted.

Wicked Alt Text AI can fix this automatically for you.  Simply go to Wicked Alt Text AI > Settings and enable the “Fix missing alt text on the front-end” option.

How the Fix Missing Alt Text Feature Works

When this feature is enabled and a page is loaded on your website, Wicked Alt Text AI will scan the page for images that are missing alt text. If any are found, the plugin will check your site’s database to see if alt text has been specified for the image and, if so, update the alt text to that.

If no alt text is found in the database, the plugin will check to see if the “Generate missing alt text” setting is enabled.  If it is, AI will be used to automatically generate the text and store it in the database (so the text doesn’t have to be generated again on subsequent loads).

This is all done in the background after the page is loaded so it won’t slow down your site.

Excluding Images

You may want to exclude some images from automatically having missing alt text fixed (i.e. you intentionally don’t want certain images to contain any alt text).  For example, decorative images that do not visually communicate information that is important to understanding the purpose of the page shouldn’t have alt text.  You can use CSS selectors to exclude these images.

To do so, enable the “Fix missing alt text on the front-end” option then enter CSS selectors (one per line) into the “Excluded Images” field.  For example, to exclude all images with the class “no-alt”, simply enter the following:

.no-alt

Note that WordPress (or your page builder of choice) may wrap the image with another HTML tag such as a <div> or <figure> tag and may apply your class to that element instead.  In that case, you need to update the selector to target the nested image like so:

.no-alt img

You can learn more about CSS selectors here.