Media in WordPress
Let’s start with a quick definition of media. Any file you upload to your WordPress site is called media, and it’s accessible via your media library. Media files can be images like .png, .jpg, and .svg or they can be files for download like .pdf’s. They can also be videos. In this article, I use the terms media and image interchangeably.
Each media file you load onto your WordPress site gets assigned some basic data. At a minimum, each one has a file name. Each file also has the options for Alt text, Caption, and Description, and each of these serves a different purpose.
What is Alt Text?
Alternative (or Alt) text is copy that you attach to an image in your website. It is used by screen readers, which are (in turn) used by people with sight limitations. When viewed via a screen reader, a website’s images will appear as words, and the words that are seen are – you guessed it – the Alt text. If you don’t have Alt text attached to an image, someone using a screen reader won’t know it’s there. This can be good or bad, which I’ll explain in a moment.
Alt text has pretty specific parameters, and I’ll go into detail on those shortly.
What is a Caption?
The caption is the copy that appears attached to a picture, generally appearing under the image. This can be anything you want: a description, poetry, a mathematical formula – this is strictly editorial copy. My website generally doesn’t use captions, so I’ll use my client’s image as an example.
Description
This is where you can get your images to help with SEO. This copy will not be seen by any person visiting your website, but search engines use it to understand the purpose of an image. I add metadata to this section such as the company name, location (if it’s a location-based business), and a written-out description of the image. If the image came from a database, this is a good place to note that, as well. Add keywords to descriptions if you can, too.
For example, a good description for the image in the What is a Caption? section above is: Seattle Science Writer, Year 12. National Child Labor Committee collection, Library of Congress, Prints and Photographs Division
Which images need Alt Text?
Alt text is very important for accessibility, so I’m going to go into more detail about it. Images that convey part of your content should always have it. Purely decorative images such as a background image or a decorative border don’t need descriptors, and you don’t want to clutter up your site with them.
W3C, the Web Accessibility Initiative, identifies seven types of images, and gives suggestions on how to label them. You can find their page here. Below are their categories along with copy I’ve tailored to the purpose of this post.
If an image conveys part of the message, include a description that explains its meaning. These are usually photos, illustrations. The text doesn’t need to be long; it just needs to tell the purpose of the image.
Purely aesthetic images shouldn’t get any text.
Icons such as print or share buttons should have Alt text that describes what the button does, not what it looks like.
If an image needs to have text for some reason, add the text verbatim as Alt text.
Images that convey information such as charts, diagrams, or graphs should have their text added verbatim to the Alt text field. To read about .svg images and copy, see my library post on image formats here.
For images that combine to portray a message (say 5 pictures of a flower opening), add Alt text to just one of the images.
For images within images i.e., a map of a city that allows you to click on landmarks to see detail pictures, each image should have its own Alt text to describe it and its relationship to the group.
Miscellaneous thoughts on adding copy to media
Make sure at least one image on your page or post includes the focus keyphrase. This helps search engines with SEO. For more on images and SEO, see my post here.
With Alt text, don’t go overboard; remember that this is part of your copy. People will read this, so you should pay as much attention to it as you do to the rest of your text. It doesn’t have to be poetry, but it shouldn’t read like code.
If your media is a product image, describe the product in the Alt text. Include its item number and any other salient information about the merchandise that’s not included in the caption.
