Skip to content

About

this extentions aims to make navigation on reddit with screen readers more convenient

Resources

Stars

2 stars

Watchers

0 watching

Forks

Latest commit

 

History

15 Commits

Folders and files

Repository files navigation

Reddit Accessibility Enhancer

A lightweight browser extension that improves Reddit comment navigation for screen reader users.

Reddit conveys comment nesting visually, with indentation and threadlines, which a screen reader cannot expose. This extension turns that nesting into a real heading structure, so a thread can be navigated with heading keys (H, 1–6) instead of arrowing through every line.

What it adds

  • One heading per comment, with its level set by nesting depth: h2 for a root comment, h3 for a reply, and so on, capped at h6.
  • A label with context — alice, 3 hr. ago for a root comment, bob replying to alice, 30 min. ago for a reply.
  • A collapse/expand control for each comment, which hides or shows the comment and everything nested under it.
  • A profile link for the commenter.

The heading holds text and nothing else. The two controls sit in a row placed immediately before it, which is what makes navigation cheap:

Key Lands on
H the heading — the controls row is skipped
↓ from the heading the comment text
↑ from the heading the collapse/expand toggle
↑ twice the profile link

Collapsing a thread is a deliberate act, so it does not belong in the path between a heading and the text it labels. Anything focusable inside a heading becomes its own line in browse mode, which is why nothing focusable lives there.

On new Reddit this also means hiding Reddit's own byline row, which otherwise sits between the heading and the comment text. It is removed from the accessibility tree and from the tab order but stays visible on screen, so the author, timestamp, and profile link are reproduced above it and nothing is lost. The byline is located by position — everything the comment renders before its body — rather than by Reddit's class or slot names, which change.

Old Reddit is left alone here. Its byline is one line to begin with and also carries the comment score, which has nowhere else to go, so it stays readable and no timestamp or profile link is duplicated into the heading.

Files

  • extension/manifest.json — Manifest V3 extension configuration.
  • extension/content.js — Content script that scans Reddit comment pages and adds accessible headings.
  • extension/styles.css — Styles for generated headings, controls, and the screen-reader-only live region.
  • extension/icons/ — Extension icons (16, 32, 48, 128 px).
  • scripts/verify.js — Pre-release checks: manifest validity, version agreement, asset presence, listing field limits.
  • scripts/package.js — Builds the Web Store upload archive.
  • scripts/release-notes.js — Extracts a version's changelog section for the release body.

New Reddit builds each comment as <details role="article"><summary>byline</summary><div>body…</div></details>. The extension finds the body, then hides what the comment renders before it — at every level between the two, which is what reaches the <summary>. Locating it by position rather than by class or slot name is deliberate: those names change.

Install locally

  1. Open your Chromium-based browser's extensions page:
    • Chrome: chrome://extensions
    • Edge: edge://extensions
    • Brave: brave://extensions
  2. Enable developer mode.
  3. Choose Load unpacked.
  4. Select the extension folder from this repository.

Use

The extension runs on these hosts and activates on any page whose path contains /comments/:

  • https://www.reddit.com/*
  • https://reddit.com/*
  • https://new.reddit.com/*
  • https://old.reddit.com/*

It supports old Reddit, the React-based redesign, and the current shreddit layout. It also follows Reddit's in-page navigation, so opening a thread by keyboard or click does not require a refresh, and leaving a thread removes everything it injected.

Threads start expanded. From a heading, press up-arrow once to reach that thread's toggle, then Enter or Space to collapse the comment and its replies; activate it again to bring them back.

Reporting a problem

Reddit changes its markup regularly, and the extension has to find the comment body and byline inside it. If comments stop being announced the way they should:

  1. Open the thread where it happens.
  2. Press Alt+Shift+D. You will hear "Comment structure copied to clipboard".
  3. Paste that into a bug report.

It captures element shape only — tag names, attributes, and how much text each node holds — never the text of anyone's comment, and nothing is sent anywhere. It is the fastest way to see which element the extension picked and which one it should have picked.

Releasing

Releases are tag-driven and run in GitHub Actions. There is no build step and no dependency tree — the scripts use only Node's standard library.

  1. Update version in extension/manifest.json and package.json to the same value, and add a matching ## <version> section to CHANGELOG.md.
  2. Check it locally:
npm run verify
  1. Commit, then tag with the bare version number and push the tag:
git tag -a 1.2.0 -m "Reddit Accessibility Enhancer 1.2.0" && git push origin main --follow-tags

The Release workflow then re-runs the checks, refuses the release if the tag and manifest version disagree, builds the archive, and publishes a GitHub release using that version's changelog section as the notes. Tags with a suffix such as 1.3.0-rc1 are published as prereleases; bare version tags are marked as the latest stable release.

npm run package builds the same archive locally, writing reddit-accessibility-enhancer-<version>.zip to the repository root.

Publishing to the Chrome Web Store

Upload the archive from the GitHub release (or from npm run package) in the Web Store developer dashboard. It contains the contents of extension/ at the archive root, with manifest.json at the top level.

Notes for the store listing:

  • Permissions justification — the extension declares no permissions at all. It only registers a content script on the four Reddit hosts listed above, which is the narrowest scope that covers Reddit's layouts.
  • Data use — nothing is collected, stored, or transmitted. See PRIVACY.md; declare "does not collect user data" in the privacy tab.
  • Single purpose — making Reddit comment threads navigable by screen reader.

*.zip, *.crx, and *.pem are gitignored. Never commit the .pem signing key.

Development

No build step is required. Edit files inside extension, then reload the unpacked extension from the browser extensions page.

About

this extentions aims to make navigation on reddit with screen readers more convenient

Resources

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages