alt-text-writinglisted
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