EduLinked Pty Ltd - Choosing Accessible Imagery

Choosing Accessible Imagery for the Web

Why It Matters

Accessible imagery ensures everyone—including people using screen readers or with visual impairments—can understand your content. It's also a WCAG requirement that expands your audience and improves SEO.

5-Point Checklist for Choosing Accessible Images

  1. Purpose: Every image should have a clear reason for being there.
  2. Clarity: Avoid cluttered or blurry images that are hard to interpret.
  3. Diversity: Represent diverse people and abilities in your imagery.
  4. Contrast & Text Overlays: Ensure text on images has high contrast and is readable.
  5. Licensing: Use properly licensed images and credit creators when required.

Alt Text: Before & After Examples

1. Decorative Image

Before: alt="A beautiful abstract background with blue and purple swirls"

After: alt="" (empty for purely decorative images)

Why: Decorative images add no information, so they should be hidden from screen readers.

2. Informative Image

Before: alt="Image of a person"

After: alt="A smiling woman in a blue shirt holding a tablet and pointing at a chart on screen"

Why: Descriptive alt text conveys the image's meaning and context.

3. Complex/Diagram

Before: alt="Flowchart showing the process"

After: alt="Flowchart showing user journey: Sign up → Verify email → Complete profile → Start using service"

Why: Complex images need detailed descriptions or alternative text explanations.

Accessible HTML Examples

Informative Image with Caption

<figure>
	<img src="team-meeting.jpg" alt="Five diverse team members collaborating around a conference table with laptops and notes">
	<figcaption>Our quarterly planning session brings together perspectives from all departments.</figcaption>
</figure>

Decorative Image (Hidden from Screen Readers)

<img src="decorative-pattern.png" alt="">

Technical Tips

  • File Formats: Use WebP for modern browsers, with JPEG/PNG fallbacks.
  • Responsive Images: Use srcset to serve appropriately sized images for different devices.
  • File Size: Compress images to under 500KB where possible for faster loading.

Add this checklist to your image workflow.