Accessible Images
Images are great. They make the webpage appealing and can explain information fast. But what if you can’t see the image? You may be blind, on a slow internet connection or a search engine trying to understand the image. Enter alt text.
Video how to write good alt text
Hi, I'm Jessica Chambers from Silktide, and I'm here today to talk about alt text. [screen reader talking]"IMAGE: A redheaded woman with a black cate in her lap" [end screen reader] 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.
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. 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 here. It has a picture over here of recycling bins. Does that picture really add anything to this post? Didn't think so. So how do you know when you need alt text?
What needs 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?
What's in the image?
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 (Screen showing paragraph text underneath a graph image).
They key here is this. You must provide the same information no matter how someone accesses your website.
What if the image is "eye candy"?
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 text="". 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. "IMAGE: Screenshot..." Here's some examples of better ways to handle alt text in your daily life.
Writing alt text for memes
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 taking the screenshot, you can cut and paste most of that easily.
Just don't interrupt me
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." [end screen reader voice].
Everyone deserves access to the internet. If you need help getting your website up to scratch, visit silktide.com
Alternative text
Alt text — also called alternative text — is a written description of the image. When writing alt text, keep it concise and focused by asking: “What is the image’s purpose on this page?”
If an image is purely decorative (just there to look nice without providing any real information or functionality), leave the Alt Text field blank.
Examples of decorative images:
- Images used to break up text. Think stock photos that don’t really relate to your content or featured blog post images.
- Icons used as eye-candy not conveying information.
Alt text best practices
What to do:
Keep it short and concise, focusing on the purpose of image in context.
Good rule of thumb: no more than ~ 150 characters.
Write alt text like a sentence, capitalize first word and end with a period.
For a chart, graph or infographic images summarize the information being conveyed.
What to avoid:
Avoid using keywords unless they belong there. Keyword stuffings harms your website’s SEO efforts.
Avoid adding the text “this is an image of…” because the screen reader already announced that it’s an image.
Avoid adding text as part of the image itself. If you do, include the image text to the alt text.
Avoid relying on AI to write alt text for you. AI tools struggle to identify the intention behind including the image on the page.
In Summary: Images enhance webpages but must be accessible to all users, including those who cannot see them. Alternative text (alt text) conveys the image’s purpose and should be concise, relevant, and avoid unnecessary details. Alt text can boost SEO as it makes it easier for search engines to understand the content on your site.