How to Write Alt Text: A Practical Guide with Examples

Alt text (alternative text) is a short written description of an image that screen readers read aloud and that browsers show if the image fails to load. Knowing how to write alt text well comes down to one question: what does this image communicate in this context? Write that, briefly, and skip the rest. Good alt text helps blind and low-vision visitors, satisfies WCAG success criterion 1.1.1 (Non-text Content), and gives search engines a clearer picture of your images.

This guide gives you simple rules, lots of before-and-after examples, and instructions for adding alt text in WordPress, Shopify, Wix and plain HTML.

Why alt text matters

• Accessibility: screen reader users hear the alt text instead of seeing the image. With none, they may hear a file name like "DSC_0042.jpg" or nothing at all.
• Compliance: WCAG 1.1.1 is a Level A requirement, so it is part of every common legal standard, from ADA compliance in the US to Indian and European rules.
• SEO: search engines use alt text as one signal to understand image content, which helps image search.
• Resilience: if an image fails to load on a slow connection, the alt text appears in its place.

How to write alt text: the core rules

1. Describe the purpose, not just the pixels. The same photo may need different alt text on different pages.
2. Be concise. Aim for a sentence or less. Most good alt text is under about 125 characters, though that is a guideline, not a rule.
3. Don't start with "image of" or "picture of". Screen readers already announce it as an image.
4. Include text that appears in the image. If the image says "50% off", the alt text should too.
5. Use empty alt for decorative images. alt="" tells screen readers to skip it.
6. Don't stuff keywords. Write for people; a natural description is also best for SEO.
7. End with a full stop if you like — it makes some screen readers pause naturally.

Alt text examples by image type

Product images

The visitor needs to know what the product looks like, because they can't see it.

• Weak: alt="shoe"
• Weak: alt="best running shoes cheap buy online running shoe"
• Good: alt="Blue women's running shoe with white sole, side view"

For a gallery, describe what each extra photo adds: "Same shoe, top view showing breathable mesh upper."

Logos

If a logo is just a logo, use the company name: alt="Openwise". If the logo is a link to the home page, describe the destination: alt="Openwise home". Avoid alt="logo" on its own.

Linked images and icon buttons

When an image is the only content of a link or button, the alt text becomes its accessible name. Describe the action, not the icon.

If you use an SVG or icon font instead of an image, give the button an accessible name with visible text or aria-label, for example <button aria-label="Search">.

Charts and graphs

Short alt text should give the key takeaway, and the full data should be available nearby as a table or text.

• Weak: alt="chart"
• Good: alt="Bar chart: monthly sign-ups grew from 120 in January to 310 in June. Full data in the table below."

Decorative images

Background textures, dividers, stock photos that add mood but no information, and images whose meaning is already in nearby text are decorative. Use alt="" (empty, with no space). Do not remove the alt attribute entirely — without it, some screen readers read the file name.

Complex images

Infographics, maps, diagrams and flowcharts carry too much information for one sentence. Use a short alt that identifies the image, then provide the full description in the page content, in a caption, or on a linked page.

• Example: alt="Flowchart of the refund process. Steps described below."

Images of text

Wherever possible, use real text styled with CSS instead of text baked into an image — it scales, translates and stays sharp (WCAG 1.4.5). When you must use an image of text, such as a banner or quote graphic, the alt text should contain the same words.

• Banner reading "Diwali Sale: 40% off all plans until 5 November": alt="Diwali Sale: 40% off all plans until 5 November"

Photos of people

Describe what is relevant. On a team page, the name and role are usually enough: alt="Priya Sharma, Head of Design". In a news story, the action matters: alt="Volunteers planting trees along a river bank".

Screenshots

In a tutorial, describe what the reader needs to notice: alt="WordPress media library with the Alternative Text field highlighted on the right."

Common alt text mistakes

• Using the file name: alt="IMG_2041.jpg".
• Repeating the caption word for word, so screen reader users hear it twice.
• Writing "image of a..." or "photo of...".
• Leaving alt text blank on an image that is the only content of a link.
• Writing paragraphs of description for a simple image.
• Adding the same generic alt text to every image on a page.
• Using alt text for keyword stuffing.

Adding alt text in popular platforms

HTML

<img src="running-shoe.jpg" alt="Blue women's running shoe with white sole, side view">
<img src="divider.png" alt="">

WordPress

In the block editor, select the image block and fill in Alternative Text in the block settings sidebar. You can also set it in Media, Library by opening an image and editing the Alternative Text field. Note that text set in the library may not update images already placed in posts, so check older content. More tips are in our WordPress accessibility guide.

Shopify

For product images, open the product in the admin, click the image, and add alt text in the media editor. For images in theme sections, look for an alt text field in the theme editor, or edit it in Content, Files. See our Shopify accessibility guide for theme-specific advice.

Wix

Click the image in the editor, open its settings, and fill in the field for describing what's in the image (the alt text). Exact labels change between Wix editor versions, so look for "alt text" or "What's in the image?".

How to find missing alt text

Checking hundreds of images by hand is slow. An automated scan flags images with missing alt attributes, empty alt on linked images and suspicious values like file names. The Openwise free accessibility checker does this as part of its WCAG checks. Automation can't judge whether alt text is accurate, though, so review important images yourself — or listen with a screen reader using our screen reader testing guide.

An accessibility widget's image description feature can help in some cases, but it doesn't replace alt text written by someone who understands the image's purpose.

Frequently asked questions

How long should alt text be?

As short as possible while still conveying the image's purpose — usually one short sentence. Around 125 characters is a common guideline, but there is no strict WCAG limit. For complex images, keep the alt short and put the detailed description in the page.

Should every image have alt text?

Every image should have an alt attribute, but not every image needs a description. Decorative images should use an empty alt="" so screen readers skip them. Informative and functional images need meaningful alt text.

Does alt text help SEO?

Yes. Search engines use alt text to understand images, which can help them appear in image search. Write natural, descriptive alt text for people first; keyword stuffing doesn't help users and isn't a good SEO practice.

What is the difference between alt text and a caption?

Alt text is read by screen readers in place of the image and is usually hidden from sighted users. A caption is visible to everyone. If a caption already fully describes the image, the alt text can be shorter or complementary rather than a repeat.

Can AI write alt text for me?

AI tools can produce a starting draft, but they don't know why the image is on your page. Always review AI-generated alt text for accuracy and context, especially for products, charts and functional images.

Conclusion

Learning how to write alt text is one of the easiest accessibility wins: describe the purpose, keep it short, use empty alt for decoration and name the action for icon buttons. Start by finding the gaps — scan your site with our free accessibility checker and fix the missing alt text first.