How to Write Alt Text: A Complete Guide for Better Accessibility
Alt text - short for alternative text - is a written description of an image that helps communicate its meaning when the image itself can’t be seen.
Done well, alt text ensures that everyone can access and understand your content – no matter how they’re engaging with it. It plays a vital role in web accessibility, allowing screen readers to describe images aloud for users who are blind or visually impaired.
So, what makes effective alt text? How do you write descriptions that are genuinely helpful – and what should you avoid?
In this guide, we’ll break down everything you need to know about writing effective alt text. Read on to learn how to create descriptions that are clear, useful, and inclusive, while avoiding common mistakes and enhancing user experience, inclusivity and search performance.
Why is Alt Text Important?
We probably don’t need to tell you how essential it is to make digital spaces welcoming and accessible to everyone – including people with disabilities.
Alt text isn’t just a box to tick – it’s a powerful tool that helps make your content and web pages more inclusive, more user-friendly, and more discoverable. Here’s why it’s worth your time:
- It enhances accessibility.Alt text gives screen readers the information they need to describe images aloud to users with low vision or other visual impairments, helping you create content that works for everyone.
- It improves user experience. If an image doesn’t load – because of a slow connection, browser issue, or technical glitch – alt text steps in to make sure the message still gets through.
- It supports search engine optimisation (SEO). Search engines rely on alt text to understand what an image shows, which can boost your visibility in image search results and improve your page’s overall discoverability.
- It ensures consistency across platforms. Alt text helps your content stay clear and meaningful across different devices, browsers, and assistive technologies.
- It shows your commitment to inclusion. Writing alt text supports compliance with accessibility guidelines like WCAG – and sends a strong signal that your brand values equity and inclusion.
How to Write Effective Alt Text
Every image carries meaning – whether it’s decorative, functional, or informative. Effective alt text translates that meaning into words, ensuring no one misses out. Here’s how to approach it:
1. Be descriptive but concise
Image alt text should capture the heart of the image in a few carefully chosen words. The goal is to provide just enough image description to describe the part of the image that matters most. Aim for clarity over creativity – this isn’t about artistic writing, it’s about useful description.
Example: Alt=”Product photo of a tan leather backpack with a front zip pocket.”
2. Tailor alt text to context
An image’s purpose can change depending on where and how it’s used. The same image may need different alt text in different contexts. Ultimately, context shapes meaning – and your alt text should reflect that.
The surrounding content and purpose of the image should inform how it’s described. For example, a photo of a building might be identified by its name on a company’s locations page, but described by its architectural style in a blog post about sustainable design.
Before writing, ask yourself:
- Why is this image here?
- What does it add to the message?
- What should someone know if they can’t see it?
Example: A photo of a team could be:
- On a “Join Us” page: Alt=”Studio team collaborating around a table in a bright office.”
- In an article about brainstorming techniques: Alt=”Group sketching ideas on sticky notes.”
3. Think about the listening experience
Remember that alt text is read aloud by assistive technologies, often in the middle of other content. Long, rambling, or overly detailed descriptions can overwhelm listeners and screen reader users and disrupt the flow of information.
Aim for phrasing that’s natural, clear, and easy to follow when spoken. Focus on what’s essential and helpful in context, avoiding unnecessary details that might distract rather than inform.
Example: Instead of writing: “A beautiful, high-resolution photograph of a golden retriever puppy lying on a soft, blue blanket in the sunlight streaming through a window,” you could simply say: “Golden retriever puppy lying on a blanket.” Only add extra detail if it’s relevant to the content’s purpose.
4. Reflect diversity where it’s present
If your content thoughtfully includes diverse representation – whether in race, age, gender, body type, disability, or other identities – consider carrying that same awareness into your alt text.
Alt descriptions help paint an inclusive picture for those who can’t see the visuals, so it’s worth noting relevant, visible characteristics where appropriate and where they add meaningful context.
Example: Alt=”Elderly woman in a wheelchair smiling as she waters plants.”
As with all alt text, avoid assumptions about identity. Only describe visible, relevant details, and frame them in a respectful, matter-of-fact way.
Additional Tips for Writing Good Alt Text
Whether you’re adding descriptions to infographics, screenshots, or photos on your homepage or social media, following these best practices will help make your content inclusive and clear.
- Avoid “image of” or “picture of” – screen readers announce images automatically, so including phrases like “image of” can be redundant and disrupt the natural flow of information. Go straight to describing what’s important about the image.
- Use keywords naturally – keywords can help with SEO and content clarity, but they should feel natural in context. Only include them if they genuinely add clarity or relevance to the description. Overstuffing alt text with keywords makes it harder to read and less useful for those relying on screen readers.
- Be mindful of decorative images – for visuals with no informational value, use alt=””. This signals to screen readers to ignore the image, preventing unnecessary interruptions for users relying on assistive technology. Leaving decorative images without alt text or using misleading descriptions can clutter the reading experience and reduce accessibility. Always ask yourself whether an image adds meaningful information; if not, keep the alt empty.
- Don’t overlook the image file name – while file names aren’t read aloud by screen readers, they can provide useful cues for search engines and content management systems. Use clear, descriptive file names with relevant keywords where appropriate (e.g. blue-wheelchair-icon.png rather than IMG_1234.png), as this can support both accessibility and discoverability.
- Keep it under 125 characters – Long alt text can be hard for screen reader users because it’s read out in one continuous block, without natural breaks. This makes it harder to process, especially if the description of the image is wordy or overly detailed. A good rule of thumb is to keep alt text to one clear, concise sentence – around 125 characters or less. If the image needs more explanation, it’s better to include those extra details somewhere else in the content.
Common Mistakes to Avoid
Writing effective alt text is key to making digital content accessible, but even well-intentioned descriptions can miss the mark. Here are some common pitfalls to watch out for – and how to avoid them.
- Not considering reading order – A common mistake is forgetting to consider when, in the flow of the text, the alt text for an image will be read aloud. In documents like PDFs, you have control over the reading order and can choose the right moment for an image and its description to be announced. This helps screen reader users follow the content in a logical, smooth way.When adding tags to PDFs or organising digital documents, think about whether it makes sense for the image description to break up the surrounding text or if it would be clearer for it to be read at a particular point. The goal is to place it where it best supports understanding.
- Leaving alt tags till the last minute – it’s easy to treat alt text as an afterthought, but doing so risks it being rushed or overlooked entirely. Alt text should be considered a valuable part of your content design, helping convey meaning and context to everyone. Building it into your content planning process ensures it gets the attention it deserves.
- Using complex or technical language – another trap is overcomplicating alt text with jargon or overly formal phrasing. Aim for Plain English: clear, simple language that most people will understand. This makes your content more inclusive and easier to process for a wide range of users, including those using screen readers.
Alt Text for Different Types of Images
Not all visuals serve the same purpose – and neither should their alt text.
Crafting the right text alternative starts with understanding the role of each image in your content. Here’s how to ensure your descriptions are purposeful, accessible, and effective.
Data Visualisations
Graphs, charts, and diagrams communicate insights visually – trends, patterns, or processes. It’s important to provide users of screen readers with equivalent access to the information these images deliver.
What to do: Use alt text to provide a brief, high-level summary of what the visual shows and the specific insight it adds for the reader. Avoid simply repeating information already covered in the surrounding text – instead, focus on what someone looking at the visual would quickly understand that isn’t obvious from the text alone, such as an overall trend, comparison, or key takeaway.
For example, with complex images like detailed or charts, keep the alt text short and semantic. Then, provide a long description or a data table in your HTML, or include it elsewhere in the page content. This makes sure screen reader users can access both a quick summary and the full details when needed.
Example: Alt=”Flowchart illustrating the product development cycle, starting with user research and ending with product launch”
Pro tip: Don’t attempt to fit all the data into the alt text. Focus on describing what the visual shows and what insight it delivers. This ensures users relying on screen readers understand not just what’s depicted, but why it matters – providing equal access to the information’s meaning.
Informative Images
These are visuals that convey essential image content – photos, illustrations, infographics, or screenshots that support the surrounding message. They add meaning or context that isn’t fully communicated through body text or additional information alone.
What to do: Write a clear, concise text alternative that captures what the image contributes contextually. Focus on the key idea or information the image delivers, rather than describing every visual detail. Ask yourself: what does someone need to know about this image to fully grasp the message?
Example: For a jpg of a team brainstorming: Alt=”Design team sketching ideas on a whiteboard in a creative studio”
Pro tip: If the image contains readable text – like a quote, label, or statistic – include that text in the alt description. This ensures that essential information isn’t missed by people using screen readers or other assistive technologies.
Functional Images
Functional images are images that serve a purpose beyond decoration – they trigger an action or provide navigation when clicked. This includes icons, buttons, and logos that act as links. In these cases, the alt text should describe the function or destination, not the image’s appearance.
What to do: Write alt text that reflects what the image does or where it leads, as if you were explaining it out loud to someone using a screen reader. The goal is to give users equivalent information to what a sighted user would get by seeing and interacting with the image.
Examples:
- Search icon: Alt=”Search the site”
- Download button: Alt=”Download brochure”
- Company logo linking to homepage → alt=”Go to homepage”If a logo is purely decorative and doesn’t link anywhere, it should be given an empty alt attribute so it’s ignored by screen readers: Decorative company logo → alt=””
Pro tip: Focus on the outcome, not the image. If a user asks, “What happens if I click this?” – your alt text should answer that question.
How to Audit and Improve Existing Alt Text
Creating effective alt text starts with a simple step: auditing what you already have.
Tools like Google Lighthouse, or browser-based tools like Axe and WAVE, can quickly scan your site to flag images that are missing alt attributes or might not meet accessible best practices – providing a helpful snapshot of how inclusive your content is.
It’s also a good idea to pair your inclusivity review with a basic SEO audit. Look out for alt text that’s vague, repetitive, or overloaded with keywords. Focus especially on high-impact areas – like product pages, blog posts, and landing pages – where images often carry meaningful content and influence both user experience and search visibility.
Once you’ve identified issues, you’ll be in a position to go back and update your alt text with clear, relevant descriptions that reflect the image’s purpose in context. Regular audits help ensure that as your content changes, your accessibility standards – and the experience for all users – stay consistently high.
Let Your Content Do More
Writing thoughtful alt text isn’t just a technical task – it’s a chance to make your content more inclusive, engaging, and discoverable. Remember to describe what matters, skip decorative visuals, and let function guide the wording for clickable elements.
Now’s the perfect time to review your images and start making small, meaningful improvements. A few well-written descriptions can open up your content to a wider audience and create a better experience for everyone.
Need help refining your approach or auditing your site? Studio Noel offers tailored support to ensure your brand’s visuals communicate with clarity and intention. Get in touch to elevate your content and make every image count.