Having effective alt text (alternative text) is an important element in achieving good web accessibility. It’s purpose is to describe images, allowing people who cannot see the image to understand what it represents.
When to include Alt Text
The Web Content Accessibility Guidelines (WCAG) state that all non-text content that is presented to users should have alternative text (alt text) that conveys the same information or function as the non-text content. This includes images, graphics, videos, and audio files.
So, if an image is part of the content on your website or application and conveys information that is important to the user, it should have alt text. For example, if you have an e-commerce website that sells clothing and you have product images, those images should have alt text that describes the product, its color, size, and any important details.
In general, any image that is more than just decorative should have alt text. Decorative images, such as page dividers or purely aesthetic background images, can have empty alt text (alt=””) or be hidden from assistive technologies using appropriate coding techniques, as they do not convey any meaningful information or function.
For more information read our guide on the different types of images requiring alt text.
How to add Alt Text
To add alt text to an image, follow these steps:
- Open your CMS and find the image you want to add alt text to, either of the page or your CMS image directory.
- Click on the image and choose “Edit Alt Text” or “Alt Text” (depending on the program you’re using)
- In the Alt Text panel, enter a brief and accurate description of the image. This should convey the information or message conveyed by the image.
- If the image is decorative or doesn’t add any value to the content, mark it as decorative or leave the alt text field empty.
- Save the changes to apply the alt text to the image.
Code Example
For those working in code here is an example:
<img src=”laptop-screen.jpg” alt=”HP Laptop showing HP Logo“ width=”400″ height=”500″>
Decorative Images
An image should be marked as decorative when it doesn’t add any meaningful information to the content, and its purpose is solely to improve the visual appeal of the page or document. For example, an image of a border, a background texture, or a separator line that serves as a visual element to divide sections of content.
In such cases, marking the image as decorative will indicate to screen readers that the image doesn’t require a description, which will help users with visual impairments to navigate the content more efficiently. It also reduces the amount of unnecessary information that a user has to listen to when using a screen reader, which can improve their user experience.
Code Example
In order to mark an image as decorative, all you need to do is leave an empty ALT attribute. To do this, simply provide ALT text of “” leaving the description blank.
<img src=”laptop-screen.jpg” alt=”“ width=”400″ height=”500″>
Tips on how to write good Alt Text:
Be descriptive: Your alt text should accurately describe the image. Be sure to include details that would be relevant to someone who cannot see the image, such as colours, shapes, and any text that appears in the image.
Keep it concise
While it’s important to be descriptive, you also want to keep your alt text as concise as possible. Aim for 125 characters or less. This will make it easier for people using screen readers to quickly understand the content of the image.
Avoid using “image of” or “picture of”
This is a common mistake people make when writing alt text. While it’s important to indicate that the alt text is describing an image, you don’t need to explicitly say “image of” or “picture of”. For example, instead of saying “picture of a cat”, you could simply say “a cat”.
Use Keywords
If the image is part of a larger piece of content, such as a blog post or article, use keywords that relate to the content. This will help with search engine optimisation and make the content more discoverable.
Be Mindful of Context
Alt text should provide context for the image, so be sure to consider the surrounding content. For example, if there is text in the image, make sure to include that text in the alt text.
Don’t stuff alt text with Keywords
While using keywords is important for SEO, don’t stuff your alt text with too many keywords. This can be seen as spammy and will not be helpful for users who are relying on the alt text to understand the image.
Remember, alt text is important for making your website more accessible. By following these tips, you can ensure that your alt text is descriptive, concise, and provides context for the image.
