Image Accessible Names Test Cases

Test cases: 12 passing, 23 failing (35 total)

This page contains various image elements to test accessible name computation according to WCAG guidelines.

Passing Examples

Image with Descriptive Alt Text

This image has descriptive alt text that explains its content.

Mountain landscape with a lake and sun in the sky

<img id="img-alt-descriptive-pass" src="..." alt="Mountain landscape with a lake and sun in the sky">

Decorative Image with Empty Alt Text

This decorative image correctly uses empty alt text to be ignored by screen readers.

<img id="img-alt-empty-decorative-pass" src="..." alt="">

Image with aria-label

This image uses aria-label instead of alt text for its accessible name.

<img id="img-aria-label-pass" src="..." aria-label="Green circle on gray background">

Image with aria-labelledby

This image uses aria-labelledby to reference text elsewhere on the page for its accessible name.

Quarter 1 Sales Performance Chart

<h4 id="chart-description">Quarter 1 Sales Performance Chart</h4>
<img id="img-aria-labelledby-pass" src="..." aria-labelledby="chart-description">

Complex Image with Alt Text and aria-describedby for Long Description

This complex chart image has appropriate alt text and references a longer description for screen reader users.

Temperature trends 2020-2023

<img id="img-complex-pass" src="..." alt="Temperature trends 2020-2023" aria-describedby="chart-long-desc">
<p id="chart-long-desc">This line chart shows temperature trends...</p>

Failing Examples

Image with No Alt Attribute

This image is missing the alt attribute entirely.

<img id="img-no-alt-fail" src="...">

Image with Filename as Alt Text

This image uses its filename as alt text, which is not descriptive.

image001.jpg

<img id="img-filename-alt-fail" src="..." alt="image001.jpg">

Image with Generic Alt Text

This image has generic alt text that doesn't describe its content.

Image

<img id="img-generic-alt-fail" src="..." alt="Image">

Image with Alt Text that Includes "Image of"

