One thing that often comes up when performing an accessibility audit of a website, is the lack of the alt attribute when it comes to images. Fortunately, this is something that can be easily fixed, and you can start adding it to your images right now and see an immediate improvement in the accessibility of your site. In this tutorial, I’m going to explain what the alt attribute is, how and why to use it, and how you can do so using WordPress.

What is the alt attribute?

The alt attribute is part of the HTML tag which is used to insert images into web pages. Alt is short for alternative, and it defines text that is displayed as an alternative in case an image doesn’t display correctly in a browser. It also gives search engines and screen readers an idea of what the image contains. For screen reader users, it means the difference between “graphic img1000000000” or something similar and “graphic man holding a football” or other similar descriptive text.

What kinds of images need alt attributes?

You may be thinking that if there’s an image, it needs an alt attribute. However, this is not always the case. For example, if an image is decorative, such as images used solely for creative effect, the alt attribute should be left blank, like this:

In the case of an image that’s used as a bullet, you can use this:

Two ways to add an alt attribute in WordPress

If you’re using WordPress, you have two options for adding the alt attribute to your non-decorative images. The first is to manually add it to the tag. If you’re using the text editor, and manually inserting your images, it looks like this:

If you’re inserting media using WordPress’s built-in media library, this gets a little easier. When adding the details for your image, there is a field that allows you to enter an alt attribute. Adding some meangful text to this field will ensure that your alt attribute is added without much work.

What counts as meangful text and how long should the text be?

The final thing to keep in mind when you’re adding alt attributes to your images is to make sure the text is meangful. For instance, if you have an image of a woman standing at the check-in counter at an airport, instead of labeling that image “woman,” try labeling that image something like “woman standing at airport check-in counter.” Also, keep your descriptions brief. Don’t use any more than fifty characters. If you need to add a longer description, in WordPress you can add this longer description to the caption field. There’s also a caption attribute you can use if you’re adding it by hand.

The alt attribute is an easy way to increase the accessibility of your website and content, and it’s also an easy way to help the search engines and other people get a better idea of what you’re saying with your images. If you’re going to use images as part of your content, (and you should), make sure that everyone can enjoy them. After all, you’ve spent a lot of time either finding those images or creating them yourself. With an alt attribute for each one, you can ensure the widest possible reach for your work.