Image Alt Text
What is image alt text and why is it essential for accessibility?
What is image alt text?
Alt text (the HTML alt attribute) is a short text description of an image that screen readers announce to visually impaired users. It also displays when an image fails to load and is used by search engines to understand image content. Every non-decorative image on a page must have meaningful alt text that conveys the image's purpose or information.
Image alt text is the HTML alt attribute that provides a short text description of an image for screen readers and search engines. Every non-decorative image must have meaningful alt text to ensure visually impaired users can understand the content and purpose of the image.
Why does image alt text matter?
Screen reader users encounter images as blank voids without alt text, losing context that may be critical to understanding the page. Search engines rely on alt text to index images for Google Image Search and to better understand page content. Missing alt text is one of the most common WCAG failures and one of the easiest to fix.
Key statistics
Missing alternative text for images was found on 54.5% of home pages in the WebAIM Million 2024 analysis.
Source: WebAIM Million
Google Images results account for 22.6% of all web searches, making alt text critical for image search visibility.
Source: Sparktoro
How to fix it
-
1
Audit all <img> tags on your site and add descriptive alt attributes that explain the content or function of each image.
-
2
Keep alt text concise (typically under 125 characters) and avoid starting with "image of" or "picture of" since screen readers already announce it as an image.
-
3
For purely decorative images (borders, spacers, background flourishes), use an empty alt attribute (alt="") so screen readers skip them entirely.
-
4
For complex images like charts or infographics, provide a brief alt text summary and link to a longer text description nearby.
-
5
Include relevant keywords naturally in alt text where they genuinely describe the image — never keyword-stuff.
Code example
<img src="/images/team-photo.jpg"><img src="/images/team-photo.jpg" alt="The eiSEO engineering team collaborating at a whiteboard during a sprint planning session">Frequently asked questions
Related topics
Image Optimization
Image optimization is the process of delivering images at the correct size, format, and compression level while providing proper HTML attributes (alt text, width, height, lazy loading). Unoptimized images are the number one cause of slow page loads on the web, directly impacting Core Web Vitals scores that Google uses as a ranking signal.
Color Contrast
Color contrast is the difference in luminance between foreground text and its background. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). Insufficient contrast makes content difficult or impossible to read for users with low vision, color blindness, or those viewing screens in bright sunlight.
Heading Hierarchy
Heading hierarchy refers to the logical nesting of HTML heading elements (H1 through H6) on a page. A well-structured hierarchy starts with a single H1, followed by H2s for major sections, H3s for subsections, and so on without skipping levels. Screen readers use headings as a navigation shortcut, allowing users to jump between sections.
Scan your site for accessibility issues
eiSEO automatically detects and helps you fix issues like this across your entire site.