How to Fix Alt Text for Images: The Complete Guide to Accessible Image Descriptions

Alt text exists so that people who cannot see an image can still access the information it conveys. Screen readers announce the alt text in place of the image, so a blind user hears a description instead of seeing the visual. But alt text also matters when images fail to load (the alt text displays in place of the broken image), for search engine indexing (Google uses alt text to understand image content), and for users on slow connections who may disable images. Under WCAG 2.1, Success Criterion 1.1.1 (Non-text Content) requires that all non-text content has a text alternative that serves the equivalent purpose. This is a Level A requirement — the most basic level — meaning there is no valid excuse for missing it.

Before writing alt text, categorize each image. Informative images convey content that is not available in surrounding text — these need descriptive alt text. Examples: a product photo, a headshot, a chart, a screenshot demonstrating a step in a tutorial. Decorative images exist purely for visual aesthetics and add no information — these should have empty alt (alt='') so screen readers skip them. Examples: background patterns, decorative borders, stock photos used only for visual interest next to text that already conveys the complete message. Functional images serve as interactive controls — buttons, links, icons. These need alt text that describes the function, not the image. A magnifying glass icon inside a search button should have alt='Search,' not alt='Magnifying glass.' Getting this categorization right is the foundation of good alt text.

Keep alt text concise but complete — typically under 125 characters. Do not start with 'Image of' or 'Picture of' because screen readers already announce it as an image. Describe what matters in context: the same photo might need different alt text on different pages. A headshot on a team page might read alt='Sarah Chen, Director of Engineering' while the same photo in a news article might read alt='Sarah Chen speaking at the 2025 developer conference.' For images of text (which you should avoid when possible), the alt text should contain the exact text shown in the image. For complex images like charts, provide a brief alt text summarizing the takeaway (alt='Bar chart showing 40% increase in accessibility lawsuits from 2022 to 2024') and include detailed data in a table or long description nearby. Never stuff keywords into alt text for SEO — search engines penalize this and it creates a terrible experience for screen reader users.

The most frequent mistakes are: completely missing alt attributes (the image tag has no alt attribute at all, causing screen readers to read the file name, which sounds like 'image slash D-S-C-underscore-zero-four-seven-two-dot-jpg'), generic alt text like 'image' or 'photo' or 'banner' that tells the user nothing useful, overly long alt text that turns into a full paragraph (use aria-describedby or a visible caption for long descriptions instead), alt text that describes irrelevant visual details instead of the meaningful content, CMS-generated alt text that defaults to the file name, and decorative images with non-empty alt text that clutters the screen reader experience with useless announcements. To fix these, you need to audit every image on your site, categorize it, and either write appropriate alt text or set it to empty.

For a small site (under 20 pages), you can manually inspect each page: right-click images, choose Inspect, and check the alt attribute in the HTML. For larger sites, you need automated scanning. ADA CodeFix will flag every image with missing or empty alt attributes, images used as links without accessible names, background images that may need text alternatives, and icon fonts or SVGs lacking accessible labels. After the automated scan identifies which images need attention, the manual work is writing the actual descriptions — that part requires human judgment because only a person can decide what information the image conveys in its specific context. Plan for this: a site with 500 images might take several hours to properly describe.

Inline SVGs should include a title element as the first child of the SVG, plus role='img' and aria-labelledby pointing to the title element's ID. SVGs used via an img tag can use the regular alt attribute. CSS background images are invisible to screen readers by default, which is correct for decorative images but a problem if the background image conveys information — in that case, provide the information in visible text or use an aria-label on the containing element. Icon fonts (like Font Awesome) should have aria-hidden='true' on the icon element itself, with a visually hidden span providing the text alternative. If an icon is the only content in a button or link, the button or link needs an aria-label. For image maps, each area element needs its own alt attribute describing what that region links to. Each of these cases is a common source of violations that automated tools often catch.