Skip to content

🎨 Palette: Improve README accessibility for screen readers - #136

Open
NITISH-R-G wants to merge 1 commit into
mainfrom
ux-accessibility-improvements-3238243485647392776
Open

NITISH-R-G wants to merge 1 commit into
mainfrom
ux-accessibility-improvements-3238243485647392776

Conversation

@NITISH-R-G

@NITISH-R-G NITISH-R-G commented Aug 3, 2026

Copy link
Copy Markdown
Owner

💡 What: Replaced decorative top/bottom image tags with semantic HTML and aria-hidden="true", and added role="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:

  • Replace decorative Markdown image syntax with semantic img elements hidden from screen readers.
  • Mark layout tables in the README as presentational to avoid being announced as data tables.

- 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>
@google-labs-jules

Copy link
Copy Markdown
Contributor

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@sourcery-ai

sourcery-ai Bot commented Aug 3, 2026

Copy link
Copy Markdown
Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

This 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 behavior

flowchart 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
Loading

File-Level Changes

Change Details Files
Make decorative top and bottom images non-announcing for screen readers using semantic with appropriate attributes.
  • Replace Markdown image syntax for the top decorative image with an HTML tag
  • Set empty alt text on decorative images to mark them as non-informative
  • Add aria-hidden="true" to decorative images so they are ignored by assistive technologies
  • Apply the same HTML replacement and attributes to the bottom decorative image
README.md
Mark layout tables as presentational so they are not exposed as data tables to screen readers.
  • Add role="presentation" to the Featured Builds layout table
  • Add role="presentation" to the Now section layout table
README.md

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your trial has ended. Reactivate Greptile to resume code reviews.

@sonarqubecloud

sonarqubecloud Bot commented Aug 3, 2026

Copy link
Copy Markdown

@coderabbitai

coderabbitai Bot commented Aug 3, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Summary by CodeRabbit

  • Documentation
    • Updated README decorative images to use accessible HTML image elements.
    • Marked Featured Builds and Now section tables as presentational for improved accessibility.

Walkthrough

The README now uses explicit accessibility markup for decorative SVG images and the Featured Builds and Now section tables.

Changes

README accessibility markup

Layer / File(s) Summary
Add accessibility attributes
README.md
Decorative SVG images now use HTML <img> elements with presentation attributes. The Featured Builds and Now tables now use role="presentation".

Estimated code review effort: 1 (Trivial) | ~2 minutes

Poem

I’m a rabbit with ears held high,
Marking images decorative as they fly.
Tables now speak with roles clear,
Accessible README changes are here.
Hop, hop—no clutter near!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly identifies the README accessibility improvement for screen readers.
Description check ✅ Passed The description accurately explains the accessibility changes to images and layout tables.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch ux-accessibility-improvements-3238243485647392776

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've reviewed your changes and they look great!


Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between f25f98b and 0349142.

📒 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

Comment thread README.md
@@ -1,4 +1,4 @@
![](assets/Bottom_up.svg)
<img src="assets/Bottom_up.svg" alt="" aria-hidden="true" />

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 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
done

Repository: 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,
})
PY

Repository: 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant