The ALT Tag – What is It and Why Do Images Online Need Them?
Image ALT tags, or alternative text, might seem like a small detail in web development, but their importance is enormous. In fact, an image without an ALT tag is not valid HTML – it needn’t have content (but why wouldn’t it?) but it must be there. These short descriptions attached to images serve multiple critical purposes, enhancing the overall accessibility, usability, and searchability of your website.
ALT Text What? I Cannot See It? Where is It?
If you were a screen reader you wouldn’t see this:
You’d see something like this:
<img src="/assets/images/234fwer.jpg">Code language: HTML, XML (xml)Without the ability to interpret that image, who would know what “234fwe” means?
An ALT tag sorts that out.
<img src="/assets/images/234fwer.jpg" alt="An adorable kitten">Code language: HTML, XML (xml)Improved SEO
Search engines can’t really “see” images; they rely on ALT tags to understand and index them. Well-written ALT tags help your images rank in search results, driving more traffic to your website. For example, if you have an image of a “golden retriever puppy playing in the park”, using a descriptive ALT tag makes it easier for search engines to serve your content to users searching for similar terms.
Google and other AI bots are getting better at reading images. But why not spare them the effort, give them what they’re looking for and influence what goes into their index?
Accessibility for All Users
ALT tags are a lifeline for users who rely on screen readers to navigate the web. For those who are visually impaired, these descriptions provide context about the images on a page, ensuring they can fully engage with your content. A meaningful ALT tag bridges the gap, making your site more inclusive and user-friendly.
Accessibility is one of the principal factors that make up a Lighthouse report. Poor accessibility will detract from your search engine rankings.
Fallback for Broken Images
Sometimes, images fail to load due to technical issues or poor connections. ALT text acts as a fallback, displaying a description of the missing image. This keeps the user experience intact and prevents confusion about what the image was meant to convey.
It may not look pretty, but at least a user can wee what you are trying to show.
Legal and Ethical Compliance
ALT tags are not just a best practice; they are a legal requirement in some places. Accessibility laws, such as the Americans with Disabilities Act (ADA) and Web Content Accessibility Guidelines (WCAG), mandate the use of ALT tags for web compliance. Beyond legalities, including ALT text reflects a commitment to building an equitable digital space.
Best Practices for ALT Tags
- Be Descriptive but Concise: Clearly describe the content and function of the image in a few words.
- Don’t Add Too Much: Screen readers already understand that they are processing an image tag. Leave out terms like “Picture of …”.
- Avoid Keywords Stuffing: Write naturally and prioritize clarity over SEO tricks.
- Skip Non-Informative Images: Decorative images don’t need detailed alt tags—use
alt=""to indicate they can be skipped by screen readers.
By taking the time to craft useful ALT tags, you’re not just optimising your site for search engines or avoiding legal pitfalls – you’re contributing to a more inclusive and engaging internet for everyone.
But I Have So Many Images! Surely They Don’t All Need Alt Tags?
As we’ve said above, purely decorative images don’t need content (but, again, why wouldn’t you?). But in any kind of e-commerce store, every product needs a clear, accurate and unique ALT tag, regardless of your catalogue size. If you have a product catalogue of 30,000 plus products, this can be a major undertaking. You need to get into the habit of adding ALT text as you add your products.
If it’s too late, if you already have an enormous catalogue online, we can help. There are automations we can run, code we can add and workarounds we can implement, It may hurt less than than you think and it will help your site perform.