This image has redundant alt text that begins with "Image of" (unnecessary since screen readers already announce it's an image).

Image of a blue rectangle

<img id="img-redundant-alt-fail" src="..." alt="Image of a blue rectangle">

Image with Only Whitespace in Alt Text

This image has only whitespace in its alt attribute, which is treated differently than empty alt text.

<img id="img-whitespace-alt-fail" src="..." alt=" ">

Image with Only Punctuation in Alt Text

This image has only punctuation in its alt text, which may not be announced by some screen readers.

...

<img id="img-punctuation-alt-fail" src="..." alt="...">

SVG Image without Title or Description

This inline SVG image has role="img" but lacks accessible name via title or aria attributes.

<svg id="svg-no-title-fail" width="200" height="150" xmlns="http://www.w3.org/2000/svg" role="img">
  <rect width="200" height="150" fill="#f2f2f2" />
  <rect x="25" y="50" width="150" height="50" fill="#b3e6b3" />
</svg>

Image with Broken aria-labelledby Reference

This image has an aria-labelledby attribute pointing to an ID that doesn't exist.

<img id="img-broken-labelledby-fail" src="..." aria-labelledby="non-existent-id">

SVG with Empty Title Element

This inline SVG has role="img" and an empty title element, which doesn't provide an accessible name.

<svg id="svg-empty-title-fail" width="200" height="150" xmlns="http://www.w3.org/2000/svg" role="img">
  <title></title>
  <rect width="200" height="150" fill="#f2f2f2" />
  <circle cx="100" cy="75" r="50" fill="#ffcc99" />
</svg>

SVG with HTML Markup in Title Element

This inline SVG has role="img" with a title element containing HTML markup. Screen readers will announce the literal tags, not interpret them.

A Bonjour greeting icon Bonjour

<svg id="svg-html-title-fail" width="200" height="150" xmlns="http://www.w3.org/2000/svg" role="img">
  <title>A <span lang="fr">Bonjour</span> greeting icon</title>
  <rect width="200" height="150" fill="#f2f2f2" />
  <text x="60" y="90" font-family="Arial" font-size="24" fill="#000">Bonjour</text>
</svg>

SVG with Whitespace-only Title Element

This inline SVG has role="img" and a title element containing only whitespace, which doesn't provide a proper accessible name.

<svg id="svg-whitespace-title-fail" width="200" height="150" xmlns="http://www.w3.org/2000/svg" role="img">
  <title> </title>
  <rect width="200" height="150" fill="#f2f2f2" />
  <circle cx="100" cy="75" r="50" fill="#ccffcc" />
</svg>

Image with HTML in Alt Text

This image contains HTML notation in its alt text, which won't render correctly for screen readers.

<strong>Medical cross</strong> symbol

<img id="img-html-alt-fail" src="..." alt="<strong>Medical cross</strong> symbol">

Image with Misused lang Attribute in Alt Text

This image incorrectly attempts to specify language within the alt text using HTML notation.

French greeting <span lang='fr'>Bonjour</span> on yellow background

<img id="img-lang-alt-fail" src="..." alt="French greeting <span lang='fr'>Bonjour</span> on yellow background">

Image with HTML Markup in Alt Text (Foreign Language)

This image incorrectly uses HTML in its alt text, which won't be interpreted by screen readers. HTML tags in alt text are read literally.

A sign saying <span lang='fr'>Bonjour</span>

<img id="img-html-foreign-alt-fail" src="..." alt="A sign saying <span lang='fr'>Bonjour</span>">

Special Cases and Best Practices

The following examples demonstrate specific edge cases and best practices for image accessibility.

Image with Proper lang Attribute Usage

This image correctly references a span with lang attribute using aria-labelledby to specify foreign language content.

<span id="french-greeting" lang="fr" aria-label="Bonjour"></span>
<img id="img-proper-lang-pass" src="..." aria-labelledby="french-greeting" alt="">

SVG Special Cases

The following examples test special cases for SVG images.

Inline SVG with Title Element

This inline SVG includes a title element to provide an accessible name.

Three colorful circles in a row

<svg id="svg-with-title-pass" width="200" height="150" xmlns="http://www.w3.org/2000/svg" role="img">
  <title>Three colorful circles in a row</title>
  <rect width="200" height="150" fill="#f2f2f2" />
  <circle cx="50" cy="75" r="25" fill="#ff9999" />...
</svg>

Inline SVG with aria-label

This inline SVG uses aria-label to provide an accessible name.

<svg id="svg-with-aria-label-pass" width="200" height="150" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Blue star on light background">
  <rect width="200" height="150" fill="#f2f2f2" />
  <path d="M100,30 L115,75 L165,75 L125,100 L140,150 L100,120 L60,150 L75,100 L35,75 L85,75 Z" fill="#4d94ff" />
</svg>

Decorative SVG with role="presentation"

This decorative inline SVG correctly uses role="presentation" to be ignored by screen readers.

<svg id="svg-decorative-pass" width="200" height="20" xmlns="http://www.w3.org/2000/svg" role="presentation">
  <rect width="200" height="20" fill="#ddd" />
</svg>

Complex Images with role="img"

The following examples test accessible names for complex images created with non-image elements.

Complex Weather Widget with aria-label

This div with role="img" uses aria-label to provide an accessible name for a complex weather widget.

<div id="weather-aria-label-pass" role="img" aria-label="Current weather: 72°F, Partly Cloudy" class="weather-container">
  <div class="weather-icon">
    <div class="sun"></div>
    <div class="cloud"></div>
  </div>
  <div class="temperature">72°F</div>
  <div class="condition">Partly Cloudy</div>
</div>

Complex Chart with aria-labelledby

This complex chart element uses aria-labelledby to reference its accessible name.

Quarterly Sales Performance (in thousands)

<h4 id="sales-chart-title">Quarterly Sales Performance (in thousands)</h4>
<div id="chart-aria-labelledby-pass" role="img" aria-labelledby="sales-chart-title" class="chart-container">
  <div class="bar-1"></div>
  <div class="bar-2"></div>
  <div class="bar-3"></div>
  <div class="bar-4"></div>
  <div class="chart-label">Q1-Q4</div>
</div>

Complex Star Rating with aria-label

This div with role="img" uses aria-label to provide an accessible name for a star rating display.

<div id="rating-aria-label-pass" role="img" aria-label="Rating: 4 out of 5 stars" class="rating-container">
  <span class="star">★</span></span>
  <span class="star">★</span></span>
  <span class="star">★</span></span>
  <span class="star">★</span></span>
  <span class="star">☆</span></span>
</div>

Complex Weather Widget with No Accessible Name

This div with role="img" has no accessible name (missing aria-label or aria-labelledby).

<div id="weather-no-name-fail" role="img" class="weather-container">
  <div class="weather-icon">...</div>
  <div class="temperature">68°F</div>
  <div class="condition">Partly Cloudy</div>
</div>

Complex Chart with Empty aria-label

This complex chart has an empty aria-label, providing no accessible name.

<div id="chart-empty-label-fail" role="img" aria-label="" class="chart-container">
  <div class="bar-1"></div>...
  <div class="chart-label">Q1-Q4</div>
</div>

Complex Star Rating with Whitespace-only aria-label

This div with role="img" has an aria-label containing only whitespace.

<div id="rating-whitespace-label-fail" role="img" aria-label=" " class="rating-container">
  <span class="star">★</span></span>...
</div>

Complex Chart with Broken aria-labelledby Reference

This complex chart references a non-existent element with aria-labelledby.

<div id="chart-broken-labelledby-fail" role="img" aria-labelledby="non-existent-chart-title" class="chart-container">
  <div class="bar-1"></div>...
  <div class="chart-label">Q1-Q4</div>
</div>

Complex Weather Widget with URL as aria-label

This div with role="img" uses a URL as its aria-label, which is not descriptive.

<div id="weather-url-label-fail" role="img" aria-label="https://example.com/weather-icon.png" class="weather-container">
  <div class="weather-icon">...</div>
  <div class="temperature">75°F</div>
  <div class="condition">Partly Cloudy</div>
</div>

Complex Weather Widget with HTML Markup in aria-label

This div with role="img" incorrectly uses HTML markup in its aria-label. Screen readers will announce the literal HTML tags, not interpret them.

<div id="weather-html-label-fail" role="img" aria-label="Weather in <span lang='fr'>Paris</span>: Sunny, 28°C" class="weather-container">
  <div class="weather-icon">...</div>
  <div class="temperature">28°C</div>
  <div class="condition">Sunny</div>
</div>

Complex Star Rating with Generic aria-label

This div with role="img" has a generic, non-descriptive aria-label.

<div id="rating-generic-label-fail" role="img" aria-label="image" class="rating-container">
  <span class="star">★</span></span>...
</div>

Complex Chart with Punctuation-only aria-label

This div with role="img" has an aria-label containing only punctuation.

<div id="chart-punctuation-label-fail" role="img" aria-label="..." class="chart-container">
  <div class="bar-1"></div>...
  <div class="chart-label">Q1-Q4</div>
</div>

Complex Weather Widget with Filename as aria-label

This div with role="img" uses a filename as its aria-label, which is not descriptive.

<div id="weather-filename-label-fail" role="img" aria-label="weather_icon_01.png" class="weather-container">
  <div class="weather-icon">...</div>
  <div class="temperature">70°F</div>
  <div class="condition">Partly Cloudy</div>
</div>