🎨 Palette: Improve screen reader accessibility in README - #154
NITISH-R-G wants to merge 1 commit into
Conversation
- Add `role="presentation"` to purely layout-based `<table>` elements - Convert decorative Markdown images to HTML tags with `alt=""` and `aria-hidden="true"` 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. |
![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.
Reviewer's guide (collapsed on small PRs)Reviewer's GuideThis PR updates the README’s markup to make layout tables and decorative graphics more accessible to screen reader users by adjusting table roles and converting SVGs to hidden, empty-alt images. Sequence diagram for screen reader behavior with updated README accessibilitysequenceDiagram
actor ScreenReader
participant LayoutTable as table_role_presentation
participant DecorativeImage as img_aria_hidden
ScreenReader->>LayoutTable: parse
alt with_role_presentation
LayoutTable-->>ScreenReader: [ignored_as_layout]
end
ScreenReader->>DecorativeImage: parse
alt aria_hidden_true_and_empty_alt
DecorativeImage-->>ScreenReader: [not_announced]
end
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
📝 WalkthroughSummary by CodeRabbit
WalkthroughREADME accessibility markup now identifies decorative images and layout tables for assistive technologies. 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, ensuring the document title precedes
the banner and satisfies markdownlint MD041.
🪄 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: 2599865c-c563-4332-a778-eb4784a630f3
📒 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.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add a top-level heading before the banner.
README.md starts with an image, so it violates markdownlint MD041. Add a meaningful H1 before this decorative image so heading navigation starts with the document title.
🧰 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, ensuring the document
title precedes the banner and satisfies markdownlint MD041.
Source: Linters/SAST tools
1 participant
💡 What:
role="presentation"to layout tables in the README.<img>tags to hide them witharia-hidden="true"andalt="".🎯 Why:
GitHub README profiles heavily use layout tables, which confuse screen readers by announcing them as complex data tables. Decorative images (the top/bottom SVG graphics) create unnecessary auditory noise. This micro-improvement ensures an accessible experience for visually impaired developers visiting the profile.
♿ Accessibility:
PR created automatically by Jules for task 13570422843189024083 started by @NITISH-R-G
Summary by Sourcery
Improve README accessibility by marking layout tables as presentational and hiding decorative SVG images from assistive technologies.
Documentation: