asyncapi / asyncapi/website

[BUG] : Missing descriptive alt text in Blog post cover images (WCAG 2.1 A violation)

Open
#5,003 6 comments 0 reactions 0 assignees View on GitHub
bug waiting-for-author
Dominant language
TypeScript
Stars
716
Forks
1.2k
Avg merge
1d 12h
Merged PRs (30d)
35

Description

### Describe the bug.

Blog post cover images are currently rendered with empty `alt` attributes (`alt=""`).
While empty alt text is appropriate for purely decorative images, these images are informative (they represent blog content) and should include meaningful alternative text for screen reader users.

## Affected Files

- components/newsroom/FeaturedBlogPost.tsx (line 57)
- components/navigation/BlogPostItem.tsx (line 77)
- components/layout/BlogLayout.tsx (line 88)

### Expected behavior

Blog post cover images should include descriptive alt text
```react
{post.coverCaption
```

### Screenshots

Image

Image

### How to Reproduce

1. Navigate to https://www.asyncapi.com/blog
2. Open browser DevTools and inspect any blog post card
3. Observe that the cover image uses alt=""

### 🖥️ Device Information [optional]

- Operating System (OS):
- Browser:
- Browser Version:

### 👀 Have you checked for similar open issues?

- [x] I checked and didn't find similar issue

### 🏢 Have you read the Contributing Guidelines?

- [x] I have read the [Contributing Guidelines](https://github.com/asyncapi/.github/blob/master/CONTRIBUTING.md)

### Are you willing to work on this issue ?

Yes I am willing to submit a PR!

Contributor guide

Open the contributing guide

Research direction

Read the cover-image rendering in components/newsroom/FeaturedBlogPost.tsx, components/navigation/BlogPostItem.tsx, and components/layout/BlogLayout.tsx. Reproduce the issue on the blog page and inspect the rendered images. Done means informative cover images expose descriptive alternative text using the stated caption-or-title fallback, with no empty alt attributes in the affected views.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
accessibility, frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
76/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.