tags missing alt attributes – L#443
Conversation
📝 WalkthroughWalkthroughImage alt text on the 404 NotFound page is updated from "ACBU" to "ACBU logo" to provide a more descriptive label for the logo image, addressing WCAG 1.1.1 non-text content requirements. Changes404 Page Accessibility
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 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.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/not-found.tsx (1)
19-19:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAdd aria-hidden to decorative icons for screen reader accessibility.
The FileQuestion and Home icons are purely decorative (they don't convey information beyond the surrounding text). Adding
aria-hidden="true"prevents screen readers from announcing them unnecessarily, improving the experience for screen reader users and aligning with WCAG best practices.♿ Proposed fix to hide decorative icons from screen readers
<div className="rounded-full bg-primary/10 p-4"> - <FileQuestion className="h-10 w-10 text-primary" /> + <FileQuestion className="h-10 w-10 text-primary" aria-hidden="true" /> </div><Button asChild> <Link href="/"> - <Home className="w-4 h-4 mr-2" /> + <Home className="w-4 h-4 mr-2" aria-hidden="true" /> Go to dashboard </Link> </Button>Also applies to: 34-34
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/not-found.tsx` at line 19, The FileQuestion and Home icon elements are decorative and should be hidden from assistive tech; update the JSX for the FileQuestion component (currently <FileQuestion className="h-10 w-10 text-primary" />) and the Home icon at the other occurrence to include aria-hidden="true" so screen readers ignore them, e.g., add the aria-hidden prop to those components and ensure you do not remove existing className or other props.
🧹 Nitpick comments (1)
app/not-found.tsx (1)
11-11: ⚡ Quick winGood improvement to alt text, consider expanding the acronym.
The change from "ACBU" to "ACBU logo" makes the alt text more descriptive and better satisfies WCAG 1.1.1. If "ACBU" is an acronym, consider spelling it out for screen reader users (e.g., "Automotive Components Business Unit logo") to provide maximum clarity, though the current text is acceptable.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/not-found.tsx` at line 11, Update the image alt text to expand the acronym for screen readers: locate the JSX img element currently using alt="ACBU logo" (in the NotFound component / app/not-found.tsx) and replace it with a more descriptive string that spells out the acronym and retains the short form, e.g., "Automotive Components Business Unit (ACBU) logo".
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@app/not-found.tsx`:
- Line 19: The FileQuestion and Home icon elements are decorative and should be
hidden from assistive tech; update the JSX for the FileQuestion component
(currently <FileQuestion className="h-10 w-10 text-primary" />) and the Home
icon at the other occurrence to include aria-hidden="true" so screen readers
ignore them, e.g., add the aria-hidden prop to those components and ensure you
do not remove existing className or other props.
---
Nitpick comments:
In `@app/not-found.tsx`:
- Line 11: Update the image alt text to expand the acronym for screen readers:
locate the JSX img element currently using alt="ACBU logo" (in the NotFound
component / app/not-found.tsx) and replace it with a more descriptive string
that spells out the acronym and retains the short form, e.g., "Automotive
Components Business Unit (ACBU) logo".
2 participants
Closes #342
Closes #344
Multiple pages: Decorative or illustrative images lack alt="" and content images lack descriptive alt text, failing WCAG 1.1.1 (Non-text Content)
Summary by CodeRabbit