What Is Alt Text?
Alt text, or “alternative text,” is a brief description added to an image’s HTML. It helps those using screen readers or experiencing loading issues understand the image’s content. While it also allows search engines to understand images, the primary purpose of alt text is accessibility, not SEO.
Why accessibility takes priority
- Improves user experience – Alt text is essential for visually impaired people who rely on screen readers. Meaningful descriptions create a smoother experience, helping all visitors understand your content.
- Legal and ethical standards – Accessibility regulations, like the ADA in the U.S., mandate accessible web content. Well-crafted alt text meets these requirements and demonstrates your brand’s commitment to inclusivity.
- Better SEO through accessibility -Search engines favor accessible websites with positive user experiences. While SEO shouldn’t drive your alt text strategy, well-crafted, accessible alt text can support long-term SEO performance as a natural benefit.
Writing effective alt text
Video Transcript
Visual:
Website blog post. A focus state appears and highlights the text in order, which is being read out loud.
Jessica:
Hi, I’m Jessica Chambers from Silktide, and I’m here today to talk about alt text.
Visual:
Suddenly, the focus state moves onto an image, and a robotic voice says: “IMAGE: A redheaded woman with a black cat in her lap”.
Jessica:
…What the heck was that? Not only did that interrupt me, it wasn’t particularly useful information. If anything that’s better described as: Jessica with her awesome rescue cat, Salem.
Visual:
A generic character sits at a laptop and types out various alternative text descriptions of images, such as “a red electric kettle” and “a cat sniffing a flower”.
Jessica:
The main purpose of alt text for images is to provide a description that can be read out for non-visual users. So the first thing you need to think about is whether or not that image even matters.
Visual:
The character stops typing and looks confused. We move away from the character and take a look at a local town’s council website.
Jessica:
Think about it. What if you were reading an article about the local town changing the pickup dates for recycling? Probably lots of important information in there. It has a picture over here of recycling bins. Does that picture really add anything to this post?
Visual:
The useless recycling bin image is deleted.
Jessica:
Didn’t think so.
So how do you know when you need alt text? Things to consider: Does the image do something? Is it a button? Is it a link? Is it something you interact with? All of these need alt text to describe what they are and what function they perform. Make sense?
Next up: Is there text in the image? Is it a diagram? Is it an important photo? Or even a graph? Alt text to describe the information is needed unless it’s somewhere else on the page, like a caption or this blurb over here. The key here is this. You must provide the same information no matter how someone accesses your website.
All right. What if it’s none of those things? What if it’s simply eye candy? No description needed. Include the alt attribute, but leave it blank like this:
alt=””
That way, the screen reader will skip over it. Here’s my quick rule of thumb for eye candy. WCAG calls these decorative images. Put your hand over the image on the screen. Did anything change? Do you feel like you’re missing vital information? No? Blank alt text. And don’t just skip the alt attribute. Bad things happen like the file name being read out.
Here’s some examples of better ways to handle alt text in your daily life. A simple one: “Meme of Doctor Evil making air quotes. Text reads: Disclaimer? …Right.”
This one has more nuance. “Meme of Kermit the Frog drinking tea. It usually has a prominent Lipton’s tea label, but that has been photoshopped out. The meme text reads: I think we should all switch to a version where there’s no teabag in Kermit’s Cup, but that’s none of my business.”
When you’re sharing that Tumblr post or screenshot of a tweet, type in the text. If you’ve taken the screenshot, you can cut and paste most of that easily.
Just stop interrupting me with useless information. So no “photo of a redhead with a black cat” My screen reader is going to tell me it’s an image. Tell me why it matters.
Screen reader voice:
IMAGE: Jessica with her awesome rescue cat, Salem.
Jessica:
Everyone deserves access to the internet. If you need help getting your website up to scratch, visit silktide.com
- Be descriptive and relevant – Describe the image accurately and specifically. For purely decorative images, use an empty alt attribute (
alt="") so screen readers skip over them. - Keep it concise – Aim for under 125 characters. This length provides enough detail without overwhelming users.
- Avoid keyword stuffing – Focus on the image’s meaning, not forcing in keywords. If the image complements the surrounding content, keywords will naturally fit without being forced.
- Consider context – Think about the image’s role on the page. Alt text should enhance understanding in a way that’s relevant to the page’s content.
Accessibility first, SEO second
Alt text is an accessibility feature that helps ensure everyone can engage with your content. By prioritizing accessibility, you improve user experience, meet ethical and legal standards, and may even see a positive impact on SEO as a result.