You’re scrolling through a website, and there’s a broken image icon staring back at you. No context, no caption – just an empty box where something meaningful was supposed to be. Now imagine this is every image for you, every time you visit a website. This isn’t just a technical glitch; it’s a reality for millions of people who rely on screen readers.
In the UK, over 2 million people are living with sight loss, many of whom rely on assistive technologies like screen readers to access digital content according to figures by Scope. That number being around 4.4 million in the US based on estimates. This story isn’t about the missing picture – it’s about the missing words. Alt text is often treated as an afterthought, but its absence can create a silent barrier that excludes some users entirely and hinders your content being both understood and located.
What Is Alt Text?
Alt text (short for alternative text) is a written description of an image embedded in the HTML code. Its primary purpose is to describe the image to people who cannot see it, whether due to visual impairment or technical issues. For example:
Alt text: “A steaming cup of coffee on a wooden table.”
When someone using a screen reader encounters this image, the alt text provides context that would otherwise be lost. It ensures they can “see” what the image represents, enhancing their experience and keeping them fully engaged with the content. This is just a simple image of a cup of coffee but could be far more crucial information.
Imagine someone who is blind using a screen reader to follow a recipe on a blog. The blog includes a step-by-step guide with accompanying images for each stage of the cooking process. The text may say something along the lines of chop the vegetables and then show an example image. For an image showing chopped vegetables, the alt text might say:
“Finely chopped carrots, celery, and onions on a wooden cutting board.”
The additional context of Finely chopped in this case providing additional context on how to prepare the vegetables and carrots, celery, and onions providing context on the vegetables being used. We could improve it farther with clearer text instructions of course but this is just a simple example. Without Alt text the screen reader encounters an image but only reads out its file name, e.g., “IMG_12345.jpg.” which provides no value and leaving the user guessing or relying solely on the surrounding text.
Alt Text Beyond Accessibility
If you think alt text only benefits people with visual impairments, think again. Search engines also “read” alt text to understand images, which means proper alt text can boost your website’s SEO. Without it, your beautiful visuals remain invisible to search algorithms, potentially costing you visibility and traffic.
Alt text also plays a critical role in slow-loading environments, where the description serves as a stand-in while images take their time to appear. Whether it’s a poor internet connection or an older device, alt text bridges the gap between intention and experience.
Alt text can improve user experience in mobile browsing. Many users, especially in rural or less-developed regions, access the web through mobile networks that can have variable speeds. For these users, images may fail to load quickly or at all. If your website relies heavily on visual content without proper descriptions, it leaves them with a broken experience. Alt text ensures that even in these conditions, the user still understands what the image represents, preserving context and keeping them engaged with your site’s content. This can ultimately lead to better retention rates and more positive interactions with your site.
What About Decorative Images?
This is where that bait title comes into play. What about purely decorative images? Should we provide alt text for every single element? Not quite. For images that add no meaningful context (such as decorative flourishes or background patterns) best practice is to include an empty alt attribute (alt=””). This tells screen readers to skip over the image entirely, avoiding unnecessary interruptions like “image1234.jpg.”
This is not Alt text in itself hence saying we sort of include it for every image. Where information is not needed, it does not need supplied and in this case the information we don’t need is the file name. This small detail may seem insignificant, but it respects the user’s time and attention, ensuring their experience is smooth and focused.
The Bigger Picture
Adding alt text is not just about compliance with accessibility standards. It’s about building a digital world where everyone can participate equally. It’s about recognising that the web isn’t just a collection of code and images; it’s a space for connection, learning, and opportunity.
When we take the time to craft meaningful alt text or intentionally leave it blank when appropriate we aren’t just meeting a technical requirement. We’re showing respect for our users, valuing inclusion, and making the internet a little bit better for everyone.
The next time you upload an image, remember what you type into that alt tag matters. Those words might be the key that unlocks the web for someone else.