Alt Text Best Practices: How to Write Alt Text for SEO and Accessibility (With Examples)

Alt text has three readers, and most of it is written for none of them. A screen reader speaks it aloud to someone who cannot see the picture. A browser shows it when the file fails to load. A search engine indexes it to understand what the image is and whether it belongs in image results. Alt text that says "image of a chart" serves none of the three, and alt text that says "seo audit tool website audit free" serves only a keyword list nobody asked for.

WebAIM's annual survey of the top million home pages has found missing alt text on more than half of them every year it has run. It is the second most common accessibility failure on the web, after low colour contrast, and one of the easiest to fix. This guide covers what to write, when to write nothing, how it interacts with SEO, and how to do it in the tools you already use, with before-and-after examples for the image types that trip people up.

What alt text is and where it is used

Alt text is the value of the alt attribute on an <img> element:

<img src="dashboard.png" alt="Webmatik report showing a Growth Score of 83 and eight category scores">

Four things read it:

• Screen readers announce it in place of the image. Users of VoiceOver, NVDA, JAWS and TalkBack hear "image, Webmatik report showing a Growth Score of 83…" and move on.
• Browsers render it as fallback text when the image cannot load, which happens more often than designers expect on slow mobile connections.
• Search engines use it, together with the file name, caption and surrounding text, to understand the image for Google Images and as a minor signal for the page.
• AI systems that summarise or answer questions from your pages read the text of the page, alt attributes included; a described chart is a chart they can quote.

The attribute is required on every <img> in valid HTML. An image that is purely decorative gets an empty alt (alt=""), which tells assistive technology to skip it. An image with the attribute missing is different: screen readers fall back to reading the file name, so the user hears "IMG underscore 4471 dot jpg".

The one rule: describe what the image communicates, in context

Good alt text answers the question "what would a sighted reader get from this image that they would otherwise miss?" That depends on the surrounding content. The same photo of a red running shoe needs different alt text on a product page (which shoe, which colour, which angle), in a blog post about marathon training (what the photo illustrates), and as a decorative banner (nothing at all).

Two questions settle most cases:

1. What is the image's function? If it is a link or a button, describe where it goes or what it does, not what it looks like. A magnifying-glass icon inside a search button is alt="Search", not alt="magnifying glass".
2. What is its content? If it conveys information, describe the information: the subject of a photo, the takeaway of a chart, the text in a banner. If it conveys nothing the text does not already say, it is decorative.

Length follows from that. Most alt text is one sentence, rarely more than two. There is no hard character limit in modern screen readers, but the text is heard in one uninterrupted stream, so 125 characters is a sensible ceiling for anything that is not a chart. Charts and diagrams that need more get a short alt plus a longer description in the visible text or a <figcaption>.

Before and after: examples by image type

Product photos

Before	After
alt="shoe"	alt="Nike Pegasus 41 running shoe in blue and white, side view"
alt="image of product"	alt="Stainless steel 1.7-litre kettle with a black handle"
alt="IMG_2291"	alt="Oak dining table seating six, top view"

Product alt text should let someone buying by ear pick the right variant: model, colour, material, angle. Shopify, WooCommerce and most marketplaces show the alt of the first image in search results, so this is also the text Google Images shows shoppers.

Charts and graphs

Before	After
alt="chart"	alt="Line chart: mobile LCP fell from 4.1 seconds in March to 2.2 seconds in June after image compression"
alt="graph of results"	alt="Bar chart comparing bounce rate by landing page; the pricing page is highest at 76%"

State the takeaway, then the key numbers. A reader who cannot see the chart needs the conclusion the chart was placed there to make. For data-heavy charts, put the full data in a table below the image and keep the alt to the headline.

Screenshots in tutorials

Before	After
alt="screenshot"	alt="Search Console URL Inspection result reading 'URL is on Google', crawled as Googlebot smartphone"
alt="settings page"	alt="WordPress media library with the Alternative Text field highlighted"

Describe the state the screenshot proves, not the software's chrome. If the screenshot contains an error message or a value the reader must match, transcribe it.

Logos

Before	After
alt="logo"	alt="Webmatik"
alt="company logo png"	alt="Webmatik home" (when the logo links to the homepage)

The logo's function is identification, so the alt is the name. When the logo is wrapped in a link, describe the link's destination; "Webmatik home" is what the screen reader user needs to know.

Icons and buttons

Before	After
<img src="x.svg" alt="x icon"> in a close button	<button aria-label="Close"><img src="x.svg" alt=""></button>
alt="arrow" on a "next" control	alt="Next page"

For icon-only controls, put the accessible name on the control (aria-label) and make the icon decorative, or give the icon the action as its alt. Never both, or the user hears "Close, Close".

Hero and atmosphere photos

Before	After
alt="hero image"	alt="Two engineers reviewing a site audit on a laptop in a bright office"
alt="background"	alt="" (the headline already says it all)

If the photo sets a mood and the headline carries the message, it is decorative. If it shows the product or the people, one sentence of description is enough.

Images of text

