Images are an integral part of any website. They can catch a reader’s attention, illustrate a point, provide information and much more. However, some users may have a disability that means they cannot see images on your website. That’s why it is important that your website images are accessible to everybody.
Introducing Alternative Text (Alt Text)
Alternative text (Alt Text) is the back-end code added to an image which describes the image to someone who can’t see it.
This text helps assistive technology, like screen readers, describe images to visually impaired users. It also allows search engines to better crawl and rank your website.
The Alt Text attribute looks like this: <img alt=”Description of image”>
So now we know that images should have Alt Text, but to determine the most suitable Alt Text, we need to understand the context of the image.
How are images being used?
Images on a website are used for different reasons, such as to inform the user, to act as a link, to elicit an emotion or just for decoration. The purpose of the image determines what Alt Text will best convey the image information to people using a screen reader.
In order to determine this, imagine your image has vanished and ask yourself:
“Do I understand the content that remains?”
If the answer is yes, then it is decorative. If the answer is no, then it is informative and contextually necessary.
An image is decorative if it doesn’t add information to the content of a page. If your image is decorative then it needs to be hidden programmatically. One way to do this is to use an empty/null alternative text attribute.
This tells screen readers to ignore this image as it is not needed to understand the content on the page.
Note: An empty/null alternative text is not the same as a missing alternate text attribute. If the alt text is missing, screen readers may read out the file name which could be confusing and distracting.
How to identity a decorative image in WordPress
If you use WordPress you will see the Alt Text field when you add or select an image in the media library. If the image is decorative then you can leave this field empty. This will create an empty/null alternative text attribute which tells screen readers to ignore this image.
Decorative image as part of a text link
These images are decorative because they form part of a link and so there is no need to supply alternative text.
Icons/ image next to text alternative
This LinkedIn icon is decorative as it has descriptive text next to it.
If there is text next to an image which describes the image then there is no need to supply alternative text. For example a Twitter icon next to a link that says “Follow us on Twitter” or a magnifying glass next to a search fields labelled “Search”.
Images that set the mood (eye candy)
The image in this blog post is decorative as the content would make sense without it. Although the image may set the tone for users that can see it, if that image was removed altogether, the content and its meaning would remain fully understood.
The ‘Featured Image’ in WordPress is often this style of image.
Informative images convey a simple concept or information that can be expressed in a short phase or sentence. The text alternative should convey the meaning or content that is displayed visually, which typically isn’t a literal description of the image.
Images used to label other information
An example would be a telephone icon next to a phone number. The Alt Text should be “Telephone” in this case:01234 567 890
Images conveying succinct information
This image would be considered an informative image because it is visually displaying the specific instructions for opening the medicine bottle pictured. The alt text is then used to explain these instructions for those who are unable to use the visual cues seen on the cap.
<img src="child-proof-cap" alt="Push the cap down and turn it counter-clockwise (from right to left)">
Images conveying an impression or emotion
This image is one that could be found on a company’s website to portray an environment that caters to families and strives to provide a fun, safe experience for its customers. Since this is a stock photo, the people shouldn’t be identified and the alt text instead conveys the image’s intended impression.
<img src="family.jpg" alt="We are family friendly".>
Images adding information to the text that accompanies it
The easy fluffy American pancakes recipe. With only 6 ingredients and 2 minutes preparation, you get a perfect fluffy texture. These pancakes make hands down the best easy breakfast or brunch recipe.
This image shows some American pancakes with summer fruits on top. It supplements the adjacent text by explaining what they can be served with:
<img src="pancakes.jpg" alt="American pancakes served with summer fruits on top.">
Making your images accessible is important for visually impaired users and search engines and this can be achieved by adding Alt Text. However, to determine the most suitable Alt Text, you need to understand the context of the image and whether it is decorative or informative.
The decision of whether an image is decorative or informative can be a tricky one and is ultimately up to the person authoring the page. It comes down to the reason why the image is being included on the page, the content contained on the page, and what makes the most sense overall.