Images are often used to add context, illustrate ideas and create a more engaging experience online. However, while visuals can bring content to life for many users, they can also create barriers for others if the information they convey isn’t accessible to everyone.
That’s where alt text comes in. In this guide, we’ll explore what this simple yet powerful tool is and why it matters, who uses it, how to write it effectively, when not to use it, and answer common questions.
What is Alt Text?
Alt text, or alternative text, is a short, written description of an image that conveys its content and function. Using alt attributes is beneficial for improving accessibility and helping search engines understand your images.
It is especially important for people who rely on assistive technology like screen readers. Screen readers read the text aloud and allow blind or visually impaired users to understand the meaning of the image in the context of the page. It also serves as a fallback if an image fails to load.
From an SEO perspective, well-written alt text for images provides search engines with valuable context, making your visuals more discoverable in the search results, which supports rankings.
Learn more about how accessibility influences rankings over on our blog about how accessibility impacts SEO.
Why is Alt Text Important?
Alt attributes may seem like a minor detail, but they’re kind of a big deal, particularly when it comes to digital accessibility and visibility. It’s often said that “a picture is worth a thousand words,” but without it, that meaning can be completely lost for people using screen readers.
Other ways alt text delivers value include:
- Accessibility compliance – Meeting standards like the Web Content Accessibility guidelines is essential for avoiding legal risk and ensuring your content is inclusive. Read about the first European digital accessibility lawsuits to find out what happens when businesses fall short.
- SEO benefits – Descriptive text provides content about your images, helping search engines to index them correctly. In addition, well-written descriptions can improve how your images appear in the search results, which can drive additional traffic to your site. However, avoid keyword stuffing; search engines penalise sites that misuse alt text for SEO rather than accessibility.
- Better user experience – Some users deliberately disable images to improve page load speed or save data, while others may face loading issues. Alt text ensures that whatever the reason, users will still understand the content and don’t miss out on key information.
- Improve brand reputation – Demonstrating a commitment to accessibility shows that your organisation values inclusivity. Over time, this can strengthen trust, improve brand sentiment, and set you apart from competitors who overlook it.
Find out more about the social and commercial advantages over on our blog on the benefits of digital accessibility for your business.
Who uses alt text?
Alt text is used to help individuals who use assistive technologies understand and effectively ‘hear’ the visuals on your site. From blind or visually impaired users, these descriptions are essential for making sense of images that would otherwise be inaccessible.
In addition, it can be used to serve other audiences, including:
- Users with cognitive disabilities
- Search engines
- Users with limited connectivity
- Content creators and businesses
- Social media platforms
Inclusive user testing using assistive technology users is one of the best ways to ensure your text is working as intended. Check out our digital inclusion lab experience to see how we bring this to life.
How to write Alt Text
1. Be Descriptive, Not Redundant
Don’t just state what the image represents; describe what’s actually in it. For example, in e-commerce, an image might represent the Menswear department, but instead of writing:<img src="menswear.jpg" alt="Menswear">Write something more contextual:<img src="menswear.jpg" alt="A well-dressed man in a tailored navy suit adjusting his tie, standing in a modern office.">This provides a richer description that fits within the brand’s lifestyle aesthetic.
2. Consider the Context of the Image
Alt text should align with the surrounding content and convey emotional or contextual meaning where relevant. For example:<img src="polar-bear.jpg" alt="A polar bear standing on a shrinking ice floe, highlighting the impact of climate change on Arctic wildlife.">Similarly, for a motivational blog post:<img src="marathon.jpg" alt="A determined woman crosses the marathon finish line, arms raised in triumph, after a long and exhausting race.">This makes the image more impactful for screen reader users.
3. Keep It Concise
The recommended character limit for alt text is 125 characters. While some screen readers will read longer descriptions, others may cut off longer text. Keeping it concise ensures the most important information is conveyed quickly and consistently for all users.
4. Avoid “Image of” or “Picture of”
Screen readers already indicate that an alt attribute is for an image, so saying “Image of” or “Picture of” is redundant.
You should only mention the type if it is useful and provides further context e.g. for a chart or table.
5. Use Keywords Wisely
While alt text can support SEO, avoid keyword stuffing. Focus on writing for accessibility first. For example, writing:<img src="running-shoes.jpg" alt="Running shoes trainers sneakers fitness workout">is bad practice. Instead, provide a meaningful description:<img src="running-shoes.jpg" alt="A pair of lightweight running shoes with cushioned soles, designed for long-distance runners.">
6. Be Clear
It is important to stick to the facts when writing descriptions, so avoid any unnecessary subjective words like “beautiful”, “cute”, or ‘ugly”. These can use up valuable characters and take the focus away from the key information you are trying to convey.
7. Check spelling and grammar
Remember that alt text is content too, and errors can confuse screen readers, making it difficult for those who rely on one to follow. Always proofread your alt attributes to ensure they are accurate and are useful.
8. Remember alt text for buttons
Finally, you will also want to ensure that any buttons using images, such as a navigation arrow or search icon, have text that accurately describes their function and not their appearance.
When Not To Use Alt Text
Not all images need alt text. In fact, adding descriptions to purely decorative images can create unnecessary noise for screen readers. If an image does not need to convey meaning or serve a functional purpose, then it is best to leave the alt attribute empty.
If an image is purely decorative (e.g., background patterns, spacers), use:
<img src="decorative-pattern.jpg" alt="">
This tells screen readers to ignore it, reducing unnecessary distractions.
Examples of Decorative Images:
- Background textures (e.g., faint watermarks)
- Ornamental flourishes that do not convey meaning
- Icons that are purely aesthetic and not interactive
- Spacer images used for layout purposes
AI-Generated Alt Text: Proceed with Caution
AI-powered tools can generate alt text, and while they may seem like a quick solution, they are not always accurate. It’s essential to review and edit AI-generated descriptions to ensure correctness and relevance.
Common issues with AI-generated text include:
- Missing key details
- Misinterpreting objects
- Failing to capture the emotional context of an image
- Generating overly generic text that doesn’t provide value
- Introducing bias or stereotypes
For example, AI might output:
<img src="smiling-person.jpg" alt="Person smiling">
Instead of the more meaningful:
<img src="smiling-person.jpg" alt="A young woman laughing while holding a coffee cup in a cosy café.">
Always check and refine AI-generated alt text to maintain quality.
Background Images: A Missed Accessibility Opportunity
Some websites use background images in CSS, which cannot have alt text. This is problematic because:
- Screen readers cannot interpret background images.
- If the image conveys important meaning, it should be placed in an
<img>element with appropriate alt text. - If using CSS background images, ensure there is meaningful text content nearby that conveys the same information.
Instead of using a background image for key content, structure it like this:
<figure> <img src="team-photo.jpg" alt="A diverse team of professionals collaborating in a modern office."> <figcaption>Our team works together to create innovative solutions.</figcaption> </figure>
Using this structure allows both visual and non-visual users to benefit from the information.
How to Apply Alt Text in the <picture> Element
The <picture> element allows you to provide multiple versions of an image for different screen sizes or resolutions. However, alt text is still applied within the <img> element inside the <picture> element, like this:
<picture> <source srcset="image-large.jpg" media="(min-width: 800px)"> <source srcset="image-medium.jpg" media="(min-width: 500px)"> <img src="image-small.jpg" alt="A scenic view of rolling green hills under a golden sunset."> </picture>
Screen readers will read the alt text from the <img> tag, regardless of which image version is displayed.
Alt Text for <svg> Elements
SVGs (Scalable Vector Graphics) do not use the standard alt attribute but should still be made accessible. Use title and desc elements inside the <svg>:
<svg role="img" aria-labelledby="svgTitle svgDesc"> <title id="svgTitle">Company Logo</title> <desc id="svgDesc">A modern minimalist logo with a blue and green colour scheme.</desc> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" /> </svg>
For purely decorative SVGs, use role="presentation":
<svg role="presentation" aria-hidden="true"> <!-- Decorative content --> </svg>
Once implemented, it is important to remember that accessibility is an ongoing commitment. Our website accessibility monitoring service ensures your site stays compliant even when content evolves.
Final Thoughts
Alt text plays a crucial role in accessibility and SEO. Writing meaningful, contextual, and concise descriptions ensures all users benefit from the images on your website. Remember to always consider the context, review AI-generated alt text, and prioritise clarity over generic descriptions. Additionally, be mindful of background images, SVG accessibility, and proper <picture> element usage to ensure a fully inclusive experience.
If you’d like to learn more about accessibility best practices, explore more guides and news in our digital accessibility resource hub.
Alternatively, why not see how we’ve helped organisations put accessibility into action by checking out our work?