1.3. Meaningful images

Introduction

"One image is worth a thousand words", they say.

Images help us to understand better some content. They are especially useful for people with cognitive and learning disabilities.

However, inaccessible images can create major barriers for people with visual disabilities. Accessible images will benefit not only them but also the Search Engine Optimization (SEO) of a website.

We know that every <img> must have an alt attribute. However, it doesn't need to be used equally everywhere. In the same way, there are different images concepts, we can also describe them in different ways. For example, if the image doesn't add any relevant information about the content, we can just leave an empty alt: alt="".

Exercise

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

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

Tip 1: Alt text - Replace the image src with an invalid URL and see how the browser renders a broken image. Does the alt text make sense?

Bonus

In slow internet connections, images take time to load. Some people even prefer to disable images to save bandwidth data.

🎯 Goal: Edit the CSS to ensure the page looks good when images don't load.

🍀 Tip #1: In your daily job, take this as an opportunity for developers and designers to collaborate!

🍀 Tip #2: In real projects, we can block all images, like this:

1. In Chrome, go to DevTools > 3 dots (top right) > More tools > "Network request blocking".
2. A new container in the bottom is opened.
3. Add a new blocker: Click "+" button, write *.jpg and save it.
4. Refresh the page and voilá. The images are not loaded!

Further reading

• Images concepts
• Alt usage - Decision tree
• Writing great alt text: Emotion matters
• Pros and cons of alt text
• Use CSS to detect invalid alt

WCAG Success Criterion

• WCAG 1.1.1 Non-text content - Level A
• WCAG 1.4.5 Images of text - Level AA

Exercise takeaways