a11y.img missing alt

a11y.img-missing-alt

Rule ID: a11y.img-missing-alt Severity: ERROR Category: a11y Target Standards: W3C Web Content Accessibility Guidelines (WCAG) 2.2 Success Criterion 1.1.1 (Non-text Content), HTML Living Standard Section 4.8.4.4 (Requirements for providing alternative text), Astro Assets Image & Picture Component Specification

---

1. Overview & Core Invariant

Enforces required 'alt' attribute on Astro , , and native elements (WCAG 1.1.1)

Core Invariant:

"All visual image elements (, , ) must provide an 'alt' attribute or explicit accessibility role."

---

2. Technical Grounding & Engine Realities

Alternative text ('alt') conveys the purpose, meaning, or narrative of visual images to blind and low-vision users utilizing screen readers, and displays as fallback text when network requests fail or images are blocked.

When developers omit the 'alt' attribute entirely:

1. Screen Reader Verbosity Failure: Screen readers resort to reciting the entire raw file URL (e.g. '/assets/images/hero_banner_v2_final_compressed.webp'), creating auditory confusion.
2. SEO & Fallback Degradation: Search crawlers and low-bandwidth users receive no descriptive context.
3. Astro Component Blindspot: Standard ESLint jsx-a11y rules only inspect literal tags, failing to flag Astro and components from 'astro:assets'.

Charites validates all image tags, including Astro framework asset components, permitting alt="" exclusively for decorative graphics.

---

3. Vulnerability & Risk Taxonomy

Risk Vector	Severity	Impact
Total Information Loss for Screen Readers	HIGH	Blind users cannot understand the visual information or interactive purpose of images.
Broken Network Fallback	MEDIUM	When image assets fail to load on slow mobile connections, users see broken boxes without context.

---

4. Non-Compliant Code Patterns (Bad Examples)

ASTRO (Astro Image component missing required alt attribute):

<Image src={bannerImage} width={800} height={400} />

TSX (Native img tag without alt):

<img src="/profile.png" className="rounded-full size-10" />

---

5. Compliant Implementation Patterns (Good Examples)

ASTRO (Informative image with meaningful alternative description):

<Image src={bannerImage} alt="Dashboard analitik desa tahun 2026" width={800} height={400} />

TSX (Decorative image explicitly marked with empty alt):

<img src="/decor-pattern.svg" alt="" className="pointer-events-none opacity-50" />

---

6. How to Suppress (Ignore Directives)

If this pattern is required for an intentional exception, suppress the diagnostic using the canonical Charites Rule ID:

<!-- charites:ignore a11y.img-missing-alt intentional exception -->

// charites:ignore a11y.img-missing-alt intentional exception

---

7. Configuration Reference (charites.yaml)

rules:
  a11y.img-missing-alt:
    severity: error # error | warn | info | off

---

8. Architectural Domain & Verification Reference

• Domain Architecture & Analysis Pipeline: See the a11y Category Guide.
• 1-SSOT Golden Tri-Corpus Test Matrix: See the Verification Harness on the Master Home page.
• Rule Catalog Index: See Master Wiki Home.