How to Write Image Alt Text for Accessibility: A Practical Guide

How to write image alt text for accessibility: a concise summary

Alt text lets people using screen readers understand images. Write alt text that describes the purpose of the image in the page context. This guide gives a clear, step-by-step method, ready-to-use templates, and checks you can use in a CMS.

What alt text is and why it matters

Alt text is the string in an images alt attribute. Assistive technology reads that string when the image cannot be seen. WCAG lists this need under Success Criterion 1.1.1 Non-text Content at Level A. Good alt text preserves meaning and function for users who cannot view images.

When to write alt text and what type you need

Decide by asking what the image does on the page. Use the rule below.

Decision rule: include, leave empty, or provide a long description

• Informative image: provide descriptive alt text. This includes photos that carry content or meaning.
• Functional image: label the function in the alt text. This includes images used as links or buttons.
• Decorative image: use an empty alt attribute alt=“” so screen readers skip it.
• Complex image (chart, infographic, map): give a short alt summary and link to a longer description nearby. Use aria-describedby to point to the full description if needed.

Step-by-step: how to write alt text

1. Identify the images purpose in the page context. Ask: does the reader need this to understand the content?
2. If the image is decorative, set alt=“”. Do not leave alt empty by accident in CMS fields where the image is meaningful.
3. For informative images, name the essential content first. Describe what a sighted person must know to get the same information.
4. For functional images, describe the function. Use text that matches the visible link or button label when possible.
5. Keep it brief. Aim for one short sentence or under 125 characters for most images.
6. Do not start with “image of” or “picture of” unless the type of media matters. Screen readers announce images already.
7. If detail matters, provide a short alt plus a linked long description or aria-describedby reference to a visible caption or separate page.
8. Include essential text shown in the image. If that text is already present on the page, do not repeat it in alt text.

Examples: bad alt vs good alt

Image type	Bad alt text	Good alt text	Notes
Product photo	image123.jpg	Blue ceramic mug, 350ml, with white handle	Focus on identifying features that help a buyer.
Decorative flourish	Swirly graphic	(empty)	Use alt=“” so screen readers skip it.
Chart showing sales	Sales chart	Bar chart: Q1 sales increased 18% compared with Q4. See data table below.	Give a short summary and link to full data or caption.
Linked logo	logo.png	Company home page	Alt should state the link purpose. Match visible link text where possible.
Infographic with many data points	infographic_final.png	Overview of our recycling process. Full description below (or link to page).	Provide a short summary and direct users to the full description.

How to handle complex images: charts, infographics and maps

Complex images often need more than a short alt. Use a short alt that states the main takeaway. Then add a long description nearby in visible text or use aria-describedby to reference it.

Patterns to use

• Short alt with the headline insight. Example: “Line chart: temperature rose 2C from 2010 to 2020.”
• Visible caption with the data table under the image. Screen readers can read the caption and table.
• aria-describedby that points to a detailed section on the same page. Ensure the target element is visible and descriptive.

HTML snippets you can copy

Basic informative image

<img src=“mug.jpg” alt=“Blue ceramic mug, 350ml, with white handle”>

Decorative image

<img src=“decorative.svg” alt=“”>

Functional image used as a link

<a href=“/”><img src=“logo.png” alt=“Company home page”></a>

Complex image with aria-describedby

<img src=“sales-chart.png” alt=“Q1 sales increased 18% versus Q4” aria-describedby=“chart-desc”> <div id=“chart-desc”>Full data: Q1 sales 1,180 units; Q4 sales 1,000 units. Table below shows monthly figures.</div>

Length, wording and SEO

Keep alt text concise. Many screen reader users prefer short descriptions. A common practical target is 125 characters or fewer. Use keywords only when they match the image purpose. Avoid stuffing keywords for search rank if they do not describe the image.

CMS and workflow tips

• Make alt text a required field in your CMS for image uploads that are not decorative.
• Use templates for product images so descriptions are consistent across variants.
• Train content editors with the decision rule and two sample alt texts for each product type.
• Automated checks: add an automated audit to flag images with missing alt or alt identical to filename.

Testing alt text

Do these quick checks.

• Turn off images in the browser. Read page content for missing image context.
• Use a screen reader. Try VoiceOver on macOS or iOS, NVDA on Windows, TalkBack on Android.
• Run an automated tool such as axe, WAVE, or Lighthouse for missing alt attributes and other issues.
• Keyboard-only navigation. Verify functional images used as links or buttons are reachable and announced correctly.

Common mistakes to avoid

• Leaving meaningful images without alt text.
• Filling alt with the filename or the word “image”.
• Repeating nearby visible text verbatim in alt text when it adds no value.
• Using alt to hide important content from sighted users.
• Keyword stuffing alt text for SEO only.

Decision checklist for every image

• Purpose: Is this image informative, functional, decorative, or complex?
• If informative: Can the essential info be captured in one short sentence?
• If functional: Does the alt match the link or button text?
• If decorative: Is alt set to “” so assistive tech ignores it?
• If complex: Is there a visible long description, table, or aria-describedby?
• Test with a screen reader and a quick automated audit.

Ready-to-use alt text templates

• Product photo: “[Colour] [product name], [key feature], [size if relevant]”
• Profile photo: “Headshot of [Name], [role]”
• Logo used as link: “[Organisation name] home page”
• Button with icon: “[Action verb]” (for example “Search”)
• Hero image with caption: “[Short summary of scene]. See caption for detail.”
• Chart: “[Type of chart]: [main insight]. See data below.”
• Infographic: “Summary of topic. Full description provided in the text below.”
• Screenshot: “Screenshot showing [software name] with [feature] highlighted”
• Map: “Map showing [area] and [main marker or route]. See details below.”
• Decorative image: alt=“”

Final note

Alt text is about purpose and context. When you follow the decision rule and test with real screen readers, your site gains clarity for all users. Use the checklist and templates in your content workflow and audit regularly.