fix: improve image alt text for accessibility#654
Conversation
Improved alt text for images to enhance accessibility. Fixes AOSSIE-Org#416
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughUpdated Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@eduaid_web/src/pages/Home.jsx`:
- Line 79: The decorative stars image currently uses alt="feature icon" which is
redundant for screen readers; locate the <img src={starsImg} ... /> in Home.jsx
(the element referencing starsImg) and change its alt attribute to an empty
string (alt="") so it is treated as decorative per WCAG; ensure no additional
ARIA labels are added for this element.
- Line 47: The img element in Home.jsx has alt=" EduAid logo" with a leading
space; remove that leading space so the alt attribute reads "EduAid logo"
(locate the <img src={logo_trans} ... alt=... /> in the Home component and
update the alt value) to ensure screen readers read the text correctly.
- Line 64: The img element using the starsImg asset has an alt value with a
leading space (" rating stars") and appears decorative in the subtitle; update
the <img> usage in Home.jsx to remove the leading space if the stars convey
meaningful content (change alt to "rating stars") or, preferably, mark it as
decorative by setting alt="" so screen readers skip it; ensure you update the
img element that references starsImg accordingly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7cc1c6ba-e310-40d6-8935-d86a2bd4d6cc
📒 Files selected for processing (1)
eduaid_web/src/pages/Home.jsx
| <div className="w-full h-full bg-cust bg-opacity-50 bg-custom-gradient overflow-auto px-4 py-6 sm:px-8 md:px-16"> | ||
| <div className="max-w-5xl mx-auto"> | ||
| <img src={logo_trans} alt="logo" className="w-24 my-4 sm:my-6" /> | ||
| <img src={logo_trans} alt=" EduAid logo" className="w-24 my-4 sm:my-6" /> |
There was a problem hiding this comment.
Remove the leading space in the alt text.
The alt text " EduAid logo" contains a leading space, which will cause screen readers to announce an awkward pause before "EduAid logo". Alt text should start with the descriptive content directly.
🔧 Proposed fix
- <img src={logo_trans} alt=" EduAid logo" className="w-24 my-4 sm:my-6" />
+ <img src={logo_trans} alt="EduAid logo" className="w-24 my-4 sm:my-6" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <img src={logo_trans} alt=" EduAid logo" className="w-24 my-4 sm:my-6" /> | |
| <img src={logo_trans} alt="EduAid logo" className="w-24 my-4 sm:my-6" /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@eduaid_web/src/pages/Home.jsx` at line 47, The img element in Home.jsx has
alt=" EduAid logo" with a leading space; remove that leading space so the alt
attribute reads "EduAid logo" (locate the <img src={logo_trans} ... alt=... />
in the Home component and update the alt value) to ensure screen readers read
the text correctly.
| className="flex items-center rounded-l-2xl sm:rounded-2xl px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] gap-4 w-fit" | ||
| > | ||
| <img src={starsImg} width={32} height={16} alt="" /> | ||
| <img src={starsImg} width={32} height={16} alt="feature icon" /> |
There was a problem hiding this comment.
Reconsider: this decorative image should use empty alt text.
Changing from alt="" to alt="feature icon" is a step backward for accessibility. The stars image here is decorative—the meaningful content is already provided by the feature text ("Doc/Audio Input", etc.). Generic alt text like "feature icon" adds no value and creates redundant announcements for screen reader users. Per WCAG guidelines, decorative images should use alt="".
♻️ Proposed fix to restore decorative alt
- <img src={starsImg} width={32} height={16} alt="feature icon" />
+ <img src={starsImg} width={32} height={16} alt="" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <img src={starsImg} width={32} height={16} alt="feature icon" /> | |
| <img src={starsImg} width={32} height={16} alt="" /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@eduaid_web/src/pages/Home.jsx` at line 79, The decorative stars image
currently uses alt="feature icon" which is redundant for screen readers; locate
the <img src={starsImg} ... /> in Home.jsx (the element referencing starsImg)
and change its alt attribute to an empty string (alt="") so it is treated as
decorative per WCAG; ensure no additional ARIA labels are added for this
element.
1 participant
Improved Alt Text for Images to Enhance Accessibility
Addressed Issues
Fixes #416
AI Usage Disclosure
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a helpful aid, it is essential that your contributions:
Meet the task requirements
Build successfully
Include relevant tests
Pass all linters
Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please ensure you fully understand the changes you are proposing and their impact. Low-quality AI-generated contributions (“AI slop”) are strongly discouraged and may result in blocking or banning. Do not spam repositories with AI-generated content.
Check one of the checkboxes below:
This PR does not contain AI-generated code at all.
I have tested the code locally and I am responsible for it.
I have used the following AI models and tools: TODO
Checklist
1- My PR addresses a single issue, fixes a single bug or makes a single improvement.
2- My code follows the project's code style and conventions.
3- If applicable, I have made corresponding changes or additions to the documentation.
4- If applicable, I have made corresponding changes or additions to tests.
5- My changes generate no new warnings or errors.
6- I have joined the Discord server and I will share a link to this PR with the project maintainers there.
7- I have read the Contribution Guidelines.
8- Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
9- I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.
Summary by CodeRabbit