When it comes to images on a website, most people tend not to think too much about them. This, unfortunately, is not the case for the visually impaired or for users with cognitive or learning disabilities.
Web Accessibility requires images loaded onto a website to have text alternatives that describe the information or function represented by them. But there is much more to the accessibility of an image than just its “alt text”.
In this blog, we will demonstrate how to provide appropriate text alternatives based on the purpose of the image according to the Web Accessibility Initiative.
Let’s get started!
According to the W3C, there are 7 types of images to consider for Accessibility:
An informative image conveys a simple concept or piece of information represented on the page and is typically pictures, photos and illustrations. In this case, the text alternative should be at least a short description conveying the essential information presented by the image.
Decorative images provide no information to the content or understanding of a page and are purely decorative. Whether to treat it as decorative or informative is completely up to the author.
Images may be decorative when they are:
- Visual styling such as borders, spacers, and corners;
- Supplementary to link text to improve its appearance or increase the clickable area;
- Illustrative of adjacent text but not contributing information (“eye-candy”);
- Identified and described by surrounding text.
If an image is confirmed as decorative, a null (empty) the alt text should be provided (alt=””) so that it can be ignored by assistive technologies, such as screen readers.
A functional image initiates an action rather than sharing information. These images can also enhance buttons, links and other functional elements. The text alternative should convey the purpose of the image, rather than its description.
For example; a printer icon used to represent the print function or a button to submit a form.
Readable text is often presented within an image. In general, this should be avoided as images tend to lose resolution and pixelate when resized and should only ever be used when a particular visual representation (like a logo) is required. However, if they are used, the text must match the words exactly as in the image.
According to the W3C, “it is good design practice to use actual text styled with CSS rather than image-based text presentation. Genuine text is much more flexible than images as it can be resized without losing clarity, and background and text colours can be modified to suit the reading preferences of users.”
As the name suggests, Complex Images contain substantial information that cannot be communicated in a short sentence. They typically include:
- graphs and charts, including flow charts and organisational charts;
- diagrams and illustrations where the page text relies on the user being able to understand the image;
- maps showing locations or other information such as weather systems.
When assigning alt attributes to these images they predominantly have two parts, namely the short description to identify the image and a longer description that gives the essential information conveyed by the image.
There are 4 approaches to creating long descriptions for complex images, namely:
Approach 1: A text link to the long description adjacent to the image
Approach 2: Describing the location of the long description in the alt attribute
Approach 3: Structurally associating the image and its adjacent long description (HTML5)
Approach 4: Providing a link to the long description via LONGDESC
In some cases, a group of images can convey a sole piece of information. A perfect example of this would be five stars next to one another to indicate a rating. Here, the text alternative for one image will communicate the information for the entire group.
In other cases, a group of images will need a more robust explanation. This will entail the entire group having a basic description as well as each image having a description of its own to explain its content.
Image maps contain multiple clickable regions and also require a two-part description.
These should include text alternatives that are needed on both the <img> element itself (to communicate context) as well as on each of the <area> elements that describe the content of the linked page.
So, why is it so important to make your images Accessible?
Images and graphics make content more pleasing to the eye and easier to understand for many people, particularly those with cognitive and learning disabilities.
They serve as cues used by people with visual impairments, including people with low vision, to orient themselves in the content.
Should you not consider accessibility; the very images used to help users with cognitive disabilities can become a communication barrier.
Accessible Images are useful for:
- Screen readers: The text alternative can be read aloud or rendered as Braille
- Speech input software: Users can put the focus onto a button or linked image with a single voice command
- Speech-enabled websites: The text alternative can be read aloud
- Mobile web users: Images can be turned off, especially for data-roaming
- Search engine optimisation: Images become indexable by search engines
Conclusion
While there is a lot to consider when it comes to Accessibility and Images, it does not have to be as overwhelming as it seems. The use of a simple checklist can assist and guide you towards becoming WCAG compliant.
We at Little Forest support your business with automated accessibility monitoring, helping you improve the web experience for your users whilst avoiding costly lawsuits and fines. We work with you to understand the compliance of your site and use the reports to help you put together an accessibility strategy.
The Little Forest platform gives you instant reports on how your pages perform against all major standards, including; helping you get those tricky images accessible. We are continuously upgrading our systems to be in line with the latest legal requirements helping you stay in line with the latest guidelines.
Is your business compliant with the latest Web Accessibility guidelines? Get in touch and speak to the Little Forest team today!
