Using Accessible Images to Make Your Website More Inclusive in 2024

Images are an integral part of any website, they’re what bring your copy and story to life. In fact, images can be used to tell a story all on their own without the need for words, but this only works if your images are understandable and accessible to all. 

There are a number of elements that need to be considered when complying with web accessibility acts such as the ADA, and images are a quick win.

By simply considering the purpose of each of your images and what would be required for any user, regardless of ability, to make sense of them, you can easily make your site more inclusive in 2024. 

ADA Compliant Images Explained

Whether you receive hundreds or even thousands of website visitors every month, a percentage of those visitors are going to be people living with disabilities. This includes visual, hearing, and cognitive disabilities.

Disabled users can’t always browse the web in the same way that everyone else would. They need to rely on assistive technology to understand the content on a web page, including images.

ADA-compliant images are both accessible and understandable when viewed with or without assistive technology, ensuring you get your message across in a clear and engaging way to all users. 

Why It’s Important to Meet Image Accessibility Standards

There’s no doubt that you’re going to use images, icons, and logos on your site to make it more visually appealing, but there are several downsides you could face if they’re not accessible.

For one, a website that doesn’t have accessible images is potentially cordoning off a large portion of the market. And when you consider that the average spending power of the disabled market is around 500 billion (1), it becomes clear why this could become a long-term problem for your business.

Then there’s your traffic. SEO is a fundamental marketing tactic, regardless of the industry you operate in and usability is one of the top indicators of an optimized website. An accessible website is one that has the potential to attract more visitors and keep them browsing, boosting your SEO efforts and leading to even more traffic and sales.

Lastly, there’s the legal side of running a website that doesn’t comply with accessibility standards. Many of today’s top countries are clamping down on non-compliance. Countless businesses have faced and are dealing with hefty fines, lawsuits, and brand damage. All of which can be avoided by making some basic updates to the elements on your site. 

How to Make Images Accessible

Now that you understand the importance of ADA-compliant images, let’s get into the specifics of how to make images accessible.

Use Alternative Text aka Alt-Text

Alternative text gives your images more context. A user that’s browsing with a screen reader will rely on alt-text to better understand what’s on a page and how an image relates to copy or headers. 

Alt-text is added using alt=”” within the <img> tag of your HTML code. Here’s an example:

<img src=”boy.png” alt=”Young boy playing with a toy train”>

There’s also the option to add a longer description to images using the longdesc attribute if necessary. These descriptions are usually added to a separate web page within the HTML that you can link to within your alternative text. Here’s an example:

<img src=”XYZ.png” alt=”XYZ. Description” longdesc=”xyz-longdesc.html”>

It also really helps to understand what kind of alt-text different types of images require.

• Simple images. Images that highlight simple concepts and information only need a short description that defines the context, content, and function of the image. 
• Decorative images. For images that are purely for decorative purposes such as a banner on a home page that doesn’t have any text, there’s no need to include alternative text. However, you should still provide an empty alt tag (alt=“ ”) so that screen readers skip over it and don’t read the image file name instead. 
• Funcational images. Any images on your site that have a function such as a download or social media button need alternative text. The text should explain what a user would achieve by clicking on the button. 
• Complex images. Graphs and infographics are examples of complex images that are designed to convey a lot of information. These are the types of images that are better suited to longer descriptions that you would link to in your alt-tag. 

Use the Right Color Contrast

Color contrast is another aspect that’s mentioned in web accessibility standards and it applies to images too. 

It’s recommended that images with copy have a color contrast ratio of at least 4:5:1 for regular-sized text and at least 3:1 for images with larger text. The 3:1 ratio also applies to icons.  

If you’re feeling unsure about whether you’re meeting the necessary color contrast requirements, you can use this free color contrast tool.

Bonus Tips and Image Accessibility Best Practices

Now that you know the basics of how to make your images accessible, here are some tips and best practices to keep in mind:

• Make sure that your alternative text is always meaningful and unique. If it won’t make a difference to the user experience, leave your alt-tag blank. 
• Alternative text should ideally not exceed 125 characters for simple images.
• Do not use terms such as “image of…” in your alt-text.
• If an image contains copy, you can repeat this information in your alt-text.
• The title of an image is not a replacement for alternative text. 

Conclusion

By keeping the alternative text in mind whenever you update a site or design a new site, you’re automatically taking measures to comply with critical accessibility standards, removing any unnecessary work later on.

To help save time, you can also create an image repository and a spreadsheet with the title and alt-text for each image that your developers can implement as they work. 

In the end, making your images ADA-compliant is a small step with a much bigger outcome, making this a worthwhile endeavor. 

FAQS