Part 5: Accessible Images

Part 5: Accessible Images

Visuals are such an important part of our life and are very effective in communicating our message to a reader. They help break up endless amounts of text and provide a nice balance to your site and are of great assistance to many people with differing disabilities.

However, for many people with visual, learning and cognitive impairments, images on their own can be of little benefit. Many with these types of impairments will use screen readers to interpret text and images on the screen and render them to speech or braille. When a screen reader encounters images, it cannot analyse the image and determine what it represents. What it will do is firstly try to read the alt text. If it cannot find this then it may ignore the image completely, read out the title, or read out the file name. None of which are very helpful in describing the information the image is intended to represent.

In this article, we will be discussing some of the basic things you can do to try and ensure your images are accessible to as many people as possible. In this context, images will be photographs, icons, logos, charts and graphs. In our previous articles ‘Colour Contrast‘ and ‘Accessible Hyperlinks‘ we discussed images in relation to those aspects of accessibility, which can be viewed at yo ur own leisure.

Alternative Text:

The main purpose of alternative text (alt text) is to improve accessibility. If users have visual impairments or their browsers don’t show graphics then parts of your website and products may be invisible to them. Many with cognitive, motion sensitivity and seizure disorders may not be able to tolerate images. Basically, alt text provides a textual alternative to non-text content on your web site to give other users the ability to understand your webpage.

The main and easiest way to make an image accessible is to provide an alt text to support the image. All images should have alt text, even if it is left blank. Alt text should be kept short, generally no more than 100 characters (as someone using assistive technologies will have to listen to the whole alt text). You do not need to write ‘image of…’ within the alt text as screen readers usually add this already. The alt text should be accurate, succinct and give context to the image. 

The above stock image shows a happy family. The individuals are not important however the message of a family-friendly location is the one the author is trying to portray. In this example the alt text could be “We’re family friendly.” If the image was purely to add an image to the page, then the alt text could be left empty as the image could be deemed decorative (described below).

How to add alt text:

Most platforms for building websites e.g. WordPress, contain support for adding alt text to images. When adding the image, usually in the ‘media’ section, or within a webpage, look out for a field that says ‘Alternative text’ or ‘alt text’ or something similar and enter the short description. If you can’t initially see the alt text option, try double clicking  or right clicking the image with a mouse and see if that helps. It may be the case that updating the attachement details doesn’t update the details in the image on individual web pages where the image already exists. You can check this using the method mentioned below (How to check if an image has alt text) and you may have to remove and replace each image again.

You should not use the ‘Title’ field instead of the alt text field. The title field is mainly for internal use and won’t be available for keyboard or mobile users.

The caption field is used to add additional information for all users.  Generally, caption contains extra information that is relevant to a seeing audience. An example is identifying people in a photograph. 

The description field is a little more complex in that any information entered into the ‘description’ field is only available if your image is given its own url e.g. by clicking on the image opens a separate page with a larger version of your image. Only use this for an accessible long description if using it with a plugin such as ‘WP Accessibility‘, discussed in the ‘complex’ image section below.

When deciding what alt text to use, we first need to know the purpose of the image. This may not be as straight forward as it sounds but this image decision tree can help you decide.

There are four main categories of images we are going to discuss:

• Informative: Informative images contain simple information that can be described in short sentences. It should convey the meaning and context of the image. Usually, but not always, this is not a literal description of the image. Examples are: A telephone icon would have alt text of ‘Telephone’ A PDF icon would have alt text of ‘PDF’. Or, as in the example image above, the alt text could be “Next steps wooden sign pointing to the right”.

• Functional: Functional images are designed to elicit actions as opposed to providing information. These include such things as buttons, navigation links (including navigation bar links) and interactive elements. If you have a nav bar image that says ‘Services’ then for the alt text you only need to state ‘services’ in the alt text. Similarly, for a submit button, like at the bottom of a form, use the alt text ‘submit’. If you have an arrow that takes you to the next page, then the alt text could be ‘continue to …. (describe where next page goes)’.

• Complex: These included such things as charts, graphs, tables and diagrams. These images should have a short alt description to identify the images and a long description to describe the essential information in the image, this can also be described in the surrounding text. The long description may also be provided on a separate webpage via text link adjacent to the image. Plugins such as ‘WP Accessibility‘ allow you to add a long description using the images description field (discussed above in ‘How to add alt text’), to add an accessible long description directly accessible from the image itself.

• Decorative: Some images are purely decorative and provide no important information to convey, or the information might be provided in the adjoining text. Where this is the case, the alt text should be left empty. But remember, the image should still have an empty alt text. Examples of decorative images are styling images such as borders and spacers; an image used supplementary to a link to improve appearance or increase clickable size; images identified and described by surrounding text; and illustrative but not contributing information (these are sometimes referred to as ‘eye-candy’ where they are only inserted to make the page look nicer or space text out). The WP Accessibility plugin also adds a checkbox to the media files attachment details and checking the decorative box will provide an empty alt text field.

The above image decision tree can help you decide which category your image falls in to but ultimately it is a judgment call that will depend on your reason for adding the image in the first place. More examples can be found online with the W3C Image Concepts tutorial providing a more indepth review.

Just remember the golden rule that all images should have alt text, even if it is left blank.

How to check if an image has alt text.

If you want to quickly check if an image has alt text then this can usually be done on your browser (I usually use Firefox but it should also work on Chrome and Internet Explorer etc). Simply move your mouse over the image you want to check, click right mouse button and select ‘Inspect Element’ from the dropdown menu. You should see a box open with html code for the image contained within, as per below example.

Some of the above can be a little hard to understand, but one you get the basics it is an easy process to implement whenever you add a new image. It doesn’t take much time but it can make a big difference to your readers.

Summary Points:

• Every image should have alt text.
• Alt text usually describes the information, not the picture.
• The alt text can be left empty e.g. for decorative images.
• You can check the alt text by right clicking on the image and selecting ‘Inspect Element’ or ‘View Image Info’ (may change depending on browser).
• Alt text must be accurate and succinct.
• What alt text to add is usually a judgment call.
• Use the image decision tree to help decide what alt text to use.
• If in doubt, add alt text.