Skip to content

fix: Add descriptive alt text to project card images for Accessibility#1233

Merged
steam-bell-92 merged 1 commit into
steam-bell-92:mainfrom
Kinara2020:fix/alt-text-accessibility
Jun 17, 2026
Merged

fix: Add descriptive alt text to project card images for Accessibility#1233
steam-bell-92 merged 1 commit into
steam-bell-92:mainfrom
Kinara2020:fix/alt-text-accessibility

Conversation

@Kinara2020

@Kinara2020 Kinara2020 commented Jun 17, 2026

Copy link
Copy Markdown

Description

Project card images in the web app were missing descriptive alt attributes. Images had alt="" which fails WCAG 2.1 accessibility standards and makes the site unusable for screen reader users.

This PR adds meaningful alt text to all project card banner images dynamically using the project title.

Linked Issue

Fixes #1222

Changes Made

•	Updated search.js — changed img.alt = "" to img.alt = project.title + " project preview"
•	Added forEach loop to set alt on all .card-banner images using their card’s h3 title text

Type of Change

•	Bug fix

Testing

•	Tested locally at http://127.0.0.1:5500/web-app/index.html
•	Verified via DevTools Elements tab — alt="Simon Says project preview" visible on card images
•	No console errors introduced

Checklist

•	My code follows the project’s coding style
•	I have performed a self-review of my code
•	I am submitting PR from a dedicated branch, not main
•	I have linked the relevant issue

Screenshots / Screen Recording

✅ Before: alt="" on all card banner images
✅ After: alt="Simon Says project preview" — descriptive alt text visible in DevTools

image

@vercel

vercel Bot commented Jun 17, 2026

Copy link
Copy Markdown

@kinara2086 is attempting to deploy a commit to the Anuj's projects Team on Vercel.

A member of the Team first needs to authorize it.

@Kinara2020 Kinara2020 left a comment

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed

@Kinara2020

Kinara2020 commented Jun 17, 2026

Copy link
Copy Markdown
Author

Hello @steam-bell-92
Would like to get feedback upon and would request to add appropriate gssoc labels.

@Kinara2020

Copy link
Copy Markdown
Author

The CI failure in modal.spec.js:4:3 is unrelated to this PR. It tests Modal Lifecycle & Focus Trapping behaviour which is not affected by the alt text changes made in this PR.
15 tests passed successfully.

@steam-bell-92 steam-bell-92 merged commit 312235c into steam-bell-92:main Jun 17, 2026
10 of 12 checks passed
@github-actions

Copy link
Copy Markdown
Contributor

🎉 Thank you for your contribution!

Your Pull Request has been merged successfully.

We appreciate the time and effort you put into improving this project. Contributions like yours help the repository grow and stay useful for everyone.

If you'd like to contribute again, please check the open issues and make sure you are assigned before opening another Pull Request.

Thanks again for your support! 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

💡 [Feature]: Fix: Add missing alt text to project card images for Accessibility

3 participants