The hitchhiker’s guide to Accessibility: Images
Web accessibility is a core concept to building a holistic web app that caters to all users, but oftentimes a topic that is not given enough importance due to limited exposure to accessibility concepts in the world of web development. To make the web more accessible for all users, we should be actively solving this.
Images are a major portion of content and context which is delivered to the user on the web, whether it is informative or decorative, it makes the experience for users a lot better. Making images accessible is a small part of the puzzle, but it brings a massive impact on the overall accessibility of your site and enhances the user’s understanding and interactions with the content. While adding alt text is one thing a lot of people feel will make their images accessible, it might not necessarily be the only thing we can do. The text that is added to the alt attribute usually has a wide variety based on the context of the image.
Accessible Images are helpful to users in the below cases:
- Users are using screen-reader
- Users leveraging speech input software
- Users browsing speech-enabled websites.
- Enhancing Mobile web user experience
- Search Engine Optimisations
Categories of Images
There are 7 broad categories in which images used on a webpage can be classified based on web accessibility standards:
Informative Images
Informative images by definition are images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
An example of an informative image could be a picture of a kitchen that gives users information on modern kitchen setups.
<img src="kitchen.jpg" alt="a layout for kitchen setup in modern homes" />Decorative Images
These images are added only for visual decoration and serve no other purpose on the webpage. For these images, we should provide a null text alternative (alt="") as they do not enhance the understanding of the content for the user.
For e.g. the below image is a good example of a decorative image since it adds no value in terms of helping the user understand the context better. It exists only for the visual beautification of the webpage.
- Since there is no information benefitting the user in the above-shared image example, it is a good idea to add an empty alt text for the image.
- Wherever possible we can add such images by using background-image CSS property which will keep it out of the markup completely and also get skipped by the screen-reader which is expected here.
- The empty alt tag should explicitly be present in the
<img />tag as if this is missed the screen-reader might read out the filename for the image which will add to the user’s confusion. - We can use the WAI-ARIA
role="presentation"attribute to ensure screen readers skip these images, however, this is not accepted as a standard across all screen-readers and it is advised to be sure to pair it with the empty alt attribute.
Functional Images
These images serve a function instead of just adding visual information to the webpage, e.g. certain images/icons can be used as a button to submit a form or an actionable item on click of which a certain action is performed. The text alternative for a functional image should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
An example:
<a href="https://www.smallcase.com">
<img src="img/smallcase-logo.png" alt="Smallcase Home" />
</a>- Alt-text should describe the action that will happen when you click the image, rather than what the image is.
- Alt-text is crucial for understanding the functionality of the content being displayed.
- The image can be categorized as functional because the logo acts as a link to redirect back to the homepage. Since it is an action that includes redirection to home, it would make sense to include the word
Homein the alt text to inform the users that this link brings you back to the home page when clicked.
Images of Text
Readable text is sometimes presented within an image. This pattern should be avoided as long as the image is not a logo as it repeats information and is not the optimal usage of having images. The Alt text for images of text should be the text in the image.
<img src="img/fully-secure.jpg" alt="Fully Secure and compliant" />
<img src="img/investor-count.jpg" alt="5,00,000 investors trust us" />- If the image being used is simple text and can be represented using text on the webpage which is styled using CSS to match the image, this approach is much more beneficial as it's easier to work with text and it does not get pixelated on different user zoom levels.
Complex Images
such as graphs and diagrams: To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative.
- This type of image requires two separate descriptions: one for the image itself and a longer description explaining the data and information being portrayed by the image.
- The basic description for the image goes inside the image’s alt attribute.
- The HTML5
<figure>and<figcaption>elements can be used to group images and link semantically. Addingrole="group"to the figure maintains backward compatibility with web browsers that don’t support the native semantics of the<figure>element. - The WAI-ARIA
aria-describedbyattribute can be used to link to a description of the image that is provided anywhere on the same web page, in a similar way to the longdesc approach. The value of the attribute is theidof the element that provides the long description.
Group of Images
If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
<div>How was the audio and video?
<img src="img/star-regular.svg" alt="Rating: 0 out of 5 stars" />
<img src="img/star-regular.svg" alt="" />
<img src="img/star-regular.svg" alt="" />
<img src="img/star-regular.svg" alt="" />
<img src="img/star-regular.svg" alt="" />
</div>
Image Maps
The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.
Deciding an Alt Text for your image
Categorization of an image as a decorative or informative image is a tricky one. Usually what helps in making this call is the reason for which the image is being added to the webpage and does it enhance the user’s understanding of the webpage’s content. For a quick overview on deciding which category a particular image fits into, see the alt Decision Tree.
Final Suggestions:
- The alt text should be a short sentence at maximum, if the description is longer than this, it would be better to use one of the long description approaches to provide information about the image.
- Always run the image alt texts through a screen-reader to test if everything is working as expected.
- Punctuation should be carefully looked at while adding alt-text as it would enable users to understand the information better on screen readers.
- Avoid using words like “image”, “icon”, or “picture” in the alt text as these words provide redundant information to the user since the screenreader would already tell the user that they are on an image element and then read the alt value. It is always better to have the context of the image than specifying “image” in the alt-text.
- When using SVGs in an image tag, it is better to use
aria-labelledbyattribute to label the SVG.<svg aria-labelledby=”title1">
<title id=”title1">Settings</title> [other svg code] </svg> - Logo images with text are exempt from some of the accessibility requirements. For instance, there is no minimum contrast requirement.
References:
- General Tips and Tricks on WCAG
- https://www.w3.org/WAI/tutorials/images/
