Image Testing

title: "Image Testing — Verifying Image Accessibility" description: "Learn how to test image accessibility using automated tools, manual review, and screen reader verification to ensure all images are properly described." weight: 11 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, images]

Testing image accessibility requires checking alt text quality, decorative image handling, and complex image descriptions using automated and manual methods.

## What You'll Learn

How to audit images for accessibility, write automated tests, and verify with screen readers.

## Why It Matters

Missing or poor alt text is one of the most common accessibility issues. Regular image audits catch problems before users encounter them.

## Real-World Use

A QA team runs an automated image audit before every release. They check that all meaningful images have alt text, decorative images have alt="", and complex images have long descriptions.

## Automated Audit

```javascript
// Check all images for alt text
document.querySelectorAll('img:not([alt])').forEach(img => {
  console.error('Image missing alt:', img.src);
});

// Check for empty alt on non-decorative images
document.querySelectorAll('img[alt=""]').forEach(img => {
  // Manual review needed: verify this image is truly decorative
  console.log('Decorative image:', img.src);
});

Accessibility Tree Check

// Check if image is exposed to accessibility tree
const img = document.querySelector('img[alt="Logo"]');
const accessible = img.getAttribute('role') !== 'presentation'
  && img.getAttribute('aria-hidden') !== 'true';

Screen Reader Testing

// NVDA Image Testing
// G: Navigate to next graphic
// Shift+G: Navigate to previous graphic
// Insert+Tab: Read current element info

// VoiceOver (Mac)
// Ctrl+Option+Command+I: Navigate by image
// Ctrl+Option+Shift+Arrow: Navigate to next element

Common Mistakes

1. Only testing with automated tools

Automated tools check for missing alt but cannot evaluate alt text quality.

2. Not testing with a screen reader

Screen reader testing reveals practical issues like alt text that is too long or redundant with captions.

3. Ignoring CSS background images

CSS background images are invisible to automated tools. Manual review is required.

4. No process for new images

When content authors add images, a review process should ensure alt text meets standards.

5. Assuming all SVGs are decorative

Interactive SVGs need proper roles and labels. Decorative SVGs need aria-hidden.

Practice Questions

1. What is the most common image accessibility issue? Missing alt text on meaningful images is the most common issue.

2. What automated tool checks image attributes? axe DevTools and WAVE both check for missing alt attributes on images.

3. How do you test alt text quality? Read the alt text to someone who has not seen the image. If they understand the content, the alt text is effective.

Challenge: Run an image audit on a 10-page website. Document how many images are missing alt, have poor alt, or are decorative without alt="".

FAQ

Mini Project

Write an automated test script that checks: all img elements have alt, meaningful SVGs have role=img, decorative elements have alt="" or aria-hidden. Run it on a test page.

What's Next

Apply everything you learned in the Images Project by building a page with all image types properly described.