Image Accessibility - Writing Alt Text and Understanding Contrast Ratio Standards

Why Image Accessibility Matters

Web images are visually-dependent content, and users with visual impairments understand image content through screen readers. Images without appropriate alternative text (alt text) are effectively "non-existent content" for these users. According to WHO statistics, approximately 2.2 billion people worldwide have some form of visual impairment - web accessibility is not accommodation for a minority but addressing a massive user base.

From a legal perspective, image accessibility is increasingly important. In Japan, the revised Act on the Elimination of Discrimination against Persons with Disabilities took effect in April 2024, mandating reasonable accommodation from private businesses. Web accessibility deficiencies risk being judged as "failure to provide reasonable accommodation." In the United States, thousands of web accessibility lawsuits are filed annually under the ADA (Americans with Disabilities Act).

From an SEO perspective, alt text is a ranking factor for image search. Google's image search algorithm uses alt text as a primary signal, and appropriate alt text directly contributes to traffic acquisition from image search. Accessibility and SEO are not opposing goals - correct alt text achieves both purposes simultaneously.

Alt Text Fundamentals and Writing Patterns

Alt text writing follows clear rules. Understanding the basic principles based on WCAG 2.1 guidelines and applying appropriate patterns for different image types is essential.

Basic rules:

• Concisely describe the information the image conveys (guideline: under 125 characters)
• Prefixes like "image of," "photo of," "illustration of" are unnecessary (screen readers automatically announce "image")
• Include any text within the image in the alt text
• Don't repeat information already explained in surrounding context

Patterns by image type:

• Informative images: Describe the information conveyed. Example: alt="Bar chart showing monthly sales for 2024. July highest at 3.5 million yen"
• Functional images (links/buttons): Describe the action, not appearance. Example: alt="Return to homepage"
• Decorative images: Set empty alt (alt="") so screen readers ignore them
• Complex images (charts/diagrams): Provide summary in alt text, details in body text or via longdesc

Omitting the alt attribute entirely (<img src="...">) versus setting empty alt (<img src="..." alt="">) are completely different. The former causes screen readers to read the filename, severely degrading user experience. Always explicitly set alt="" even for decorative images.

Optimizing Alt Text Based on Context

The optimal alt text for the same image varies depending on the context in which it's used. Consider "what purpose the image serves in its placement" and write descriptions matching that purpose.

Consider a dog photo used in different contexts:

• Pet shop site: alt="Golden Retriever puppy, 3 months old, male" - Breed, age, and sex are important as product information
• Veterinary blog: alt="Golden Retriever receiving vaccination" - Information related to the article context (vaccination) is important
• Design blog decoration: alt="" - Empty because it's decorative and unrelated to article content

For e-commerce product images, include not just the product name but color, size, material, and other visual information needed for purchase decisions. Instead of "red dress," write "wine red silk long dress, V-neck, below-knee length" so visually impaired users can accurately envision the product.

For charts and diagrams, alt text alone may not convey sufficient information. In such cases, use aria-describedby to associate detailed description text, or place a data table immediately after the figure providing equivalent information in text form.

Image Contrast Ratios and WCAG Standards

Text and important visual elements within images require sufficient contrast ratios. WCAG 2.1 defines the following standards for text contrast:

• Level AA (minimum): Normal text 4.5:1 or higher, large text (18pt+ or 14pt bold+) 3:1 or higher
• Level AAA (recommended): Normal text 7:1 or higher, large text 4.5:1 or higher

These standards apply not only to HTML text but also to text contained within images. When text in banner images, infographics, or OGP images is difficult to read due to insufficient background contrast, accessibility standards are not met.

WCAG 2.1's "Non-text Contrast" (Success Criterion 1.4.11) requires 3:1 or higher contrast ratio for UI components and meaningful graphic elements. This includes graph lines and bars, icons, and form borders.

Contrast ratio verification tools:

• WebAIM Contrast Checker: Web tool calculating contrast ratio from two input colors
• Stark (Figma plugin): Verify contrast ratios during the design phase
• axe DevTools (browser extension): Automatically detect accessibility issues across entire pages

Proper Handling of Decorative and Background Images

Not all images require alt text. Purely decorative images should be ignored by screen readers to prevent information overload. The criterion for decorative images is: "Would removing this image diminish the page's information or functionality?"

Decorative image handling methods:

• For <img> tags: Set alt="" and additionally add role="presentation" or aria-hidden="true"
• For CSS background images: They don't exist in the DOM, so screen readers don't recognize them. Implementing decorative images via CSS background-image is the cleanest approach
• For SVG icons: Set aria-hidden="true" and convey function through adjacent text labels

An ambiguous case is "atmosphere-conveying photos." For example, an interior photo on a cafe introduction page is information, not decoration. Verbalize the atmosphere the photo conveys: "Relaxed interior featuring wooden counters and warm-toned lighting."

Icon fonts (Font Awesome, etc.) also require attention. When icons carry meaning independently (e.g., trash can icon for delete button), set aria-label="Delete". When used alongside text labels, hide icons with aria-hidden="true" and let screen readers read only the text.

Find accessibility practice books on Amazon

Automated Testing and Continuous Improvement

Manually verifying image accessibility continuously is impractical. Build automated testing tools into CI/CD pipelines to detect issues early.

Issues detectable by automated testing:

• <img> tags missing alt attributes
• Decorative images with non-empty alt text (excessive alt)
• Alt text containing filenames or paths (e.g., alt="IMG_2034.jpg")
• Insufficient contrast ratio for text within images
• Elements with role="img" missing aria-label

Recommended tools:

• axe-core: JavaScript accessibility testing engine. Integrates with Jest and Playwright for unit and E2E tests
• pa11y: Command-line accessibility testing tool. Run periodically in CI to generate reports
• Lighthouse CI: Run Google's Lighthouse in CI with accessibility score thresholds as quality gates

Some issues cannot be detected automatically. The "quality" of alt text (whether descriptions are appropriate) requires human judgment. Conduct periodic accessibility reviews, actually navigating pages with screen readers to verify image information is correctly conveyed. Include real-device testing with VoiceOver (macOS/iOS) or NVDA (Windows) in pre-release checklists.