AccessiType

AccessiType is a high-performance, Next.js typing tutor engineered specifically for the blind and low-vision (BLV) community. It solves the "Visual Fatigue" bottleneck of traditional typing software.

The Core Philosophy

Traditional typing tutors are often inaccessible because they require high-speed visual tracking of moving cursors, scrolling text, or small-font prompts. AccessiType shifts the focus from visual monitoring to multisensory mastery.

By combining instant earcons, static focal point design, and high-contrast visual feedback, it helps users build muscle memory without the cognitive load of navigating a standard visual interface.

Key Features

• The Static Focal Point (Typoscope Viewport): A massive, centered character prompt that eliminates the need for horizontal eye tracking.
• Latency-Adjusted WPM: The speed timer starts on the first keystroke of a drill, isolating active typing speed from page-load or reading delay.
• Low-Latency Auditory Feedback: Utilizes the Web Audio API (AudioContext) to generate instant "Earcons" (pings for correct, thuds for incorrect) without the delay of preloaded audio files.
• Multimodal Pedagogy:
  • Learn Mode: Practices the current home-row training set with rhythmic spacing.
  • Build Mode: Synthesizes dictionary words using only the current training set.
  • Advanced Mode: Generates high-frequency N-Grams (e.g., the, ion, ent) weighted dynamically by the user's historically weakest keys and measured response latency.
• Visual Keymap: An integrated, glassmorphic visual keyboard that highlights the target key and provides real-time depression feedback for visual learners.
• Premium High-Contrast Themes: Built-in support for multiple color profiles (e.g., Solarized, Monochrome, High-Contrast Yellow/Black) using Tailwind CSS.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to launch the MVP experience.

Tech Stack

• Framework: Next.js (App Router)
• Styling: Tailwind CSS + PostCSS
• Animations: Framer Motion
• Audio: Web Audio API (AudioContext)
• Typography: JetBrains Mono