Accessible Content Creation – Alternate Text

As I mentioned a bit in the previous part of this series, images have a feature called the “alt” text. This provides a text alternative when the image isn’t available. This feature is especially important for anyone accessing the page with a screen reader. It also affects search engines and anyone who may not be loading the images. For example, someone with a slow internet connection might disable images to load sites faster. This happens mostly in developing nations, rural communities, and also over cell networks when users are at the edge of a reliable connection.

Adding alt text

Working with images and adding alt text is very easy in WordPress. The image above does not have an alt text. To add it, click on the image and use the right toolbar to access the alt text field. 

Writing alt text

Even though adding alt text is easy, that doesn’t mean writing good alt text is easy. In fact, it can be very difficult. There are a few things to keep in mind.

• Make the text as short as possible while still being useful. Screen readers treat alt text differently, so it is usually impossible to navigate. If the text needs a longer explanation, use the caption field. That will be better for all users anyway. 
• If you use the caption field for longer descriptions, indicate that in the alt text. “Reaktiv team photo: description in the caption.”
• The alt text should describe the purpose of the image, not the image itself. If you have a picture of a sunset over the beach because you are describing the “sunset” of a project, don’t write “the sun sets beautifully over the waves with hues of red, orange, and gold….” That doesn’t matter for this use. Instead say “Like all days come to an end, this shows the sun setting over the project.” It’s ok to be poetic if that’s the purpose, but describe the purpose not the image.
• End with a period or other hard stop. In some contexts, the image alt text is read inline, which means the screen reader can run right into the next sentence. That is a bad user experience.
• Don’t just fill your alt text with keywords. Real people are reading this, not search engines. 
• If the image is a link, describe the link in a clear and meaningful way. 
• If the image is purely decorative, leave the alt text empty. While this should be an exception, it is better to have no alt text than “decorative image” or something like that.
• Do not include the words “image, picture, …” in the alt text (Example: “Image of a…”). The screen reader will announce it is an image so the redundancy is frustrating for users.

One last thing, when possible avoid representing text with images. It’s acceptable for logos, but for most things, it is best if the real text is on the page. For one thing, the real text is suited for crawling, copying, and screen readers. It also helps when users are using high contrast mode in Windows.

If there is a reason you need to use an image to represent text, the alt text should indicate the text. For example, if you are sharing a logo, then the text might be “logo of company A.”

Another case where clients have used images with real text is in a flier or brochure. Assuming there is a PDF of the content that is accessible, a great solution would be to upload the PDF and link the image of the content to the PDF, with link text such as “download the PDF of the super amazing product brochure.” This will allow all users access to higher resolution and accessible content.

Now let’s look at some things we can do to fix that image.

1. Click on the image
2. Click in the “alt text” field on the right sidebar
3. Describe the image. For this image the text is, “Old fashioned telephone: description in the caption.”
4. Optional: add a caption. For this image the caption is: Just like technology advanced with phones, don’t be left behind using old tools with your customers. Find the best way to communicate with all users.

The caption like the alt text describes the purpose of the image. I describe this phone as something that is old and dated. If this was your entire back end where you were answering calls from customers it might not be possible to do this effectively. Modern technology allows you to handle calls from customers more effectively. Using alternate text allows you to communicate with all of your users more effectively. That’s what we just did with this image of a phone. We provided a description of the image, it’s an old fashioned telephone, and we provided a note that there is additional description in the caption, which will allow screen reader users to navigate to the caption of this image and find out more about why this is used, but also exposes this idea to sighted users so people do not have to guess why we used this image.

Join us next time as we talk about media.