Accessibilityalt="..."

Alternative Text

Definition

Alternative text (alt text) is a descriptive HTML attribute (alt="...") applied to <img> tags that provides a textual equivalent for visual imagery to assist screen readers and search crawlers.

Why It Matters

Alt text is a foundational requirement under WCAG 2.2 Success Criterion 1.1.1 (Non-text Content). When images fail to load due to poor network connectivity, alt text renders in their place. For search engines, alt text serves as the primary contextual signal for Google Images indexation and topical relevancy.

Alternative Text Syntax & Authoring Rules

Criterion / State	Requirement / Target	Status
Informative Images	Concise description of the image's functional meaning (under 125 chars)	Optimal
Decorative Images	Empty alt attribute (alt=""), hidden from screen readers	Optimal
Prohibited Prefix	Never start with 'image of' or 'picture of' (redundant to screen readers)	Avoid / Fail
Missing Alt	Screen readers announce the raw file URL, creating severe UX friction	Avoid / Fail

Practical Implementation Example

Informative graphics describe the data conveyed; decorative flourishes use empty alt='' and aria-hidden='true' so screen readers skip them cleanly.

src/components/ImageComparison.tsx

<!-- Informative product screenshot -->
<img
  src="/images/audit-scorecard.webp"
  alt="ScanWise dashboard displaying 98 SEO score and zero accessibility violations"
  width="800"
  height="450"
/>

<!-- Purely decorative background flourish -->
<img
  src="/images/gradient-blob.svg"
  alt=""
  aria-hidden="true"
/>

Automated Verification

How to Audit alt="..." in ScanWise

ScanWise crawls every image asset across your pages, identifying missing alt attributes, redundant 'image of' prefixes, generic placeholder text, and excessive keyword stuffing.

Audit your image alt text and accessibility in ScanWise

Common alt="..." Mistakes & How to Fix Them

Common alt="..." Mistakes & How to Fix Them
Mistake	Why It Hurts	The Fix
Stuffing long comma-separated keyword lists into alt text (e.g., alt='seo audit, best audit, cheap audit').	Google classifies keyword stuffing in alt text as webspam, and screen readers read the repetitive list aloud to blind users.	Write natural, human-readable descriptions that accurately communicate the graphic's information.
Omitting the alt attribute entirely instead of providing alt=''.	Missing alt causes screen readers to announce the long, unintelligible CDN image file path aloud.	Every <img> element in HTML must contain an alt attribute. If decorative, set alt=''.