Adding Alt Text to Images on Medium
Medium has added a new feature that is a happy addition to the blogging platform that we all love to spend hours reading and writing on — alt text. First, I’ll briefly touch on why alt text is so important and why we should care about it, then I’ll show you how to do it.
What is Alt Text?
Alt text, alt descriptions, alt tags — whatever you decide to call them, is text that you add to images on a web page so that a) it helps with your SEO, b) screen readers will pick them up, and c) users will see this text if the web page breaks and the image doesn’t load — in turn, helping the user string together what they’re looking at.
SEO — Alt text affects SEO because it is used by Google the same way it is used by a screen reader — for interpreting content. Google algorithms cannot understand an images content without being explicitly told what that image is — that’s where alt text comes in. Adding one to your image will help with the way Google interprets your web content, and in turn, your site will be more likely to be closer to the top of a search result page. Without adding alt text, it will be much harder for Google to identify it as something relevant to a users search queries and therefore, it won’t be shown in the image search results.
Screen Readers — Just like why Google needs alt text, so do screen readers. Without alt text on a website (especially image heavy sites) it can ruin a users experience. Screen readers will pick up alt text and read it aloud to the user while navigating a web page, but if that alt text is empty, all the screen reader will say is “Image”, or possibly just read the images file name (eg. “image_01.jpg”). Not ideal and most certainly not inclusive.
Broken Page — One way to reduce a high bounce rate on your site is by simply adding alt text. This isn’t the most powerful way to avoid bounce rate by any means, but it sure can’t hurt. If for whatever reason your web page is broken, having alt text will allow a user to still at least understand what the image content is that they can’t visibly see. But an empty alt text means a bunch of content on your site is now completely void of context for your user, and thus, they will inevitably navigate away from the page and you will lose their attention.
Trending GoBeyond.ai articles:
1. Best Practices for Managing E-Commerce Customer Service
2. Top 15 Magento 2 Extensions For Your E-Commerce Site
How to Add Alt Text
Let’s take this beautiful shot of what I believe is a Monstera plant (plant lovers, am I right on this?!). Clicking on the image, you’ll see the option to include a caption below which is immediately visible to your readers without them having to do anything. This image is free for use from www.unsplash.com, so we’ll use the caption to credit the photographer.
So now we have our caption which is all good and fine — but let’s take it one step further and add some alt text. If you aren’t already on your blog page in edit mode, head over there now and click on the gear icon at the top right, then Edit story.
Next, scroll down to the image you want to update and click anywhere on it. You will see a toolbar popup with a few layout options, but now, to the far right, you will see “Alt Text”. Click on that option :).
Voila! The alt text area will now open up for you to write your images description. Once you hit save, your alt text will be available for folks to read, and most importantly, for screen readers to pick up.
Now that Medium has this feature available on the platform, I highly suggest going through all of your blogs and adding alt text to your images, or at least start adding them to your future blogs. I promise it takes very little time to do and your readers will thank you for it!
Fun Fact — I said “alt text” twenty-five times throughout this blog post!
Don’t forget to give us your 👏 !
