Raise text contrast, expose the passage to screen readers, add a focus hint, and blur only typed text in Hard Mode

- Untyped text, labels, and primary buttons now meet WCAG AA contrast.
  An axe check in the tests covers the main screen and both dialogs.
- The passage is copied into a visually hidden element that describes
  the input. Settings pills set aria-pressed, and the result dialog is
  described by its WPM and accuracy.
- When the input loses focus, a hint covers the passage. A letter key
  pressed elsewhere moves focus back to the input.
- Hard Mode blurs characters already typed instead of the whole passage.

Fixes #7, fixes #8, fixes #9, fixes #10.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: TMHSDigital

README.md

@@ -16,11 +16,13 @@ Open `index.html` in a browser, or serve the folder with any static file server.
 - **Stats**: WPM, accuracy, mistakes, and your best WPM for the current settings, updated as you type.
   - WPM is correct characters divided by five, per minute of real elapsed time.
   - Accuracy is the share of typed characters that matched, counting mistakes you later fixed. It is rounded down, so 100% means no mistakes.
-- **Hard Mode**: blurs the text you are typing.
+- **Hard Mode**: blurs the characters you have already typed, so you cannot see your mistakes. The text ahead stays readable.
 - **Ghost Mode**: records the timing of your best run and replays its position as a second cursor while you type.
 - **Results**: a modal with your WPM and accuracy, a line chart of your last ten runs at the current settings once you have two or more, and a button that copies a one-line summary to the clipboard.
 - **Sound**: short tones made with the Web Audio API for keypress, mistake, and completion. Can be turned off.
 - **Keyboard**: Tab restarts while you are typing. Escape closes a dialog. Opening Settings during a run abandons the run.
+- **Focus**: if the typing input loses focus, a hint appears over the text. Pressing a letter key moves focus back to the input.
+- **Screen readers**: the passage is available as the input's description, settings buttons report whether they are selected, and the result dialog reads out WPM and accuracy.
 - **Reduced motion**: with the OS reduce-motion setting on, the background pulse, caret blink, and fades are turned off.
 
 Pasting into the input is blocked, and the caret stays at the end: arrow keys, Home, End, select-all, and clicks do not move it.

index.html

@@ -97,11 +97,15 @@ <h1>TYPE<span class="accent">SPEED</span></h1>
 
                 <div class="typing-container">
                     <div id="quote-display" class="quote-display" aria-hidden="true"></div>
+                    <p id="quote-text" class="visually-hidden"></p>
+                    <div id="focus-hint" class="focus-hint" aria-hidden="true">
+                        Click here or press any key to type
+                    </div>
                     <textarea
                         id="typing-input"
                         class="typing-input"
                         aria-label="Type the text shown above"
-                        placeholder="Type here..."
+                        aria-describedby="quote-text"
                         autocomplete="off"
                         autocorrect="off"
                         autocapitalize="off"
@@ -139,10 +143,11 @@ <h1>TYPE<span class="accent">SPEED</span></h1>
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="result-title"
+                aria-describedby="result-stats"
             >
                 <div class="modal-content">
                     <h2 id="result-title">Result</h2>
-                    <div class="modal-stats">
+                    <div class="modal-stats" id="result-stats">
                         <div class="modal-stat">
                             <span class="label">WPM</span>
                             <span id="modal-wpm" class="value">0</span>
@@ -192,8 +197,12 @@ <h2 id="settings-title">Settings</h2>
                             role="group"
                             aria-labelledby="mode-label"
                         >
-                            <button class="pill active" data-value="time">Time</button>
-                            <button class="pill" data-value="words">Words</button>
+                            <button class="pill active" data-value="time" aria-pressed="true">
+                                Time
+                            </button>
+                            <button class="pill" data-value="words" aria-pressed="false">
+                                Words
+                            </button>
                         </div>
                     </div>
 
