Alt Text That Actually Works: Writing for Screen Readers

Approximately 2.2 billion people worldwide have vision impairments, including over 43 million who are blind. Many of these individuals use screen readers—software that reads web content aloud—to access websites. Screen readers can read text, but they cannot interpret images. Alt text provides the textual description that allows screen readers to convey image meaning to their users. For screen reader users, alt text isn't just helpful—it's essential. Without alt text, an image communicates nothing. A website full of meaningful images becomes useless. Alt text transforms images from inaccessible barriers into accessible components of the user experience. Beyond accessibility, alt text provides practical benefits: it appears when images fail to load, provides context when CSS is disabled, and improves search engine optimization by helping search engines understand image content. Proper alt text is genuinely useful for everyone. WCAG requires alt text for all images. This requirement is absolute—there are no exceptions for decorative images or images already described in adjacent text. The distinction between decorative and informative images determines what goes in the alt attribute, but every image requires consideration.

Effective alt text serves a specific purpose: to provide equivalent information to what a sighted person receives from the image. If you remove the image from the page but keep the alt text, would the page still make sense? Would someone understand everything the image was meant to convey? This principle prevents common alt text mistakes. Alt text is not a caption—captions appear on screen and supplement alt text. Alt text is not metadata—it should not include technical information about the image file. Alt text is not a space to keyword-stuff for SEO—search engines recognize and penalize this practice. Alt text should answer these questions: What is this image? Why is it here? What information does it convey? What would a sighted user understand from this image that someone using a screen reader should also understand?

Informative images—those that convey important information—require descriptive alt text that accurately describes the image content. When your page includes a photograph or illustration that conveys information, describe what you see and why it matters. For example: Poor alt text: "Photo" Better alt text: "A developer reviewing accessibility guidelines on a computer screen" Best alt text (context dependent): "A developer reviewing WCAG 2.1 Level AAA accessibility guidelines on a computer screen in an office setting" The "best" version includes more detail, but length should be appropriate to context. A small thumbnail doesn't need as much detail as a large featured image. Consider what information is important and what detail would be distracting for a screen reader user. Charts and graphs present particular challenges because they communicate information visually that must be conveyed through alt text. A simple bar chart showing sales trends cannot be adequately described in a single line. Poor alt text: "Chart" Better alt text: "Bar chart showing quarterly sales trends for 2024" Best approach: Combined alt text and data table. Use alt text to describe the chart type, purpose, and overall trend, then provide a data table below the chart containing the actual numbers. Example: "Bar chart showing quarterly sales increasing from Q1 2024 to Q4 2024. See the table below for detailed numbers." Screenshots require alt text describing their content. Describe what's visible and why the screenshot is relevant to the surrounding text. Context: "Here's where to find the accessibility settings in Windows:" Alt text: "Windows Settings window showing Accessibility section open with Vision options expanded, highlighting 'High contrast' toggle switch" Maps present information visually through geography and markers. Alt text should describe the geographic area, any marked locations, and the purpose of the map. Poor alt text: "Map" Better alt text: "Map of Western United States showing office locations in Seattle, San Francisco, Denver, and Austin"

Functional images—images that are interactive or part of buttons—require different alt text approach. Logo images within a link should include the company or site name as alt text. HTML: <a href="/"><img src="logo.svg" alt="A11yscan home"></a> This tells screen reader users what the logo is and indicates it's a link to the home page. Images used as buttons should describe the button's function, not the image appearance. Poor alt text: "Magnifying glass icon" Better alt text: "Search" (when used in a search button) Social media follow buttons with icon images should describe the social platform. HTML: <a href="https://twitter.com/a11yscan"><img src="twitter.svg" alt="Follow us on Twitter"></a>

Decorative images—images that serve no informative purpose—should use an empty alt attribute: alt="" This tells screen readers to skip the image entirely, which is appropriate for purely decorative elements. Do not omit the alt attribute entirely; screen readers will read the filename instead. A decorative image is one where removing it wouldn't change the page's meaning or functionality. Examples include design flourishes, background pattern images, divider lines, and visual spacing elements. However, many images that appear "decorative" actually convey information. A photo illustrating a concept isn't merely decorative—it provides visual explanation. An icon next to text that's central to the message isn't decorative—it reinforces the message. When in doubt, include descriptive alt text.

No official character limit exists for alt text, but practical guidelines help you write effectively. Alt text should typically be 100-125 characters or fewer, roughly equivalent to a sentence. This allows screen reader users to quickly understand the image without excessive reading. However, for complex images, longer alt text is appropriate if necessary. If the image caption or surrounding text already describes the image, don't repeat that description in alt text. Instead, use alt text to add information the surrounding text doesn't provide or write a shorter alt text that works alongside the caption. Write alt text as if describing the image to someone over the phone. Natural language is easier for screen reader users to understand than overly formal or keyword-stuffed descriptions. Screen readers already announce that they're reading an image. Prefacing alt text with "Image of" is redundant. Write directly: "A developer typing code" rather than "Image of a developer typing code."

Understanding what not to do helps ensure your alt text is genuinely accessible. The most common error is omitting alt text entirely. Every image must have an alt attribute—even if the value is empty for decorative images. Alt text like "Image," "Photo," "Picture," or "Graphic" provides no useful information. Even image filenames like "123456.jpg" are better replaced with meaningful descriptions. While detail is good, excessive detail becomes burdensome for screen reader users. A photo of a person doesn't need to describe clothing in minute detail unless clothing is central to the image's purpose. Filling alt text with keywords is both an accessibility and SEO failure. Search engines recognize and penalize keyword stuffing, and it makes alt text unhelpful for screen reader users. The same image requires different alt text in different contexts. Alt text should relate to why the image is included. While both serve different purposes, many developers use alt text where captions would be better. Use alt text for the image itself and captions for additional context that sighted users should also see.

Verify that your alt text is genuinely useful by testing it with screen readers. Use free screen readers like NVDA (Windows) or VoiceOver (macOS/iOS) to hear how alt text sounds. Your alt text should make sense when read aloud in the order it appears. In your browser's developer tools, disable images. Can you understand the page and find important information? If not, your alt text isn't adequately descriptive. Browser extensions like axe DevTools or WAVE highlight missing alt text and flag images with generic or unhelpful alt attributes.

Certain image types present unique alt text challenges. Complex infographics require substantial alt text or accompanying text descriptions. Provide both: concise alt text describing the overall message, plus a detailed text breakdown. Alt text for animated GIFs should describe the animation and its purpose. Example: "Animated diagram showing how keyboard navigation flows through a web page" SVG images sometimes require both image-level alt attributes and internal ARIA labels. Test SVGs with screen readers to ensure all necessary information is conveyed. CSS background images cannot have alt text. If a background image conveys important information, use a standard <img> element instead or provide the information through other means.