# Alt Text

Checks images have meaningful alt text, sensible size and loading strategy.

- Repository: https://github.com/thedaviddias/Front-End-Checklist (74621 stars)
- Category: Media
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add thedaviddias/Front-End-Checklist --skill alt-text -g -a claude-code -y`
Codex: `npx skills add thedaviddias/Front-End-Checklist --skill alt-text -g -a codex -y`
Cursor: `npx skills add thedaviddias/Front-End-Checklist --skill alt-text -g -a cursor -y`
Gemini CLI: `npx skills add thedaviddias/Front-End-Checklist --skill alt-text -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add thedaviddias/Front-End-Checklist`

## Description

Use when reviewing image assets, markup, and CDN or build transforms related to Provide meaningful alt text for images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Provide meaningful alt text for images

Approximately 2.2 billion people worldwide have vision impairment. Screen readers read the alt attribute aloud, without meaningful alt text, users who are blind receive no information about image content. Missing alt text also fails WCAG 2.1 Success Criterion 1.1.1, which is a Level A (minimum) requirement. Search engines also rely on alt text to index image content.

## Quick Reference

- Every `<img>` must have an `alt` attribute, omitting it entirely violates WCAG 2.1 SC 1.1.1
- Decorative images use `alt=""` so screen readers ignore them
- Alt text should describe the image's *purpose*, not just its appearance
- Linked images: alt describes the link destination, not the visual

## Check

Scan all <img> elements in the codebase. Verify: 1) Every <img> has an alt attribute (missing alt is an error). 2) Decorative images use alt="". 3) Informative images have descriptive text that conveys the image's meaning, not just its file name. 4) Images that are links describe the destination. 5) Images of text reproduce the text in alt. Flag any <img> without alt, with alt matching the filename (e.g., alt="photo1.jpg"), or with generic values like alt="image" or alt="photo".

## Fix

For each image missing or with poor alt text: 1) Informative images, describe what the image conveys, not just what it shows (e.g., alt="Bar chart showing 40% increase in sales Q3 2024" not alt="chart"). 2) Decorative images, add alt="" so screen readers skip them. 3) Linked images, describe the link destination (e.g., alt="Visit our Twitter profile"). 4) Images of text, copy the text verbatim into alt. 5) Complex images (charts, infographics), provide a short alt plus a longer description via aria-describedby or a visible caption.

## Explain

The rest: https://github.com/thedaviddias/Front-End-Checklist/blob/HEAD/skills/alt-text/SKILL.md