Alt Text Guide
Interactive guide and template generator for writing accessible image alt text.
Decorative vs Informative
If an image adds no information that isn't already in surrounding text, it's decorative. Use alt="" (empty, not missing). Screen readers skip it.
Do
- ✓alt="" on spacers, borders, and purely aesthetic images
- ✓alt="" on icons that have adjacent visible labels
- ✓Always include the alt attribute even when empty
Don't
- ✗Omit the alt attribute entirely — some screen readers read the filename instead
- ✗Use alt="image" or alt="graphic" as a default
- ✗Add alt text to a decorative image just to fill the attribute
Conciseness
Describe only what is relevant. Screen readers already announce the element is an image.
Do
- ✓Start directly with the content: "Golden Gate Bridge at sunset"
- ✓Match the complexity of the alt text to the image's purpose on the page
- ✓Use the shortest text that conveys the same information
Don't
- ✗Start with "Image of", "Photo of", or "Picture of"
- ✗Describe every visual detail if only the main subject matters
- ✗Copy the image filename as alt text
Functional Images
When an image is the only content of a link or button, the alt text must describe the destination or action, not the image appearance.
Do
- ✓alt="Search" on a magnifying glass icon button
- ✓alt="Go to homepage" on a logo-as-link
- ✓alt="[Company] logo — go to homepage" if the logo image itself matters
Don't
- ✗alt="logo" on a linked logo (describes appearance, not function)
- ✗alt="" on a standalone icon button (leaves action undescribed)
- ✗alt="icon" as a fallback
Related Tools
FAQ
- When should alt text be left empty?
- Leave alt="" (empty string, not missing) on decorative images that add no information — borders, spacers, purely aesthetic background images. Screen readers will skip these entirely. Never omit the alt attribute, as some screen readers will announce the filename instead.
- How long should alt text be?
- There is no hard character limit, but aim for the shortest text that conveys the same information a sighted user gets from the image. For simple icons, one or two words suffice. For a complex chart, summarize the key insight ("Bar chart showing monthly revenue peaking in December") and consider a long description linked from the page.
- Should alt text start with "Image of" or "Photo of"?
- No. Screen readers already announce that it is an image before reading the alt text, so starting with "Image of" is redundant. Begin directly with the content: "Golden Gate Bridge at sunset" not "Photo of the Golden Gate Bridge at sunset".
Alt Text Guide teaches the rules for writing effective alternative text and provides an interactive template generator. The guide covers decorative vs informative images, each major image type (photographs, icons, charts, screenshots, diagrams), and common do's and don'ts. The template generator accepts a brief image description and suggests ready-to-use alt text phrasing. Use it to make your images accessible to screen reader users without guesswork.