Go Back

1.3. Meaningful images

Introduction

"One image is worth a thousand words", they say. But what if you can't see the image?

Images make content way easier to understand for many people, and in particular for those with cognitive and learning disabilities.

However, images can create major barriers when they are not accessible. Accessible images are beneficial in many situations, especially for people with visual difficulties, but also for Search Engine Optimization (SEO).

There are multiple image concepts: informative, decorative, functional, etc… and each one can be best described by a set of particular rule.

Exercise

In the exercise page, there are 4 visual representations, but none of it is accessible.

We know every <img> should have an alt attribute, but it doesn't need to be used equally everywhere. For example, if the image doesn't add any relevant information about the content, it's better to leave an empty alt: alt="".

🎯 Goal: Add the necessary accessible descriptions to each image.

Hint: Replace the image src with an invalid url and see how the browser renders a broken image based on the alt attribute value.

Notes

Notice how a webpage renders without images: sometimes the internet is slow and it takes time to load them. Also keep in mind some people prefer to disable images loading on mobile by default to save bandwidth data - make sure the page looks good when this happens. Take this as an opportunity for developers and designers to collaborate!