Three Reasons to Take the Time to Create Alternative Text (“Alt Tags”), and How to Do it in WordPress

March 15, 2023 2:56pm

Alternative text, often referred to (improperly) as the “alt tag”, should be as important to creating content on your WordPress site (or any website for that matter) as putting your pants on before you tuck into bed. After all, it’s a proven fact that 32% of “naked in front of a crowd” dreams that people have are caused by actual nudity between the sheets. And even if half of the country can agree that we all disagree on the factuality behind my science there, alt tags are really important.

Geek Note: While “alt tag” is commonly used, and will be used interchangeably throughout this article with the proper “alt text”, it’s incorrect? Why? Glad you asked, fellow curious mind. A “tag” is part of an HTML element, and for “alternative text” purposes, the relevant tag is img. Tags have properties and attributes, which help define the tag better. alt is actually an attribute of the img (and other) tags. Finally, the next time you’re at a Daddy Daughter dance with Tom Brady, you’ll have a way to make him look like the scrawny fool!

Alternative Text Is Essential for People Who Require Screen Readers

For the visually impaired, a screen reader essentially reads web pages to them. When it comes to an image, it doesn’t know what to do, and thus it relies on the alt property. If you have an image on your page, that person will have no idea what it is. Whether you consider this unfair or unlawful, and it can be both, if the image is actually essential (such as text written on an image, which you should never do either), then this person misses out completely and the intent of the page may not be clear.

Also, people are suing companies over websites that don’t meet Accessibility standards these days, so not only is it the right thing to do, it could save you a million jillion dollars (that’s ten bazillion in 2023 money.)

Alternative Text Makes Google Happy

Google prefers well crafted sites over poorly built ones. For all of the reasons above, this makes alternative text important for your SEO.

But Google also uses alternative text to rank how well your site does in its search results, because a bunch of pictures of Lamborghinis on your “I Love Lambos, Bro” blog are better than just a few sentences about why you love crazy expensive cars that cost more than the GDP of many nations. So the next time you have this:

<p;img src="/sick-red-lambo.jpg">

Just change it to this:

<p;img src="/sick-red-lambo.jpg" alt="a red Lamborghini">

Oh but even better, for both screen reader users and Google:

<p;img src="/sick-red-lambo.jpg" alt="a red sports car of arguably impeccable design, aka the 2023 new Lamborghini V12 hybrid supercar, parked in a field of magnolias while a woman who was paid to do so caresses it as though the vehicle is all she has ever cared about in this world.">

If you can’t tell, the second set of alt text, while perhaps a bit long, is significantly more descriptive and will therefore be more useful to a real person as well as the almighty Google.

Alt Tags Help With Broken Images

Have you ever seen this while surfing the ‘net? (You do still surf it right?)

That weird blue icon thing near the top left means that the image is broken. This is from Lamborghini’s actual site, where I went in and tinkered with the code to purposely break the image so I could show this example. And then, hilariously enough, Lamborghini isn’t using alternative text on their image! So, all we see is that silly icon that doesn’t really even look like what it’s supposed to be – a broken image.

If Lambo would have hired a more dedicated developer, then that broken image would have looked like this:

Sure, it’s still broken, but now we can at least see what it was meant to be.

So there you have it, the three reasons to always use alternative text…it’s the right thing to do, it’s good for your business, and it makes things look less terrible when something does go wrong.

How to Add Alternative Text in WordPress

Now for the last bit, how you can do this in WordPress.

Firstly, if you already have images in your Media Library, head over there. You should see something like this:

Click one of the thumbnails, and you’ll see this:

See where I have Alternative text highlighted in that image? It’s to the right of the image itself, at the top of the options area. Just type in your alternative text there, and in many cases your site will update anywhere that image is shown on your site.

However, that’s not always the case. The Block Editor, also known as “the Dreaded Gutenberg” will fix this for you. But the Classic Editor won’t. That’s because it actually uses code to display the image, code that you can alter and WP doesn’t want to mess with this. For example, in one of the images above, my code looks like this:

As you can see, the alternative text is completed properly:

alt="a screenshot..."

However, you can search your site’s posts, pages and other custom post types for empty alt tags just by searching for alt="" on the front end of your site. If you have a search box on your site, use that. Otherwise, you can literally type this into the browser:

yourwebsitedomain.com/?s=alt=""

Just replace yourwebsitedomain.com with your actual domain name.

Observant folks on this site might test this out here on ClickNathan.com, and they’d see (with a little math and prodding) that I have some 480 pages that are, at least once, missing an alt tag. Hey, it happens to everyone, and I’ve got some 2,050 pieces of content on this site going back to before Facebook was even a thing.

That said…

But I Don’t Have Time to Fix All of This!

I hear you. Especially if you comment below, then I’ll really here you. Going through the Media section when you’ve got hundreds of images uploaded can be daunting. Instead, I’d recommend the above tactic. Search your site for pages that are missing alternative text and fix them one at a time, whenever you can.

The best way to, typically, fix this is to edit the page in “Visual” mode (if you’re using the Classic Editor.) Look for each image in your content and click on it. You’ll see this pencil icon:

Clicking that pencil icon will bring up a screen where you can quickly see if an image doesn’t have alt text, and add it. Move on, repeat, tackling a page or ten a day, whatever you can handle. If your website is important to you — personally or as a business — then you should really find time to make this happen.

If your site is highly customized, you may also see fields like this:

Or some variation of that. Same concept applies here, click the pencil and have at it.

Hey Buddy, I Have Followed Your Advice and Google Is Still Complaining About Missing Alt Text. Am I Able to Write Into the BBB and Have Someone Slap You Upside the Earlobe?

At times, your site may be coded poorly, or in some way where you don’t really have any way to fix this. Contact your theme’s developer, or a handsome, well-traveled developer whose writing you enjoy so much that you finished this 1200+ word post learning all about alternative text. Maybe they can help!

Up Next: Only Show a Theme's Title Tag in WordPress if No Heading 1 is Present in the Content