@@ -205,9 +214,11 @@ <h2 id="settings-title">Settings</h2>
                             role="group"
                             aria-labelledby="duration-label"
                         >
-                            <button class="pill" data-value="15">15s</button>
-                            <button class="pill" data-value="30">30s</button>
-                            <button class="pill active" data-value="60">60s</button>
+                            <button class="pill" data-value="15" aria-pressed="false">15s</button>
+                            <button class="pill" data-value="30" aria-pressed="false">30s</button>
+                            <button class="pill active" data-value="60" aria-pressed="true">
+                                60s
+                            </button>
                         </div>
                     </div>
 
@@ -219,9 +230,11 @@ <h2 id="settings-title">Settings</h2>
                             role="group"
                             aria-labelledby="word-count-label"
                         >
-                            <button class="pill active" data-value="10">10</button>
-                            <button class="pill" data-value="25">25</button>
-                            <button class="pill" data-value="50">50</button>
+                            <button class="pill active" data-value="10" aria-pressed="true">
+                                10
+                            </button>
+                            <button class="pill" data-value="25" aria-pressed="false">25</button>
+                            <button class="pill" data-value="50" aria-pressed="false">50</button>
                         </div>
                     </div>
 
@@ -236,7 +249,7 @@ <h2 id="settings-title">Settings</h2>
                             <label class="toggle-label">
                                 <input type="checkbox" id="hard-mode-toggle-settings" />
                                 <span class="toggle-custom"></span>
-                                Hard Mode (blur the text)
+                                Hard Mode (blur what you have typed)
                             </label>
                             <label class="toggle-label">
                                 <input type="checkbox" id="ghost-mode-toggle" />

package-lock.json

@@ -14,6 +14,7 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
+    "@axe-core/playwright": "^4.14.0",
     "@eslint/js": "^9.17.0",
     "@playwright/test": "^1.64.1",
     "eslint": "^9.17.0",

package.json

@@ -4,6 +4,8 @@
 
 // --- DOM Elements ---
 const quoteDisplayElement = document.getElementById('quote-display');
+const quoteTextElement = document.getElementById('quote-text');
+const typingContainer = document.querySelector('.typing-container');
 const typingInputElement = document.getElementById('typing-input');
 const timerElement = document.getElementById('timer');
 const wpmElement = document.getElementById('wpm');
