When we talk about web accessibility, images are often one of the first things that come to mind. And for good reason! Images can be a huge barrier for users who rely on screen readers or have cognitive disabilities if they aren’t handled correctly. Today, we’re diving into the cornerstone of image accessibility: WCAG Success Criterion 1.1.1, specifically focusing on simple images.
What is WCAG SC 1.1.1?
In a nutshell, WCAG 1.1.1, also known as “Non-text Content,” mandates that all non-text content (like images, audio, and video) that presents information must have a text alternative. This text alternative serves the same purpose as the non-text content.
Simple Images: The Basics
A simple image is an image that conveys a straightforward piece of information or is primarily decorative but still requires some description. Think of things like:
A company logo
A photograph of a single object (e.g., a product shot)
An icon that represents a clear action (e.g., a “print” icon)
A headshot of a person
How to Make Simple Images Accessible (the alt attribute is your friend!)
For simple images, the primary way to provide a text alternative is through the alt attribute in your HTML tag.
Here’s how to do it effectively:
Be Concise and Descriptive: Your alt text should accurately and briefly describe the image’s content and purpose.
Bad Example: 
(Too vague)
Better Example: 
Avoid Redundancy: Don’t start your alt text with “image of” or “picture of.” Screen readers already announce that it’s an image.
Bad Example: 
Better Example:
Consider the Context: Always think about why the image is on the page. What information does it convey in that specific context?
If an image is a link, the alt text should describe the destination of the link.
If the image has text within it: The alt text should include that text. This is crucial for accessibility!
Why is this important?
Screen Reader Users: They rely entirely on alt text to understand what an image depicts. Without it, they miss crucial information.
Search Engine Optimization (SEO): Search engines use alt text to understand the content of your images, which can improve your site’s visibility.
Broken Images: If an image fails to load, the alt text will be displayed in its place, still conveying the intended message.
Making simple images accessible with good alt text is one of the easiest and most impactful things you can do to improve your website’s inclusivity. It’s a fundamental step towards creating a web that works for everyone.
Stay tuned for our next posts where we’ll delve into the complexities of accessible complex images and the nuances of decorative images!