Conversation
Treat <img> elements with aria-hidden="true" as exempt from the alt attribute requirement. Update rule implementation (src + built dist) to detect aria-hidden (case-insensitive) and skip the warning, add unit tests for aria-hidden="true" and "TRUE", and update the rule documentation with the new behavior and example.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the alt-require rule to permit img tags without an alt attribute if they are marked with aria-hidden="true". The changes include updates to the core logic, documentation, and new test cases. Feedback suggests optimizing the attribute check by moving it within the specific tag condition to avoid unnecessary processing and adding .trim() for better robustness. Additionally, further test cases for aria-hidden="false" and whitespace handling were recommended.
| const code = '<img width="200" height="300" aria-hidden="TRUE">' | ||
| const messages = HTMLHint.verify(code, ruleOptions) | ||
| expect(messages.length).toBe(0) | ||
| }) |
There was a problem hiding this comment.
It would be beneficial to add test cases for aria-hidden="false" (to ensure it still warns when alt is missing) and for values with whitespace (e.g., "true ") to verify the robustness of the implementation.
| }) | |
| }) | |
| it('Img tag with aria-hidden="false" and no alt attribute should result in an error', () => { | |
| const code = '<img width="200" height="300" aria-hidden="false">' | |
| const messages = HTMLHint.verify(code, ruleOptions) | |
| expect(messages.length).toBe(1) | |
| }) | |
| it('Img tag with aria-hidden="true " and no alt attribute should not result in an error', () => { | |
| const code = '<img width="200" height="300" aria-hidden="true ">' | |
| const messages = HTMLHint.verify(code, ruleOptions) | |
| expect(messages.length).toBe(0) | |
| }) |
There was a problem hiding this comment.
Pull request overview
Updates the alt-require rule so <img> elements hidden from assistive technologies via aria-hidden="true" don’t trigger the missing-alt warning, aligning lint behavior with the documented exemption.
Changes:
- Skip the
<img>missing-altwarning whenaria-hiddenis present with valuetrue(value check is case-insensitive). - Add unit tests for
aria-hidden="true"andaria-hidden="TRUE". - Update rule documentation and examples to reflect the new exemption; commit updated
distoutput.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| website/src/content/docs/rules/alt-require.mdx | Documents the aria-hidden="true" exemption and adds an example. |
| test/rules/alt-require.spec.js | Adds coverage ensuring hidden images don’t produce messages. |
| src/core/rules/alt-require.ts | Implements the aria-hidden="true" exemption in the rule logic. |
| dist/core/rules/alt-require.js | Updates compiled output to match the rule behavior change. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Refine alt-require rule to trim and normalize the aria-hidden attribute when deciding whether an <img> needs an alt. The check now inlines mapAttrs['aria-hidden']?.trim().toLowerCase() !== 'true' (removing the previous isAriaHidden variable) so values with surrounding whitespace are treated correctly. Changes applied to both src (TS) and compiled dist (JS) files.
Deploying htmlhint with
|
| Latest commit: |
db67e8e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3b8b0c81.htmlhint.pages.dev |
| Branch Preview URL: | https://1778-if-an-image-has-aria-hi.htmlhint.pages.dev |
Add tests to alt-require.spec.js to verify aria-hidden handling: an <img> with aria-hidden=" true " (with surrounding spaces) should not trigger an alt error, while an <img> with aria-hidden="false" should produce a warning (checks include rule id, line, column and type).
coliff
deleted the
1778-if-an-image-has-aria-hiddentrue-it-does-not-need-an-alt-attribute
branch
Treat
<img>elements witharia-hidden="true"as exempt from the alt attribute requirement. Update rule implementation (src + built dist) to detect aria-hidden (case-insensitive) and skip the warning, add unit tests foraria-hidden="true"and "TRUE", and update the rule documentation with the new behavior and example.