🎨 Palette: Improve README accessibility for screen readers - #136
NITISH-R-G wants to merge 1 commit into
Conversation
- Replaced markdown syntax with semantic `<img>` tags for decorative banner SVGs, setting `alt=""` and `aria-hidden="true"`. - Added `role="presentation"` to `<table>` layout elements to prevent them from being announced as data tables. 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 more accessible, semantic HTML for screen readers while preserving the existing visual appearance. Flow diagram for updated README accessibility behaviorflowchart LR
A[DecorativeImage img alt empty aria-hidden true]
B[DecorativeImage img announced by screen reader]
C[LayoutTable table role presentation]
D[LayoutTable table announced as data table]
E[ScreenReaderOutput minimal noise]
B --> E
D --> E
A --> E
C --> E
File-Level ChangesTips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe README now uses explicit accessibility markup for decorative SVG images and the Featured Builds and Now section tables. ChangesREADME accessibility markup
Estimated code review effort: 1 (Trivial) | ~2 minutes 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 |
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: Update the repository’s .markdownlint.json configuration to disable
rule MD041, preserving the current README.md layout that begins with an image.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: b806c13d-5886-4c86-a8d0-d4a6d3628a2d
📒 Files selected for processing (1)
README.md
📜 Review details
🧰 Additional context used
🪛 markdownlint-cli2 (0.23.1)
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
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== repo files (top-level/config candidates) =="
git ls-files | sed -n '1,120p'
echo
echo "== README first 20 lines =="
sed -n '1,20p' README.md || true
echo
echo "== markdownlint config files =="
for f in .markdownlint.json .markdownlint.yaml .markdownlint.yml markdownlint.config.json markdownlint.config.yaml markdownlint.config.yml; do
if [ -f "$f" ]; then
echo "--- $f ---"
cat -n "$f"
fi
done
echo
echo "== package/config references to markdownlint =="
rg -n "markdownlint|MD041|first-line-heading|no-multiple-blanks|lines" package.json README.md .github .markdownlint* 2>/dev/null || true
echo
echo "== workflow files mentioning Markdown lint =="
for f in $(git ls-files .github/workflows); do
echo "--- $f ---"
rg -n "markdownlint|markdownlint-cli2|MD041" "$f" || true
doneRepository: NITISH-R-G/NITISH-R-G
Length of output: 2544
🏁 Script executed:
#!/bin/bash
set -euo pipefail
set +e
echo "== README exactly first line =="
python3 - <<'PY'
from pathlib import Path
p=Path('README.md')
if p.exists():
txt=p.read_text()
lines=txt.splitlines()
print("line_count", len(lines))
print("first_line", repr(lines[0] if lines else ""))
print("starts_heading", lines[0].startswith("#") if lines else False)
print("first_image", "<img" in lines[0].lower() if lines else False)
PY
echo
echo "== deterministic MD041 rule check from markdownlint-docs local if present =="
# Read-only check: detect whether README starts with a heading and whether any file has first-heading exception.
python3 - <<'PY'
from pathlib import Path
import re, json, yaml
start = Path('README.md').read_text().splitlines()[0] if Path('README.md').exists() else ''
config_found=[]
has_exception=False
for f in Path('.').glob('**/.markdownlint*'):
if f.is_file():
text=f.read_text(errors='ignore')
if 'MD041' in text or 'first-line-heading' in text or 'first-line-h1' in text:
config_found.append(str(f))
if re.search(r'(MD041|first-line-heading|first-line-h1).*false|false.*MD041|false.*first-line-heading|false.*first-line-h1', text, re.I|re.S):
has_exception=True
root = Path('.')
for f in root.glob('.markdownlint*json') or []:
if f.exists():
try:
data=json.loads(f.read_text(errors='ignore'))
if 'MD041' in data and data['MD041'] is False:
has_exception=True
if 'MD041' in data.get('default', {}) and data['default']['MD041'] is False:
has_exception=True
except Exception as e:
print("json_parse_error", f, e)
print({
"readme_starts_with_heading": start.startswith("#"),
"readme_first_line": start[:100],
"markdownlint_config_files": config_found,
"apparent_MD041_disabled_exception": has_exception,
})
PYRepository: NITISH-R-G/NITISH-R-G
Length of output: 513
Disable MD041 in the Markdown lint config.
README.md starts with an image, so a Markdown linter enabled with markdownlint-cli2 will report MD041. Since the repository already uses .markdownlint.json, add "MD041": false there if the current layout should be preserved.
🧰 Tools
🪛 markdownlint-cli2 (0.23.1)
[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, Update the repository’s .markdownlint.json
configuration to disable rule MD041, preserving the current README.md layout
that begins with an image.
Source: Linters/SAST tools



💡 What: Replaced decorative top/bottom image tags with semantic HTML and
aria-hidden="true", and addedrole="presentation"to layout tables.🎯 Why: GitHub Profile READMEs often use tables for layout and decorative images. This creates auditory noise for screen reader users (who hear complex table structures instead of reading the content natively).
📸 Before/After: N/A (no visual change).
♿ Accessibility: Improves screen reader experience by hiding decorative assets and preventing layout structures from being announced as tabular data.
PR created automatically by Jules for task 3238243485647392776 started by @NITISH-R-G
Summary by Sourcery
Improve README accessibility by marking decorative images and layout tables as non-informative for assistive technologies.
Enhancements: