Images play a significant role on the web as the internet becomes more profoundly visual. The prevalence of images serves multiple purposes ranging from information delivery, engagement and attention grabbing, to branding and aesthetics.
However, it’s just as important to ensure that both users and search engines can access and understand this content, especially users with visual impairment. Alt text (short for Alternative text) provides a textual description that acts as an alternative to visual elements, especially images, enabling screen readers to interpret them, offering context when images fail to load, and helping search engines better understand page content.
In this guide, we will walk you through everything you need to know about alt texts, from what they are to how to write them effectively, using concrete examples.
Key takeaways:
- Alt text is a written description added to images in HTML that helps screen readers, displays when images fail to load, and gives search engines context. While people may say “alt tag,” the correct term is the alt attribute, and the alt text is the actual description you write.
- Alt text primarily improves accessibility by describing images for people who can’t see them, such as screen reader users or when images fail to load. It also helps search engines understand and index images, which can improve visibility in image search results.
- Not every image needs alt text. Purely decorative images should use an empty alt attribute (
alt="") so screen readers skip them. Decorative images include visual styling elements, redundant icons, or “eye-candy” that adds no new information beyond nearby text.
In this article:
- What is an Alt Text?
- Why Alt Texts Matter: Accessibility, SEO, and User Experience
- How to Write Good Alt Text (With Examples)
- Common Alt Text Mistakes and Fixes
- When to Leave Alt Text Empty
- Automate Alt Text with Cloudinary
What is an Alt Text?
An alt text is essentially a piece of descriptive text that you add to an image in your website’s HTML code. It serves as a written description of an image that displays if the image fails to load or is read aloud by screen-reading software. It’s also used to provide context for search engines during image search.
It’s often called a few different names, which can be confusing. So let’s clarify that:
- Alt Text: This is the actual descriptive text you write. For example, “A red ball floating on a stock tank pool in a backyard”. This is the most common term people use.
- Alt Attribute: This is the technical HTML term. It’s the alt part of the image code:
<img src="puppy.jpg" alt="A red ball floating on a stock tank pool in a backyard">. - Alt Tag: This is a bit of a misnomer, as alt is an attribute of the
<img>tag, not a tag itself. However, “alt tag” is widely used and understood to mean the whole concept.
Here’s an example showing how alt text is used in HTML:
<img
src="https://images.unsplash.com/photo-1761839258568-fd466a93f68b?q=80&w=800&auto=format&fit=crop"
alt="A family cooking together in a bright kitchen"
/>
Why Alt Texts Matter: Accessibility, SEO, and User Experience
Fundamentally, alt text exists to improve accessibility by communicating what an image depicts to people who cannot see it. This limitation may be due to different reasons such as visual impairments, the use of screen readers, images being disabled in the browser, or slow or unreliable internet connections that prevent images from loading properly.
Imagine browsing a website where every image is just a blank space when it doesn’t load–you’d be left guessing what is missing, which can frustrate your experience on that website.
For many people who are visually impaired and use screen readers, that’s what the web is like when images don’t have alt text. Alt text helps by letting screen readers read a short description of the image, so the person still knows what’s there. In fact, in many places it’s required by accessibility rules, like the Web Content Accessibility Guidelines (WCAG), to help make the internet usable for everyone.
Beyond accessibility, alt text plays a big role in search engine optimization (SEO). Search engines can’t “see” images the way we do; they rely on text clues to understand and index them.
By including relevant keywords in alt text, you help your images show up in Google Image searches, driving more traffic to your site. For example, if you’re running an ecommerce store, a well-written alt text like could make your products rank at the top when people search for those terms.
How to Write Good Alt Text (With Examples)
Writing effective alt text is not rocket science. However, it takes some best practices and guidelines to write useful alt text that benefits both users and search engines. Here are some tips and considerations you should always keep in mind when writing alt text.
- Be Specific: A good alt text should be specific, descriptive, and briefly summarize the image’s purpose.
- Bad:
alt="a sleeping dog" - Good:
alt="Senior golden retriever sleeping peacefully on a plush grey dog bed."
- Bad:
- Don’t start with “Image of…” or “Picture of…”: Screen readers already announce it’s an image, so get straight to the description.
- Keep it (relatively) short: Aim for around 125 characters or less and not more than one or two sentences, as screen readers may cut off longer text.
- Include text that’s part of the image: If your image contains important text, like in an infographic, that text must be in the alt description.
- Example:
alt="Flowchart titled 'How to Make Coffee' with steps: 1. Grind beans, 2. Boil water, 3. Pour over filter"
- Example:
- Use keywords naturally: Avoid writing alt texts solely for SEO purposes and include your target keyword only if it fits the description and is relevant.
- Forced & Bad:
alt="organic coffee beans best organic coffee buy organic coffee online" - Natural & Good:
alt="Freshly roasted organic Ethiopian coffee beans spilling from a burlap sack."
- Forced & Bad:
Now that you know the rules of writing good alt text, let’s do some exercise.
Which of the following alt texts best describe the image above?
A: A group of schoolchildren with backpacks crossing a road during the day.
B: A group of young people walking across a road.
C: A group of people crossing a road in sunny weather, carrying colorful bags. Some are wearing hats and a few are holding hands.
If your chosen answer is A, excellent!
Here’s another one.
Which of the following options best describe the image above?
A: A plate of pizza.
B: Top view of a pepperoni pizza placed beside a cup of yellow juice on a table and utensils.
C: A delicious pepperoni pizza with melted cheese and mixed vegetables on a plate, placed on a black table beside a yellow drink, tasty pizza and juice drink delicious food for dinner.
If you chose B, virtual high-five!
Now that you know what a good alt text looks like and how to write one, let’s look at some common mistakes people make when writing alt text and how to fix them.
Common Alt Text Mistakes and Fixes
Even with the best intentions, it’s easy to make mistakes when adding alt text. Some of the most common errors people make with alt text, and how to fix them, are highlighted below.
- Leaving alt text blank for important images, which leaves screen reader users in the dark and misses SEO opportunities. The fix for this is to always add descriptive text for meaningful images; if you’re unsure, ask yourself if the page would lose information without it.
- Writing alt text that is too vague, such as “a Chanel bag” or “ a pink bag” This doesn’t help anyone. Instead, be specific: describe the subject and its purpose, such as “A pink Chanel bag containing phones and wallet.”
- Including phrases like “image of” or “picture of.” Screen readers already announce images, so this becomes redundant. Focus on the content of the image instead of labeling it as an image.
- Forgetting to update alt text when images change. If you swap a photo, revise the description too. Tools like website audits or plugins can help spot these issues, ensuring your site stays polished and accessible.
When to Leave Alt Text Empty
While alt texts are important, there are scenarios when an image may not need one. If an image is purely for visual decoration (like a stylistic divider, a background pattern, or a redundant icon next to text), it should have a null (empty) alt attribute: alt="". This tells the screen reader to skip over it entirely, which is less annoying for the user.
A common example is decorative images. Decorative images are commonly used to make websites more visually attractive. According to the W3 Consortium, an image is regarded as decorative if it has any of the following properties:
- Visual styling such as borders, spacers, and corners;
- Supplementary to link text to improve its appearance or increase the clickable area;
- Illustrative of adjacent text but not contributing information (“eye-candy”);
- Identified and described by surrounding text.
Here’s an example:
For something like the above image, which is mostly used for aesthetics, leaving alt="" is the best description for it. The key here is context: A general rule is that if removing the image wouldn’t change the page’s message, skip the text. This practice enhances accessibility by reducing noise, making your site easier to navigate for everyone.
To learn more about empty alt texts, the W3 Consortium has a guide on adding alt text to decorative images.
Automate Alt Text with Cloudinary
Imagine you’re building a social website like Pinterest or Unsplash, which would typically contain millions of images. Adding alt text to images manually in this case can be time-consuming and nearly impossible to scale as your media library grows.
A better approach to take is automation. Cloudinary is a cloud-based platform for image and video management that offers more efficient ways to automate alt-text generation, saving you effort while boosting accessibility and SEO.
Through Cloudinary’s add-ons and third-party APIs, which use computer vision and machine-learning algorithms for image recognition and classification, you can automatically analyze an image’s content and generate meaningful, human-readable alt text for it.
Some of the Cloudinary add-ons you can use for auto generation of alt text include:
- Amazon Rekognition Auto Tagging
- Amazon Rekognition Celebrity Detection
- Google Auto Tagging
- Google Automation Video Tagging
- Imagga Auto Tagging
Wrapping Up
Generating meaningful alt text for images to meet accessibility and SEO standards takes practice. However, by committing to the tips and best practices outlined in this article, you can get better at writing alt text that is clear, concise, and genuinely helpful to users.
And as we’ve said, manually generating alt text might not be best in every scenario, especially when a large number of images is involved. This makes Cloudinary a better alternative that simplifies the process through automation.
Ready to transform your image alt text management? Explore Cloudinary to automate your alt text and create an SEO-friendly website. Try it today to experience how effortless image management should be.
Frequently Asked Questions
Should I include keywords in alt text?
Yes, but only when they make sense. Alt text should first serve accessibility, not SEO. If a keyword naturally fits into an honest description of the image, include it. The alt text should focus on accurately describing what’s important in the image and shouldn’t annoy users who rely on screen readers.
How is alt text different from image titles or captions?
Alt text is written primarily for screen readers and appears in place of the image if it doesn’t load. It describes the image’s content and purpose. Captions, on the other hand, are visible text that appears below or near the image and may add context, commentary, or extra information. Image titles are optional metadata that can show as a tooltip on hover but are not a replacement for alt text.
How long should alt text be?
Good alt text is usually short; often between 5 and 15 words and not more than 2 sentences. It should be long enough to communicate the essential information but not so long that it becomes burdensome to listen to with a screen reader.
