Documentation

Table of Contents

Using these 6 alt text best practices helps support real accessibility

Alt text is one of the most overlooked, but most impactful, elements of digital accessibility.

Whether you’re designing a website, writing a blog, or scheduling a social post, adding thoughtful, descriptive alt text makes a real difference to people who rely on screen readers or other assistive tech. 

But writing effective alt text isn’t always straightforward. What do you say about a chart? Do product images need detail? When is it better to leave alt text blank?

In this guide, we’ll cover everything you need to know about alt text best practices – with real alt text examples. In just a few moments, you’ll be better placed to write image descriptions that improve accessibility, boost SEO, and meet key compliance standards.

What is alt text, and why is it important?

Alt text, short for “alternative text”,  is a written description of an image. It usually appears in the HTML code as a visible line of text next to the image, or as a longer description on a separate page accessed through a link. 

Alt text is incredibly important for people who live with visual impairment – it provides essential context that would otherwise be lost to them. It turns visuals into words, making content more inclusive and easier to navigate.

How alt text improves accessibility and SEO

Alt text was originally created to improve digital accessibility, and that remains its most important role today. For blind and low-vision users, screen readers use alt text to describe images aloud, helping them navigate and understand visual content.

But alt text doesn’t only serve assistive technology. When written well, it also contributes to better SEO.

That’s because search engines can’t “see” images. They depend on alt text, alongside file names, to interpret what an image shows. This means relevant alt text, which uses keywords naturally, can improve how your pages rank in image search results.

6 best practices for writing effective alt text

The best alt text is specific, concise, and relevant to the image’s purpose. Here are a few practical tips to guide your writing:

  1. Keep it short, but meaningful – Aim for a maximum of one or two clear sentences. You don’t need to include every visual detail, just the elements that matter most.
  2. Describe the image in context – Why is this image here? What information is it adding? Your alt text should reflect the role the image plays on the page.
  3. Avoid phrases like “image of” or “picture of” – Screen readers already announce that it’s an image, so these intros only create clutter.
  4. Use keywords naturally – Never stuff your alt text with keywords. If the image supports your SEO goals, include relevant terms.
  5. Don’t add alt text to decorative images – If an image on your page is just there for decorative purposes, it should have a null alt attribute (alt=””), so that screen readers skip it altogether.
  6. Add a full stop – Adding a full stop to the end of the alt text helps differentiate it from the rest of the page’s text. It also improves the reading experience for those using screen readers, adding a natural pause.  

By following these best practices, you’ll create alt text that is genuinely helpful for users. To see these principles in action, take a look at the alt text examples below. 

Alt text examples for different types of images

What might surprise you is that not all alt text should be written the same way.

Why? Because different types of images call for different approaches. 

But whether you’re working with graphs, social media content, or product photos, the goal is always the same: describe what matters, in a way that is connected to the context of the image and to support user experience.

Let’s examine how to approach alt copy for each type of image: 

Alt text for informative images

As the name suggests, informative images convey key information that isn’t written elsewhere on the page.

Example:

[Image:] A laptop screen showing a user’s privacy settings dashboard.

Alt text: Privacy settings dashboard showing toggles for location tracking, marketing preferences, and data sharing.

This description focuses on what’s visible and relevant to the context of the image, without overexplaining.

Alt text for decorative images

Decorative images don’t add meaningful content. They’re there purely for aesthetics and should be skipped by screen readers and other assistive technology. 

Example:

[Image:] A background pattern of blue waves.

Alt text: alt=”” (empty)

Use a null alt attribute, like in the example above, so assistive technology can ignore the image and move on.

Alt text for charts and graphs

Charts and graphs convey complex data, which can seem difficult to condense into alt text. 

The answer? Your alt text should simply summarize the key takeaway from the chart or graph.

Example:

[Image:] A bar chart showing cookie banner engagement rates by design.

Alt text: Bar chart showing that banners with fewer choices have higher consent rates than banners with granular options.

If there’s more detail, you might want to consider providing a longer description in text nearby or linking to a text alternative.

Alt text for product images

Product images should be described with key visual details that help users understand what’s being sold.

Example:

[Image:] A pair of wireless headphones on a white background.

Alt text: Black over-ear wireless headphones with cushioned ear pads and adjustable headband.

This is especially important for e-commerce accessibility and usability.

