Alt Text: Why It's Essential
Alt text is probably the easiest accessibility concept to understand -- and yet one of the most commonly botched. The alt attribute provides a text description of an image, read by screen readers and displayed when images fail to load. RGAA criteria 1.1-1.9 cover images. The principle is simple: every image must either convey its information as text, or be ignored entirely.
The Golden Rule
Before writing a single word, ask yourself: what would the user lose if this image disappeared? That answer drives everything. Nothing lost = decorative (alt=""). Information lost = informative. Text lost = text image. It's a link/button = functional (alt="[destination/action]").
Examples
Here's where I see the most mistakes. For informative images, describe the information, not the appearance ("Revenue growth from 12 to 18M" beats "chart"). For decorative images, use alt="" -- empty, not absent! Without any alt attribute, screen readers read the filename. Imagine hearing "DSC_0047_final_v2.jpg". For functional images (links, buttons), describe the destination or action. For complex images, use a short alt summary plus a long description via aria-describedby. Icons next to text get alt="" (the text does the job); standalone icons need alt="[meaning]".
Best Practices
Here's a trick I use: read your alt text out loud. Does it make sense? If yes, you're on the right track. Keep it concise (5-15 words for simple images), never start with "Image of..." (screen readers already announce "image"), describe information not appearance, contextualize for the page it's on, and never stuff SEO keywords in alt text -- that's not what it's for.
Good alt text is invisible to sighted users but essential for screen reader users. It's one of the simplest and most impactful things you can do for accessibility -- and it takes just seconds per image.