Alt text for images

Severity: Recommended

Images without alt text are invisible to screen reader users. This is the most common and easily preventable accessibility issue.

Check automatically:

# Check for ESLint jsx-a11y plugin (enforces alt text)
grep -E "eslint-plugin-jsx-a11y|jsx-a11y" package.json 2>/dev/null

# Check ESLint config for alt-text rule
grep -riE "alt-text|jsx-a11y" .eslintrc* eslint.config* 2>/dev/null

# Sample img tags to see alt usage patterns
grep -riE "<img|<Image" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | head -15

# Check for empty alt (decorative images - valid if intentional)
grep -riE 'alt=""' src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | head -5

Ask user:

• "Is there a linting rule enforcing alt text?" (jsx-a11y/alt-text)
• "How are decorative images handled?" (empty alt="" is correct)
• "Who writes alt text for content images?" (devs, content team, CMS)

Pass criteria:

• ESLint rule enforces alt attribute on images
• Meaningful alt text on content images
• Decorative images use alt="" (not missing alt)
• CMS/content workflow includes alt text field

Fail criteria:

• No linting rule, alt text is optional
• Images missing alt entirely (not even empty)
• Alt text is placeholder ("image", "photo", filename)

Note: alt="" for decorative images is correct — it tells screen readers to skip them. Missing alt entirely is the problem.

Evidence to capture:

• jsx-a11y plugin installed
• Alt text linting rule enabled
• Sample of alt text usage

---