Accessibility: several <img> elements are missing alt text

Open Beginner friendly
#574 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
86/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Quiet
Tech stack
typescript
Domain
accessibility, frontend

Research direction

Start with the four confirmed img elements in src/components/ui/ArticleCard/index.tsx and src/pages/features.tsx, and compare them with the nearby images that already provide alt text. Add descriptive or empty alt values according to whether each image conveys information, then verify all four listed locations meet the issue's accessibility requirement.

Written by the indexing model from the issue text.

Description

What happened

Several <img> elements are rendered without an alt attribute, so screen readers announce nothing (or read the file name) for these images. This is a WCAG 2.1 1.1.1 Non-text Content failure.

Confirmed locations:

  • src/components/ui/ArticleCard/index.tsx — the featured-layout image: 
    <img
  src={props.imgSrc}
  className=" col-start-1 row-start-1 h-full w-full rounded-sm object-cover lg:w-80"
/>
  • src/components/ui/ArticleCard/index.tsx — the normal-layout image: 
    <img src={props.imgSrc} className="object-fit col-start-1 row-start-1 rounded-sm" />
  • src/pages/features.tsx (~line 50) — the Podman Desktop logo: 
    <img id="pdlogo" className="mx-auto" src="logos/optimized/podman-desktop-logo-200w-198h.webp" />
  • src/pages/features.tsx (~line 161) — the Selkie mascot image: 
    <img className="max-h-[200px]" src="images/optimized/podman-selkie-385w-358h.webp" />

For contrast, other images in the codebase already do this correctly (e.g. HeroHeader, ThankYouSection, FeaturesCarousel, community.tsx all pass an alt), so these look like oversights.

What you expected to happen

Every meaningful <img> should have a descriptive alt (and decorative images an empty alt=""), so the site is accessible to screen-reader users.

Suggested fix

Add an alt to each image — e.g. alt={props.title} for the article cards (the thumbnail represents that article), alt="Podman Desktop logo" and alt="Podman Selkie mascot" for the two images on the features page.

I'd be happy to open a PR.

Dominant language
TypeScript
Stars
108
Forks
188
Avg merge
3d 14h
Merged PRs (30d)
11

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from containers/podman.io

All issues in containers/podman.io

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.