Alt text for social media images

Social media is no exception when it comes to writing alt text. When sharing visual content on social channels, include concise but descriptive alt text that describes the image in a way that’s related to the post’s context. 

Example:

[Image:] A team gathered around a whiteboard during a meeting.

Alt text: Marketing team brainstorming campaign ideas around a whiteboard covered in sticky notes.

Most platforms, like X, LinkedIn, and Instagram, now support alt text, so there’s no excuse to skip it – ensuring everyone in the community can access your content. 

Common mistakes to avoid when writing alt text

Even with the best intentions, it’s easy to get alt text wrong. Here are some of the most common pitfalls – and how to avoid them:

1. Writing overly vague descriptions

Alt text like “Image of a graph” or “Photo of a product” offers no useful context. Be specific. What does the graph show? What kind of product is it?

2. Making descriptions too long

Alt text isn’t the place for full-blown essays. Overly detailed descriptions can overwhelm screen reader users and can interrupt flow. Keep it short and sweet – just a few words will work, or two clear, focused sentences at most.

3. Stuffing in keywords

Alt text that’s crammed with keywords and has no real description doesn’t help users or search engines. Remember to focus on clarity first – when the alt text is genuinely useful, you can rest assured that the SEO benefits will follow soon enough. 

4. Repeating surrounding content

If the image caption or nearby text already says the same thing, there’s no need to repeat it in the alt text. Just focus on what the image itself adds.

5. Ignoring functional images

Buttons, icons, and links with images should have descriptive alt text that explains their function, such as “Submit form” or “Download PDF”,  not just “arrow” or “icon.”

6. Forgetting about mobile and social

If you’re managing content across different platforms, make sure the alt text works consistently across the board, including on mobiles and social posts. Accessibility shouldn’t stop at your website.

By avoiding these common mistakes and using the right tools, you’ll get closer to building a more accessible, user-friendly experience.

How to test and optimize alt text for accessibility

Once you’ve written alt text, how do you know it’s working? 

It’s important to test how well your alt text works in practice, both for screen readers and for overall user experience. 

Here’s how to test and improve your image descriptions:

1. Use a screen reader

Try navigating your site with a screen reader like NVDA (Windows) or VoiceOver (macOS). This gives you direct insight into how your alt text is read aloud and whether it makes sense in context.

2. Turn off images in your browser

Disabling images in your browser is a quick way to preview the alt text that appears in place of each visual. It can be a good way to discover descriptions that feel confusing or redundant and need editing.

3. Check for accessibility errors

Use automated tools to help uncover any errors that may affect screen readers, along with other accessibility issues.  

4. Ask real users for feedback

If you have access to testers who use assistive technology, their feedback is the best thing you can get. Ask whether your alt text feels helpful, concise, and consistent – and adjust based on their suggestions. 

5. Review your SEO performance

Once you’ve optimized your alt text, monitor image-related search traffic in Google Search Console. If your images start showing up in relevant results, you’ll know your descriptions are working for search engines too.

Optimizing alt text is an ongoing process, but following these steps will help you stay on track and build a more inclusive digital experience.

Alt text and WCAG compliance guidelines

If you’re aiming to meet accessibility standards, alt text isn’t optional. The Web Content Accessibility Guidelines (WCAG) lay out clear expectations for how images should be handled to support users with visual impairments, including:

  • All non-text content must have a text alternative – This is a Level A requirement under WCAG 2.1 (Success Criterion 1.1.1). If an image conveys information, it must include a meaningful text alternative.
  • Decorative images should be ignored by assistive tech – If an image doesn’t convey content (such as borders, patterns, or visual embellishments), it should include an empty alt attribute: alt=”” so screen readers skip it entirely, reducing noise.

Meeting these standards helps you create a more inclusive site. And it also could help reduce legal risk, especially for organizations operating in areas where accessibility laws, like the European Accessibility Act, are enforced. 

Small details, big impact

Alt text might be a small detail – but it has a big impact.

It makes your content more inclusive. It helps you meet accessibility standards. It boosts SEO. 

But most importantly, it improves the experience for real people who rely on assistive technology every day. 

By following best practices and avoiding the common mistakes outlined above, you can start making accessibility a natural part of your content process.

Want help fixing accessibility gaps on your website?

Learn more about Take a look at our WayWidget and help more people access your site.