Images Project

title: "Images Project — Build a Page with Complete Image Accessibility" description: "Build a page that demonstrates all image accessibility patterns including alt text, figures, SVGs, icons, and responsive images." weight: 12 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, images]

Apply everything you learned by building a page that demonstrates correct image accessibility for every image type.

## What You'll Learn

How to combine all image patterns into a complete, accessible page with multiple image types.

## Why It Matters

A page with multiple image types tests your ability to choose the right pattern for each image. Getting it right ensures all users understand your visual content.

## Real-World Use

A DodaTech blog post includes a hero image, an infographic, an icon list, a product screenshot, and a logo. Each image type uses the correct accessibility pattern.

## Complete Image Page

```html
<article>
  <h1>Understanding Image Accessibility</h1>

  <!-- Hero image -->
  <figure>
    <img src="hero-accessibility.jpg"
         alt="Person using screen reader with headphones, navigating a website">
    <figcaption>Screen reader users rely on alt text to understand images</figcaption>
  </figure>

  <!-- Icon list -->
  <ul class="feature-list">
    <li>
      <img src="icon-check.svg" alt="" aria-hidden="true" class="icon">
      Proper alt text for meaningful images
    </li>
    <li>
      <img src="icon-check.svg" alt="" aria-hidden="true" class="icon">
      Empty alt for decorative images
    </li>
  </ul>

  <!-- Infographic with long description -->
  <figure>
    <img src="infographic-stats.png"
         alt="Infographic showing 85% of web content has missing alt text"
         aria-describedby="infographic-desc">
    <figcaption>Common image accessibility issues</figcaption>
  </figure>
  <details id="infographic-desc">
    <summary>Infographic text description</summary>
    <ul>
      <li>85% of pages have missing alt text</li>
      <li>60% have decorative images without empty alt</li>
      <li>30% use images of text instead of real text</li>
    </ul>
  </details>

  <!-- Logo link -->
  <a href="/" aria-label="DodaTech home page">
    <img src="logo.svg" alt="">
  </a>
</article>

CSS

.icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 0.3em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Common Mistakes

1. Inconsistent alt text style

Establish a style guide for alt text: sentence case, no "image of," no trailing punctuation.

2. No review process

Images added by content authors need an alt text review before publishing.

3. Forgetting downloadable images

If the image can be downloaded, provide the same alt text in the download information.

4. Alt text not maintained

When images change, alt text must be updated. Stale alt text is misleading.

5. SVG icons not tested

SVG icons need manual testing because automated tools may miss role or aria-label issues.

Practice Questions

1. What three things should every image audit check? All meaningful images have alt text, all decorative images have alt="", and all complex images have long descriptions.

2. How do you handle the same image in different contexts? The alt text should change based on context. A product image on the category page vs product page may have different alt text.

3. What is the fallback for SVG icons without a label? A screen reader announces the SVG path data as code. Always add role="img" and aria-label for meaningful SVGs.

Challenge: Create a complete page with 10+ images of different types (photo, logo, icon, chart, infographic, screenshots, decorative) with correct accessibility patterns.

FAQ

Mini Project

Build a complete blog post page with a hero image, section icons, an inline SVG diagram, a product screenshot (with figcaption), and a logo link. Ensure all images pass accessibility checks.

What's Next

Now explore Accessible Media to learn how to make audio and video content accessible.