Before	After
alt="banner" on a promo image reading "20% off until Friday"	alt="20% off until Friday"

Transcribe the text. Better still, put the text in HTML and use the image only for the artwork.

Team photos

Before	After
alt="team"	alt="Alex Belov, founder" (or alt="" when the caption already names them)

Complex diagrams

Short alt, long description in prose:

<figure>
  <img src="funnel.png" alt="Conversion funnel diagram; full description follows">
  <figcaption>Visitors (10,000) → sign-ups (180, 1.8%) → activated (94) → paid (12). The largest drop is between sign-up and activation.</figcaption>
</figure>

When to leave alt text empty

Use alt="" when the image adds nothing a reader would miss: dividers, spacers, purely decorative shapes, a stock photo next to text that already says what the photo shows, an icon that repeats an adjacent word ("Download ⬇"). Empty alt is a deliberate signal; it tells assistive technology "skip this", and it keeps screen reader users from wading through descriptions of ornaments.

Purely decorative artwork is often better as a CSS background-image, which has no alt at all and is ignored by everything.

Do not use empty alt on:

• product images, charts, screenshots, logos, or anything a reader might refer to;
• an image inside a link or button, unless the link has its own text or aria-label;
• the only representation of information on the page.

Alt text and SEO: what it does and does not do

Google's own guidance is short: alt text helps it understand images, it is used for Google Images, and stuffing it with keywords "results in a negative user experience and may cause your site to be seen as spam". In practice:

• A descriptive alt that naturally includes the product or topic name helps the image rank in image search, which is real traffic for products, recipes, diagrams and design work.
• The file name (oak-dining-table-top-view.jpg), the caption and the text around the image carry as much weight as the alt. Fix them together.
• Alt text will not rescue a page with thin content, and it is not a place for keywords that the page is not about.
• Google also uses alt text as a fallback anchor for linked images, so the alt of a linked image should describe the target the way link text would.

Write for the reader first; the SEO benefit follows from an honest description that happens to name what is in the picture.

How to add alt text in common tools

• WordPress: Media Library → select the image → Alternative Text field. In the block editor, select the image block and use the Alt text field in the sidebar. Changing the library value does not update images already placed in old posts; edit those blocks too.
• Shopify: Products → media → Edit alt text on each image; theme images have an Alt text field in the theme editor.
• Webflow: select the image → Settings → Alt text, or mark it Decorative.
• Squarespace: image block → Edit → Image alt text (older templates use the caption as alt; check what the theme outputs).
• Figma / design hand-off: write the alt in the design's annotations so it ships with the image, not as an afterthought.
• HTML and templates: alt on every <img>; in React and Next.js the <Image> component requires it; in Markdown, the text in square brackets is the alt: ![Line chart of LCP over six months](lcp.png).
• Email: alt text matters even more, because many clients block images by default.

How to audit alt text on your site

• Browser: in Chrome DevTools, the Accessibility panel shows an image's computed name; the Lighthouse accessibility audit lists images without alt.
• Automated checkers: axe DevTools and WAVE flag missing alt and suspicious alt (file names, "image", very long strings).
• Whole-site crawl: Screaming Frog's Images tab exports every image with its alt text, which is the fastest way to find the empty ones across hundreds of pages.
• Webmatik: the free audit's Image alt text check appears in both the SEO and Accessibility categories; it counts images on the homepage and key inner pages and lists the ones without an alt attribute. Run it at /tools/accessibility-checker.

Auditing tells you which images lack alt; it cannot tell you whether the alt is any good. Read a sample aloud. If it would sound absurd to a person on the phone, rewrite it.

Checklist

• Every <img> has an alt attribute; decorative images have alt="".
• Alt describes content or function in context, in one or two sentences.
• No "image of", "picture of", "photo of" prefixes.
• No keyword lists; no file names; no duplicate of the adjacent caption.
• Linked images describe the destination.
• Icon-only buttons have an accessible name once, on the control.
• Charts state the takeaway; complex data lives in a table or caption.
• Text in images is transcribed, or moved into HTML.
• CMS library alt and placed-image alt are both filled in.
• Re-check after every template change; a redesign often drops alt attributes silently.

Frequently asked questions

Should alt text include keywords? Only when the keyword is a plain description of the image. "Oak dining table" on a photo of an oak dining table is fine; "best oak dining table buy online cheap" is spam.

How long should alt text be? As long as it takes to describe what matters and no longer, which is usually under 125 characters. Charts and diagrams can run longer, or use a caption for the detail.

Do decorative images need alt text? They need the attribute, with an empty value: alt="". That is different from leaving it out.

Can AI write alt text for me? Image models produce a usable first draft for photos and screenshots and a poor one for charts, logos and anything where the meaning depends on context. Generate, then edit. Never publish generated alt text unread.

Does alt text affect rankings? Modestly for the page, meaningfully for image search, and not at all if the rest of the page is weak. It is a hygiene factor and an accessibility requirement first.

Fix the images on your key pages first: the homepage, product or pricing pages, and any page with a chart. Then run an audit to catch the rest.