Get A Free Accessibility Check of your Website
Download NowAccessible images make your website inclusive for all. They ensure web users with visual impairments, who often need to use assistive technologies online, can engage with your content. If you’re concerned about whether or not your website images are accessible, you might feel unsure about what to do next.
Fortunately, it’s a relatively easy issue to resolve. In this guide, we’ll take you through what you need to know.
Understanding the basics of image accessibility
So, what makes an image accessible? Ultimately, it means that all individuals, including those with visual impairments, must be able to “see” the content of your images.
To achieve this, you’ll need to meet recognized accessibility standards like the Web Content Accessibility Guidelines (WCAG). These globally-recognized standards are underpinned by several key principles, known by the acronym “POUR”.
You’ll need to apply each of these POUR principles to images and other content on your site:
- Perceivable: As mentioned above, you’ll need to make sure all web users can “see” your images. That doesn’t just mean visuals, though. For visually impaired people, it can also include “seeing” with a screen reader.
- Operable: Web users need to be able to engage with your website images. For example, it must be responsive so it can be seen on all screens, and if it’s a linked image, the destination must be made clear in the alt text.
- Understandable: If the image contains text, font and color choices must be easy to read. Wherever possible, text should be embedded in the HTML and CSS, rather than images.
- Robust: Technologies update frequently. Your website images should be robust enough to remain accessible for years to come. For example, make sure you’re using up-to-date image formats, such as PNGs.
Writing descriptive image alt text
You should always aim for the image alt text to be descriptive, so that web users get a clear understanding of the content.
Considering context
Consider the related context of the image. What will visitors miss out on if they are unable to visually “see” the image? You’ll need to convey that to them in words, so they are not left with an incomplete understanding. For example, let’s say there’s a website that showcases hotels in different locations. On this site, image alt text that simply reads “hotel” will be extremely unhelpful. In this scenario, you’d need to provide more detail, such as “front entrance of Premier Inn, Kensington.”
Make sure to clarify any relevant contextual information. So, if the image contains famous or significant individuals, ensure you include their name and role. For example, rather than “musician,” write “Tina Turner performing live in Rio de Janeiro, 1988.”
Focus on important information
There’s no need to overload your description with unnecessary details, though. Alt text should be as concise as possible. When in doubt, consider whether a particular detail adds vital information for the web visitor, or if it’s unimportant.
If you already have hundreds of images on your website, the prospect of finding and resolving issues can be overwhelming. Web accessibility checker tools can automatically scan your website for potential violations, saving you time. Plus, they also include AI-powered fixes to quickly resolve missing alt text issues.
Get a free automated accessibility check of your websites homepage. This will identify and highlight any compliance issues on your website. Followed by recommendations on how to implement the necessary changes to make your website more accessible.
When to use empty alternative text
Not all images require alt text. If the content is purely decorative or is already established in the surrounding text, there’s no need to repeat it in the alt text. In these situations, you should use the include alt=”” in the HTML alt attribute. In other words, leave the alt attribute completely empty. This alerts screen readers and instructs them to skip the alt text, preventing further issues.
The rules for complex images
More complex images, such as charts, diagrams, infographics, and maps, have some additional requirements.
| Long descriptions | Detailed infographics cannot be conveyed clearly with alt text alone. You should aim to write a short alt text description that summarizes the content, but also add a long description with the core relevant information from the graphic. This description can be added beneath the image or, for particularly long descriptions, through a linked document or page, which should be labelled clearly (e.g., “View infographic transcript”). |
| Data tables | Rather than charts and tables displayed in an image, aim to add any tables directly into the HTML, as this is fully compatible with assistive technologies. |
| Use <figure> and <figcaption> tags | These allow you to group an image together with a caption. <figure> connects the image and textual description, whilst within the <figcaption> element, you’ll add the caption itself. Using these specific elements helps screen readers to understand how the image elements relate to each other. |
Is it accessible to use text in images?
In most cases, no. You should generally only use text within images when absolutely necessary. This is important for accessibility for several reasons:
- Difficult to edit: Whilst textual content can be analysed and tweaked quickly by automated tools, like website accessibility checkers. Meanwhile, text within images is harder to analyse, and would require using editing software to make changes. This also makes this content challenging to update or adjust to different languages.
- Cannot be read by assistive technology: People with visual impairments may use assistive technology like screen readers to read out the text content on your website. Screen readers can read alt text, but not text within the images themselves.
There are some exceptions, such as for logos or decorative text. Wherever possible, it’s best to format website text with HTML and CSS, rather than embedding it within an image.
When you do need to include text within an image, make sure to include similar text within the alt text. If the textual content is especially long, such as in an infographic, add it into a separate document beneath the image.
How does color and contrast impact the accessibility of images
Color plays an integral role in digital image accessibility. For example, any images or graphics need to have suitable color contrast against the website background. Poor color contrast can make it difficult for people with visibility impairments to distinguish between website elements. According to WCAG, normal-sized text should have a contrast ratio of at least 4.5:1.
But remember, different web users will have varying requirements. Digital tools can be helpful here. For example, Recite Me’s Assistive Toolbar enables website visitors to edit the color schemes on your site to suit their needs.
Although color is often frequently used to convey information online, such as purple for previously visited links, this isn’t always accessible. Avoid using color as the sole means of conveying important information on your site. For example, include a text label (e.g., “success,” “error”) or symbols (e.g., check mark) for alerts and notifications.
Accessible Image Formats and Responsive Design
Aside from the content within your images, choosing the right image format is essential. JPEG and PNG are widely used online, making them a suitably accessible option for most images.
For more complex images with text or logos, aim to use SVG instead. This is the best format for scaling your images, as it can remain clear even when zoomed in.
Website images should be responsive rather than fixed-size, wherever possible. This ensures images resize to fit the screen, whether users visit the site on a mobile or desktop device.
Our 40-page Digital Accessibility & Inclusion Toolkit helps businesses break down online barriers and make a real impact. It offers practical advice on all aspects of digital accessibility, from writing an accessibility statement to accessible website tips and inclusive hiring.
Conclusion: Follow image accessibility best practices
Accessible images are integral to inclusive website design. By understanding the principles, you improve its usability and make the internet a fairer place. On top of this, you’re also enhancing user experience, improving SEO, and reducing legal risks.
Not sure where to start? Conduct a free website accessibility audit to pinpoint issues with your images and other digital content.
How to create accessible images FAQs
Looking for a recap or quick summary? Here are a few of our most frequently asked questions to help you get to grips with the essentials:
What is image accessibility?
As it sounds, image accessibility refers to the accessibility of images on your website. For example, visually impaired web users can’t “see” your images, so you’ll need to provide alternatives that assistive technologies can pick up on, including by adding detailed alt text describing the content of the image.
How to create accessible images?
There are several steps to creating accessible images, including:
- Adding detailed alt text to images using the alt attribute
- Including empty alt text (i.e., alt=””) for decorative images
- Providing long descriptions and data tables for complex images
- Choose suitable image formats, such as SVG, JPEG or PNG
What needs to be added to an image to make it accessible?
To make images accessible, you need to add alt text. Specifically:
- Include details about the content of the image
- Don’t forget to clarify relevant contextual information
- Keep it short and to the point, with no unnecessary details
- Add an empty alt=”” attribute for decorative images
How do you describe an image for accessibility?
You can add descriptive alt text to images using the alt attribute. You’ll need to provide enough detail and context to help visually impaired people fully understand the content of the image. So, rather than “Woman cooking,” you could write, “Housewife takes out bundt cake from a stove”.
