← ClaudeAtlas

alt-text-writinglisted

Write alt text that conveys an image's purpose, marks decorative images empty, and handles functional and complex images. Use when adding images to content or auditing alt text.
Amey-Thakur/AI-SKILLS · ★ 4 · AI & Automation · score 77
Install: claude install-skill Amey-Thakur/AI-SKILLS
# Alt text writing Alt text is what a screen reader speaks in place of an image, and what shows when an image fails to load. Good alt text conveys the image's *purpose in context*, not a literal description; the most common mistakes are missing alt, useless alt ("image"), and describing decorative images that should be silent. ## Method 1. **Convey purpose in context, not literal description.** The same image needs different alt text depending on why it is there: a photo of a person might be "Dr. Jane Smith" in a bio, "Team member smiling" in a culture page, or nothing if purely decorative. Ask "what does this image communicate here, and what would a sighted user take from it?": that meaning is the alt text, not an inventory of pixels. 2. **Mark decorative images empty.** Images that add no information (backgrounds, dividers, decorative flourishes, an icon next to text that already says the same thing) get `alt=""` (empty, not missing): so the screen reader skips them entirely. Decorative images with descriptive alt, or with no alt attribute at all (screen readers then read the filename: "IMG_4021.jpg"), are noise that clutters the experience. 3. **Describe functional images by their action.** An image that is a link or button (a magnifying-glass search icon, a logo linking home) gets alt describing the *function*, not the appearance: "Search", "Home", not "magnifying glass icon". The user needs to know what activating