@@ -276,6 +278,7 @@ function getQuoteText() {
 function renderNewQuote() {
     runtime.quoteText = getQuoteText();
     quoteDisplayElement.textContent = '';
+    quoteTextElement.textContent = runtime.quoteText;
 
     if (gameState.isGhostEnabled) {
         const ghostCursor = document.createElement('div');
@@ -590,7 +593,9 @@ function saveSettings() {
 
 function setActivePill(selector, value) {
     selector.querySelectorAll('.pill').forEach((pill) => {
-        pill.classList.toggle('active', pill.dataset.value === value);
+        const active = pill.dataset.value === value;
+        pill.classList.toggle('active', active);
+        pill.setAttribute('aria-pressed', String(active));
     });
 }
 
@@ -697,23 +702,47 @@ function trapFocus(e, modal) {
     }
 }
 
+// Show the "press any key" hint while nothing would receive typing. Runs
+// after focus has settled, so opening a dialog does not flash it.
+function updateFocusHint() {
+    const lost =
+        document.activeElement !== typingInputElement &&
+        !isModalOpen(settingsModal) &&
+        !isModalOpen(resultModal);
+    typingContainer.classList.toggle('unfocused', lost);
+}
+
+// A printable key pressed while focus is elsewhere goes to the input. Form
+// controls keep their own keys, and Space still presses a focused button.
+function refocusOnType(e) {
+    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
+    const active = document.activeElement;
+    if (active === typingInputElement || typingInputElement.disabled) return;
+    if (active && ['INPUT', 'SELECT', 'TEXTAREA'].includes(active.tagName)) return;
+    if (e.key === ' ' && active && active.tagName === 'BUTTON') return;
+    typingInputElement.focus();
+}
+
 function handleKeydown(e) {
     if (e.key === 'Escape') {
         if (isModalOpen(settingsModal)) closeSettings();
         else if (isModalOpen(resultModal)) resetGame();
         return;
     }
-    if (e.key !== 'Tab') return;
-
-    if (isModalOpen(settingsModal)) {
+    if (e.key === 'Tab' && isModalOpen(settingsModal)) {
         trapFocus(e, settingsModal);
         return;
     }
-    if (isModalOpen(resultModal)) {
+    if (e.key === 'Tab' && isModalOpen(resultModal)) {
         trapFocus(e, resultModal);
         return;
     }
 
+    if (e.key !== 'Tab') {
+        if (!isModalOpen(settingsModal) && !isModalOpen(resultModal)) refocusOnType(e);
+        return;
+    }
+
     // Tab restarts only while typing. Elsewhere, and for Shift+Tab, it
     // moves focus as usual so the page stays keyboard-navigable.
     if (e.shiftKey || document.activeElement !== typingInputElement) return;
@@ -731,6 +760,8 @@ function init() {
     typingInputElement.addEventListener('mousedown', handleInputMousedown);
     typingInputElement.addEventListener('select', pinCaretToEnd);
     typingInputElement.addEventListener('focus', pinCaretToEnd);
+    typingInputElement.addEventListener('focus', updateFocusHint);
+    typingInputElement.addEventListener('blur', () => setTimeout(updateFocusHint, 0));
     typingInputElement.addEventListener('paste', (e) => e.preventDefault());
     typingInputElement.addEventListener('drop', (e) => e.preventDefault());
     resetButton.addEventListener('click', resetGame);

script.js

@@ -15,11 +15,13 @@
 
     /* Text Colors */
     --text-main: #e2e8f0;
-    --text-muted: #64748b;
-    --text-ghost: #475569;
+    --text-muted: #94a3b8; /* 5.5:1 on the lightest part of the container */
+    --text-ghost: #8b9bb4; /* untyped text, 5:1 */
 
     /* Accents */
     --accent-primary: #818cf8; /* Indigo-400 */
+    --accent-strong: #4f46e5; /* Indigo-600, button fill with white text at 6.3:1 */
+    --accent-strong-hover: #4338ca; /* Indigo-700 */
     --accent-glow: rgba(129, 140, 248, 0.5);
     --accent-secondary: #2dd4bf; /* Teal-400 */
 
@@ -359,8 +361,10 @@ input:checked + .toggle-custom::after {
     transition: filter 0.3s ease;
 }
 
-.quote-display.blurred {
-    filter: blur(5px);
+/* Hard Mode: blur what has been typed, so mistakes cannot be seen. */
+.quote-display.blurred .correct,
+.quote-display.blurred .incorrect {
+    filter: blur(4px);
 }
 
 /* Text Effects */
@@ -420,6 +424,25 @@ input:checked + .toggle-custom::after {
     resize: none;
 }
 
+/* Shown over the passage when the input does not have focus */
+.focus-hint {
+    position: absolute;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    color: var(--text-main);
+    background: rgba(15, 23, 42, 0.75);
+    border-radius: var(--radius-md);
+    pointer-events: none; /* Clicks reach the input underneath */
+    z-index: 6;
+}
+
+.typing-container.unfocused .focus-hint {
+    display: flex;
+}
+
 /* Ghost Cursor */
 .ghost-cursor {
     position: absolute;
@@ -621,12 +644,12 @@ footer {
 }
 
 .action-btn.primary {
-    background: var(--accent-primary);
+    background: var(--accent-strong);
     color: white;
 }
 
 .action-btn.primary:hover {
-    background: var(--accent-glow);
+    background: var(--accent-strong-hover);
     box-shadow: 0 0 15px var(--accent-glow);
 }