I was talking with a friend who has a WordPress website. She’s trying to blog more and is fairly new to the game. She asked me a question about working with images and wanted to know what the difference is between an image title, an image description and an image alt-text. I got my computer out and tried to show her a couple of examples using actual images.
That’s when I realized that there are a LOT of terrible examples out there and a lot of sites that seem like they’re trying to give a good explanation of what this is but the examples ended up being really unclear. That’s when I realized that a post explaining this would be a good idea.
I’ve also been learning more about how screen readers work for people who have low or no vision, and alt text on images is super important for digital accessibility.
Alt Text is short for “alternative text” or “alternate text.” It’s also called “alt attributes” or “alt description.” Sometimes people even call it “alt tags” although tag is not exactly the right word to use in this case. WordPress calls it “alt text.”
The point of using “alternative text” on an image is so that there’s a text version describing the image that appears if the image doesn’t show (some people turn off image loading), or if they’re using a screen reader, and so that web crawlers can know what the image is about (web crawlers an’t “see” images, they can only read text).
Here’s an example of alt text:
You could use “pancakes” as alt text for this image. But that’s not very descriptive. A better description would be “A stack of pancakes on a plate with banana, walnuts and honey.” img src stands for “image source,” and the information in the quote marks in that field is the title of the image.
Okay alt text:alt="pancake">
Better alt text:alt="stack of pancakes">
Best alt text:alt="A stack of pancakes on a plate with banana, walnuts and honey">
Alt text, since it’s what appears if the image doesn’t display, should be as descriptive as possible. Describe what the image actually shows. But, also keep it short–125 characters or less is a good guideline.
Don’t “stuff” the alt text field. This means avoid making the alt tag for the pancake picture “best pancakes pancake breakfast pancake stack pancake restaurant pancakes best pan cake”. That’s stuffing and it’s bad for SEO.
The title field
The title field defaults to the title of the image. If your image is titled “pancakes.jpg” then pancakes is what shows up in that field. Many people don’t retitle their images so they upload images that are titled “DSC14906.jpg.” Change the title to a short description of the image. It helps you find the images later on your site if you need to sort through them. If pancakes is a SEO keyword on your site, use that in the image title. for example: “pancakes-stack-banana-honey.jpg” is great.
The description field
The description field is a little different and is the part that can get confusing. Images in a media library on WordPress are given their own URL. If someone goes to this URL what they will on this “image attachment page”is whatever information you put in this description field. This field can hold as much information as you want. It can be like the alt text, but longer and can contain keywords, or even metadata from your camera on how you took the photo, copyright etc. You can evenadd links in the description field.
All of this information that you decide to add in this field is displayed on the media attachment page if you make your image clickable to open to a bigger image. Not all WordPress themes support the media attachment page. But if yours does, if someone lands on the attachment post page they’ll see the long description. Add your important keywords here (no more than 10) and information that you want to closely describe the purpose of the post or page that the image is on.
The caption field
The caption field is easy to understand . . . it describes what’s in the picture for people who can see the image and want to know more about what’s in it. Unlike the alt text or description, the caption does not have to closely mirror what the image actually shows. I think most people understand how captions work but here is an example of how a caption could be written for the pancake photo:
The pancake is a traditional part of the American breakfast. It’s commonly served with butter and syrup, but the addition of fruit and nuts makes it even more delicious.
Make sense?
