🎨 Palette: Improve screen reader accessibility in README.md - #148
NITISH-R-G wants to merge 1 commit into
Conversation
… README.md Co-authored-by: NITISH-R-G <225521762+NITISH-R-G@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Reviewer's guide (collapsed on small PRs)Reviewer's GuideThis PR updates the README’s decorative images and layout tables to use accessible HTML markup so screen readers ignore non-informational visuals and treat layout tables as presentational only. Flow diagram for screen reader handling of updated README markupflowchart TD
sr[ScreenReader]
readme[README_md]
table[table role=presentation]
img[img alt="" aria-hidden=true]
content[Text_content_in_layout_table]
sr --> readme
readme --> table
readme --> img
table --> content
sr -->|linear reading| content
sr -.->|ignored as presentational| table
sr -.->|skipped as decorative| img
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
📝 WalkthroughSummary by CodeRabbit
WalkthroughREADME accessibility markup now hides decorative SVG images from assistive technology and identifies the Featured Builds and Now tables as presentational. ChangesREADME accessibility
Estimated code review effort: 1 (Trivial) | ~2 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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.
Inline comments:
In `@README.md`:
- Line 1: Add a meaningful top-level H1 heading at the beginning of README.md
before the decorative Bottom_up.svg image, preserving the image and its
accessibility attributes.
🪄 Autofix
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: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: eb3b4ada-6533-47e6-86e1-093c7b9ed41c
📒 Files selected for processing (1)
README.md
📜 Review details
🧰 Additional context used
🪛 markdownlint-cli2 (0.23.2)
README.md
[warning] 1-1: First line in a file should be a top-level heading
(MD041, first-line-heading, first-line-h1)
🔇 Additional comments (1)
README.md (1)
52-52: LGTM!Also applies to: 94-94, 137-137
| @@ -1,4 +1,4 @@ | |||
|  | |||
| <img src="assets/Bottom_up.svg" alt="" aria-hidden="true" /> | |||
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Add a top-level heading before the decorative image.
README.md starts with a hidden image instead of a document heading. Add a meaningful H1 before this image to improve screen reader navigation and resolve the MD041 warning.
🧰 Tools
🪛 markdownlint-cli2 (0.23.2)
[warning] 1-1: First line in a file should be a top-level heading
(MD041, first-line-heading, first-line-h1)
🤖 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 `@README.md` at line 1, Add a meaningful top-level H1 heading at the beginning
of README.md before the decorative Bottom_up.svg image, preserving the image and
its accessibility attributes.
Source: Linters/SAST tools
1 participant
💡 What: Added
role="presentation"to layout<table>elements and converted decorative markdown images to HTML<img>tags withalt="" aria-hidden="true".🎯 Why: GitHub Markdown lacks grid/flexbox support, so developers often use tables for layouts. Screen readers interpret these as complex data tables, causing severe auditory clutter. Additionally, decorative header/footer SVGs add unnecessary noise if read aloud.
📸 Before/After: Visuals remain entirely unchanged, only the underlying HTML tags and accessibility attributes were updated.
♿ Accessibility: Screen readers will now correctly ignore the layout tables (reading their content linearly instead of as table cells) and will skip over the decorative header and footer SVGs.
PR created automatically by Jules for task 7315096725327249593 started by @NITISH-R-G
Summary by Sourcery
Improve accessibility of README layout elements and decorative images for screen readers.
Bug Fixes: