What is the Alt Attribute?

Alt attribute: where alt text lives in markup

The alt attribute is not a ranking trick—it is a required piece of HTML on <img> elements that holds image alt text for browsers and assistive technologies. When developers say “missing alt,” they mean the attribute is absent or misused—not that marketing forgot a content brief.

On-page SEO audits must separate writing alt text from shipping it in the alt attribute on production URLs.

Alt attribute syntax

<img src="/images/crawl-report.webp"
     alt="Dashboard chart showing crawl requests increasing after sitemap update"
     width="800"
     height="450">

Alt attribute vs image alt text

CMS databases often store alt text that never reaches the alt attribute because lazy-loading components omit it—SEO field filled, attribute empty. Crawlers read HTML, not CMS drafts.

Alt attribute vs other image attributes

vs image title (title attribute)

title provides advisory tooltips—optional, easy to omit on touch devices. Alt attribute is the primary accessible name. Do not duplicate long strings into title thinking it substitutes for alt.

vs image caption (figcaption)

Captions are visible elements in figure markup. Alt attribute text should not always repeat captions—decorative redundancy annoys screen reader users.

vs image filename

Filename is the src path string—not the alt attribute. Renaming files does not replace alt attribute content except as a weak fallback when alt is missing.

Alt attribute on functional images

Submit buttons implemented as images need alt describing action:

<input type="image" src="/icons/search.svg" alt="Search">

Icon fonts and SVGs inlined need equivalent text—aria-label or title on parent—not always img alt, but same conceptual job.

Alt attribute and linked images

When a wraps img, the alt attribute on the image names the link:

<a href="/glossary/crawl-budget/">
  <img src="/thumb/crawl.webp" alt="Crawl budget glossary">
</a>

Link’s accessible name comes from img alt—parallel to anchor text on text links.

Alt attribute implementation pitfalls

Example: React img without alt prop

Component <img src={url} /> ships without alt attribute. Content team entered alt in headless CMS—users see broken accessibility; Google parses empty name.

Example: correct decorative alt attribute

Border <img src="divider.svg" alt=""> — attribute present, intentionally empty.

Alt attribute and responsive images

srcset and <picture> variants still use one alt attribute on the img element—it applies to the chosen source. Do not vary alt per resolution; vary src, not meaning.

Alt attribute validation in QA

Automated checks:

• Every img has alt attribute (including empty)
• Informative templates never use alt="" unless classified decorative
• Alt attribute length not extreme (>200 chars flagged for review)
• No HTML entities breaking attribute quotes

Manual: view rendered HTML source, not only inspector accessibility tree after JS hydration.

Alt attribute myths

• Myth: “Alt attribute is optional for SEO.” Required for valid HTML and accessibility.
• Myth: “Leave alt off so Google uses filename.” Browsers already fallback to filename—uncontrolled and poor UX.
• Myth: “Duplicate alt attribute and figcaption always.” Often redundant; write each for its role.
• Myth: “Alt attribute on lazy-loaded images doesn’t matter.” If in DOM, it matters when parsed.

Alt attribute and image optimization

Compressed WebP assets still need alt attributes. Faster images do not replace semantic markup. Lazy-loading must preserve alt when swapping src.

How Crawlox validates alt attributes

Crawlox parses raw HTML for each crawled URL, reporting img tags missing the alt attribute, empty alt on templates that should be informative, and divergence between alt attribute value and visible image caption patterns. Pair technical alt attribute fixes with image alt text content improvements—implementation and wording together satisfy on-page SEO and accessibility requirements.

Alt attribute in component libraries

Shared React, Vue, or Web Components should require alt as a prop on image components—TypeScript optional chaining should not make alt optional on informative variants. Lint rules in CI can fail builds when img appears in templates without alt, catching alt attribute gaps before deploy.

Alt attribute regression testing

Snapshot tests on critical templates should assert informative images retain alt attributes after refactors. Frontend rewrites often break CMS field mapping silently—automated HTML snapshots catch missing alt attribute faster than quarterly manual audits.