What this example teaches

  • How to avoid missing, generic, repeated, and filename-like alt text.
  • How linked images differ from decorative images.
  • Why charts, team photos, logos, and product images need context.

Service image

Bad

<img src="/images/service-photo.jpg" alt="image">

The word image does not tell users what the image communicates.

Better

<img src="/images/service-photo.jpg" alt="Technician inspecting a commercial HVAC unit">

The alt text describes the useful content in plain language.

Best

<img src="/images/service-photo.jpg" alt="Technician inspecting a rooftop HVAC unit for a maintenance plan">

The wording connects the image to the service being promoted without stuffing in extra marketing copy.

Product image

Bad

<img src="/products/winter-kit.jpg" alt="photo">

Photo does not identify the product or the information the photo provides.

Better

<img src="/products/winter-kit.jpg" alt="Winter emergency kit with flashlight, blanket, radio, and first aid supplies">

The alt text names the product and the visible contents that matter to the shopping decision.

Best when nearby text already names the product

<h2>Winter emergency kit</h2>
<img src="/products/winter-kit.jpg" alt="Flashlight, blanket, radio, and first aid supplies inside the kit">

The alt text does not repeat the product name because the heading already provides it.

The best wording depends on what product details are visible elsewhere on the page.

Decorative image

Bad

<img src="/patterns/wave.svg" alt="blue wave decoration">

Decorative artwork adds noise when it is announced to screen reader users.

Better

<img src="/patterns/wave.svg" alt="">

Empty alt text hides a decorative image from assistive technology.

Only use empty alt text when the image adds no information and is not a link or control.

Linked image

Bad

<a href="/services/roof-repair/"><img src="/roof.jpg" alt=""></a>

The link may have no accessible name, so users may not know where it goes.

Better

<a href="/services/roof-repair/"><img src="/roof.jpg" alt="Roof repair services"></a>

The linked image now names the destination.

Best

<a href="/services/roof-repair/">
  <img src="/roof.jpg" alt="">
  <span>Roof repair services</span>
</a>

Visible link text gives everyone the same clear destination, while the decorative image stays silent.

Team photo

Bad

<img src="/team.jpg" alt="staff">

Staff is vague and may miss useful context.

Better

<img src="/team.jpg" alt="SiteCheck project team at a planning table">

The description explains who is shown and what is happening.

Best

<figure>
  <img src="/team.jpg" alt="SiteCheck project team at a planning table">
  <figcaption>Our accessibility review team planning a website launch checklist.</figcaption>
</figure>

The caption provides visible context for all users, so the alt text can stay short.

Chart or infographic

Bad

<img src="/chart.png" alt="chart">

Chart does not provide the data or conclusion.

Better

<img src="/chart.png" alt="Bar chart showing mobile form errors are the most common finding">

The alt text gives the main takeaway.

Best

<img src="/chart.png" alt="Mobile form errors are the most common finding">
<table>
  <caption>Accessibility findings by page type</caption>
  <!-- Include the chart data in text or table form. -->
</table>

Complex data is available outside the image, which helps users who need details.

Event photo

Bad

<img src="/events/open-house.jpg" alt="event">

Event is too vague to explain who or what is shown.

Better

<img src="/events/open-house.jpg" alt="Residents speaking with staff at the accessibility open house">

The description gives useful context without listing every visual detail.

Best with caption

<figure>
  <img src="/events/open-house.jpg" alt="Residents speaking with staff at tables">
  <figcaption>Accessibility open house at the downtown community centre, April 2026.</figcaption>
</figure>

The caption gives date and location visibly, so the alt text can stay focused on the image.

If the photo is only decorative promotion, empty alt may be better.

Screenshot

Bad

<img src="/screens/report-ui.png" alt="screenshot">

Screenshot does not tell users what the screenshot is showing.

Better

<img src="/screens/report-ui.png" alt="Accessibility report summary showing two critical findings and five major findings">

The alt text names the interface and the takeaway.

Best for detailed UI instructions

<img src="/screens/report-ui.png" alt="Report summary with severity counts">
<p>The report summary lists critical, major, moderate, and notice findings before the detailed issue cards.</p>

The surrounding text carries the instruction, so the image alternative does not have to do all the work.

Municipal or community notice image

Bad

<img src="/notices/water-shutoff-poster.jpg" alt="poster">

Poster hides the actual notice from people who cannot see the image.

Better

<img src="/notices/water-shutoff-poster.jpg" alt="Water shutoff notice for River Street on May 14 from 9 a.m. to 1 p.m.">

The alt text includes the key notice information.

Best

<img src="/notices/water-shutoff-poster.jpg" alt="">
<h2>Water shutoff notice</h2>
<p>River Street water service will be interrupted May 14 from 9 a.m. to 1 p.m.</p>

The critical information appears as real text for everyone; the poster image can be decorative.

Filename-like alt text

Bad

<img src="/uploads/IMG_2049-final.jpg" alt="IMG_2049-final.jpg">

File names usually expose internal asset names instead of useful content.

Better

<img src="/uploads/IMG_2049-final.jpg" alt="Accessible reception desk with lowered counter">

The replacement describes the meaningful detail in human language.

Logo alt text

Bad

<img src="/logo.svg" alt="logo">

Logo is too generic when the image identifies an organization.

Better

<img src="/logo.svg" alt="SiteCheck Canada">

The alt text gives the organization name.

Best when the logo links home

<a href="/" aria-label="SiteCheck Canada home">
  <img src="/logo.svg" alt="">
</a>

The link has a clear accessible name and the image does not repeat it.

Repeated alt text

Bad

<img src="/team/ava.jpg" alt="Team member">
<img src="/team/noah.jpg" alt="Team member">

Repeated labels can make unique people or items indistinguishable.

Better

<img src="/team/ava.jpg" alt="Ava Singh, accessibility lead">
<img src="/team/noah.jpg" alt="Noah Martin, frontend developer">

Each image gets a distinct useful label.

Best when names are visible beside each photo

<article>
  <img src="/team/ava.jpg" alt="">
  <h3>Ava Singh</h3>
  <p>Accessibility lead</p>
</article>

If the same information is already visible and programmatically connected, the image may not need to repeat it.

A manual review should confirm whether the visible name and role are actually associated with the image/card.

What still needs human review

  • Whether the image is informative, decorative, redundant, or functional in its actual page context.
  • Whether the alt text repeats nearby text or adds the missing information users need.
  • Whether complex images such as charts also need surrounding text, tables, or long descriptions.

Related tools

Use these examples in review

Related issue library pages

Related guides and resources

Recommended next steps

Check your page Paste HTML into the Alt Text Checker. Run full scan Scan a page and review report links. Browse image issues Review missing, empty, weak, repeated, generic, and filename-like alt findings.