Inclusive Reader

An open web app that makes text kinder to dyslexia-friendly spacing, ADHD-friendly focus, keyboard-first navigation, and read-aloud—with no logins but paste and learn, lowering barriers to literacy

Comment

Inspiration

Reading is the gateway skill for every subject, yet many learners quietly battle the page before they can reach the ideas. Research indicates that modest typographic changes can lower cognitive load and raise comprehension; experience tells us that teachers have no spare time to apply them one by one. According to a 2023 umbrella meta-analysis synthesizing 13 systematic reviews (588 studies; 3.28 million participants) that estimates global ADHD prevalence at ~8% in children and adolescents, and UNESCO MGIEP summaries indicating dyslexia affects roughly 10–15% of people worldwide, tens of millions of learners read under extra strain—yet their needs remain routinely neglected in everyday classrooms. Students with dyslexia report visual crowding and fatigue; students with ADHD report cognitive overload and loss of momentum. Classrooms rarely have time to reformat every handout. We set out to offer a 10-second intervention—paste any text and receive a calmer, more equitable page that preserves dignity, agency, and learning time.

What it does

Inclusive Reader transforms any pasted text into a clean, accessible view designed for diverse cognitive needs—instantly. Dyslexia-friendly mode: increased line height and letter spacing, left alignment, controlled line length, and line-by-line highlighting to reduce visual stress and support tracking. ADHD-friendly mode: progressive disclosure (one paragraph at a time), keyboard navigation (J/K or arrows), and a gentle Pomodoro cadence to pace attention without notifications or sound. Zero friction: paste → Render → toggle modes. Preferences persist locally; works offline after first load. No accounts, no telemetry.

How we built it

Stack: 100% vanilla HTML, CSS, JavaScript (no frameworks, no build tools). Rendering pipeline: blank-line paragraphing + lightweight sentence segmentation via punctuation-aware regex (English & CJK). Accessibility: semantic HTML, visible focus rings, ARIA labels, fully keyboard-operable UI; careful contrast and a readable line length (~45–75 characters). State: localStorage only (typography, mode, position, checklist, timer). Hosting: single-file index.html on GitHub Pages → fast, inspectable, and easy to adopt in schools.

Challenges we ran into

Designing for two needs at once: dyslexia benefits from additional structure; ADHD benefits from less on screen. We solved this with separate, combinable toggles and conservative defaults. Sentence segmentation without libraries: punctuation rules across languages required robust fallbacks to avoid breaking reading flow. A11y × aesthetics in a small CSS budget: preserving contrast, focus visibility, and line length while maintaining a calm, light pink/white theme. Edge-case caching on Pages: documented hard refresh and added simple query-param versioning guidance.

Accomplishments that we're proud of

A zero-dependency, single-file tool that measurably lowers cognitive load for many readers. Keyboard-first interaction and line-by-line highlight that support tracking without audio or animation noise. Privacy by design: no authentication, no data exhaust; everything stays on the learner’s device. Works well on low-resource machines and offline-friendly—because access should not hinge on bandwidth.

What we learned

Small typographic adjustments (line height, spacing, chunking) can produce disproportionate gains in comfort and comprehension. Progressive disclosure benefits most readers, not only those with ADHD: less clutter → better working memory. Building for accessibility from day one is simpler and more robust than retrofitting later.

What's next for Inclusive Reader

PWA support for installable, offline use in classrooms with unstable internet. Import/Export of local settings and reading position via JSON (still client-side only). Lightweight glossary of frequent academic terms (fully local; no network calls). Annotations (highlight + notes) stored locally, with optional PNG export for teachers. Smarter paragraphing by heading/length to reduce manual cleanup from copy-pasted PDFs.

Built With

  • accessibility-first
  • aria-for-a11y
  • css
  • css-focus
  • css-focus/aria-for-a11y-databases:-none-(no-server;-all-data-stays-in-the-browser)-cloud-services:-none-version-control:-git-+-github-compatibility:-modern-chromium/edge/firefox/safari-other:-single-file-app-(index.html)
  • css-focus/aria-for-a11y-git-modern-chromium/edge/firefox/safari-single-file-app-(index.html)
  • dom
  • git
  • github
  • html
  • javascript-(vanilla)
  • javascript-(vanilla)-frameworks/libraries:-none-(no-build-tools
  • javascript-(vanilla)-github-pages-dom
  • keyboard-events
  • localstorage
  • localstorage-(preferences)
  • modern-chromium/edge/firefox/safari
  • no-ui-frameworks)-platforms/hosting:-github-pages-web-apis:-dom
  • responsive-layout
  • semantics
  • single-file-app-(index.html)
  • web-speech-synthesis
  • web-speech-synthesis-(read-aloud)
Share this project:

Updates