Alt text: SEO and accessibility guide

Overview

Alt text (the alt attribute on <img> elements) is a short textual description of an image intended primarily for accessibility and as a fallback when an image fails to load. Screen readers announce alt text to users who are blind or have low vision, and search engines use alt text as one of several textual signals about an image’s subject. Alt text helps indexation by supplying parseable text for images, but it is only one signal among many that influence rankings and visibility.

Write alt text to describe the information the image conveys to its intended audience. For purely decorative images use an empty alt attribute (<img src="..." alt="">) so screen readers skip them. For complex visuals—charts, infographics, diagrams—provide a textual summary nearby or use ARIA/HTML techniques to supply a longer description.

Step-by-step

1) Identify the image role: determine whether the image is informative, functional (e.g., a button), or decorative. Informative and functional images need descriptive alt text; decorative images should use an empty alt attribute.

2) Describe the essential content succinctly: write what a user needs to know from the image. Keep alt text concise—aim to convey the main idea in a single sentence or phrase. Example of a standard informative alt: <img src="/photos/harbor.jpg" alt="Red fishing boat moored in a rocky harbor at sunrise">.

3) Avoid keyword stuffing and redundant phrasing. Don’t prepend phrases like “image of” or “picture of”—screen readers already announce an image role. Make the text useful to a human reader rather than a search-engine crawler.

4) Handle functional images and controls: if an image is a link or button, describe the action it performs. Example: <img src="/icons/download.svg" alt="Download product data sheet">. If the control has visible text, the alt should match its purpose or be empty if the text already conveys the action.

5) Provide longer descriptions for complex images: use an adjacent caption, a linked detailed description, aria-describedby, or visible HTML text to expand on a chart or infographic. For printed-equivalent details (data tables, axis labels), include the key information in the page text.

6) Use consistent editorial rules: create brief style guidance for contributors (length targets, when to abbreviate, language rules) and apply it in templates or CMS fields so alt text is captured reliably at scale.

HTML examples

A descriptive image: <img src="https://example.com/park.jpg" alt="Child flying a red kite in a city park">. A decorative image: <img src="/decorative-divider.png" alt="">. A functional image used as a link: <a href="/download"><img src="/icons/pdf.svg" alt="Download report PDF"></a>.

Alt text verification: technical checklist

**Presence of alt attributes** — where to verify: view-source, Chrome DevTools Elements, or curl (fetch full HTML with curl without -I) — passes when every meaningful <img> has an alt attribute and decorative images use alt="".

**Rendered DOM for JS-inserted images** — where to verify: Chrome DevTools Elements (inspect the final DOM) — passes when images visible to users also include appropriate alt text in the rendered DOM.

**Accessibility audit** — where to verify: Lighthouse in Chrome DevTools or an automated accessibility tool — passes when the audit reports no missing alt text for informative images and flags only intended decorative images.

**Human-readability check** — where to verify: sample review by a content editor or a screen reader (NVDA, VoiceOver) — passes when the alt text conveys the same useful information as the visual for assistive users.

**Indexability of page** — where to verify: for your own pages use Google Search Console URL Inspection; for third-party pages use site: operator as an indication — passes when the page is crawlable (not blocked by robots.txt or noindex) and URL Inspection shows the page is known to Google. Note: site: is an indication only; URL Inspection is authoritative for pages you own.

Practical tool tips

Use curl to fetch the page HTML as a specific user agent: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Don’t use -I if you need the body. Open the saved file in a text editor or run a DOM parser to find <img> tags and their alt attributes.

Run Lighthouse (Chrome DevTools → Lighthouse) to surface common accessibility issues, and test with a screen reader (NVDA on Windows, VoiceOver on macOS) to confirm the user experience.

If you use structured data that references images (e.g., Product or Recipe schema), validate the markup with the Rich Results Test or Schema Markup Validator to ensure images referenced in JSON-LD are present and accessible.

Common problems

Missing alt text on informative images. This harms accessibility and leaves blind users without the page’s visual information.

Keyword stuffing: repeating target keywords or brand names in alt attributes in an unnatural way. This provides a poor experience and may be ignored by search engines.

Using file names or generic phrases (e.g., "image1.jpg", "picture") as alt text, which is not meaningful for assistive technology or indexing.

Relying on the title attribute instead of alt for critical information; many screen readers do not present title consistently.

Believing alt text alone controls image ranking. Alt text helps search engines understand images, but indexation and visibility depend on page context, structured data, crawlability and other signals.

If images are inserted client-side by JavaScript, authors sometimes forget to include alt attributes in the rendered DOM; always inspect the final DOM, not only server HTML.

Read the Technical SEO Guide

Frequently asked questions

Technical SEO is one part of organic growth. Building topical authority requires quality backlinks and indexed, accessible content—consider vetted marketplaces and partnerships that prioritise publisher indexability and editorial context. Build authority with quality backlinks