Study Phase Control (AI Agent On/Off)

There's a nearly-invisible circular button in the bottom-right corner of the screen. Clicking it opens the admin panel, protected by a PIN.

• Default PIN: 2468
• To change it, add to .env.local:

  REACT_APP_ADMIN_PIN=your-new-pin
  

  (then restart npm start / rebuild — env vars are baked in at build time)

Once unlocked, you can switch between:

• Phase 1 — AI Off: the "AI" tab is greyed out and shows a "currently unavailable" message to the participant. The rule-based accessibility checker (Issues tab) still runs and shows issues either way — but the PDF report export button is also gated by this toggle now and appears greyed out with an "Off" label. Only the Hugging Face AI Analysis tab and the PDF export are gated; everything else (issue detection, dyslexia/ADHD simulations, text-to-speech) stays available in both phases.
• Phase 2 — AI On: AI Analysis tab is fully available.

The current phase is:

• Persisted in the browser's localStorage, so it survives page refreshes for that participant/device.
• Shown to the participant as a small status dot + "AI Assistant On/Off" label under the AccessProto logo in the sidebar (they can see the state but not change it).
• The admin "unlock" state itself is stored in sessionStorage and resets when the browser tab is closed — so the PIN needs re-entering each new session, but you won't need to re-enter it while flipping phases mid-session.

If you're running this on a shared/deployed instance, remember to set the phase to "AI Off" before each new participant starts Phase 1 (localStorage is per-browser, so each participant's device will need it set, or clear their localStorage between sessions).

Session Change Log (What Participants Changed)

Every meaningful participant action is recorded automatically, with a timestamp:

• Adding, moving, editing, or deleting a canvas component (property changes record both the old and new value)
• Clearing the canvas or resetting to the sample template
• Rating an issue helpful/not helpful, or adding a comment
• Marking an issue as fixed (Coach mode)
• Running the AI Analysis (start/success/failure)
• Exporting the PDF accessibility report
• Using text-to-speech ("Read Issues Aloud")
• The researcher changing the AI on/off phase

This is separate from the canvas itself — the canvas always resets to the clean sample template on page load (see above), but the log persists across reloads in the browser's localStorage until you export and clear it.

To review it: open the admin panel (bottom-right corner, PIN 2468 by default) and unlock. Under Session Log you'll see how many actions have been recorded, with buttons to:

• Export JSON — full-fidelity event data, best for further processing/analysis
• Export CSV — spreadsheet-friendly (Excel/Sheets), with a details column holding any extra event-specific data as JSON text
• Clear Log — wipes the recorded events for this browser (asks for confirmation) — use this between participants once you've exported their data

Since the log lives in localStorage, it's per-browser/per-device, same as the AI phase setting. Export and clear it before each new participant if you don't want one participant's actions mixed in with the next.

Dyslexia / ADHD Simulations

The "Simulate" toolbar buttons overlay an approximation of two commonly reported reading/attention experiences on the canvas. These are illustrative, not clinical — individual experiences of dyslexia and ADHD vary widely, and no visual simulation fully captures either.

• Dyslexia: the visible text (headings, paragraphs, buttons, nav items, card content, form labels) has its letters reordered — first and last letter of each word kept fixed, the letters in between shuffled, re-shuffling every ~1.7s. This is the standard technique used by most reputable dyslexia simulators and approximates the commonly reported experience of letters seeming to shift while reading. Earlier versions of this tool instead increased letter/word spacing to simulate difficulty — that was backwards, since research (e.g. Zorzi et al., 2012) shows wider spacing is actually a helpful accommodation, not something that recreates the difficulty.
• ADHD: a soft highlight wanders around the canvas (attention drifting rather than evenly covering the layout) and small distractor dots occasionally pop in at random positions (peripheral stimuli pulling focus away from the task). This replaced an earlier version built from decorative floating shapes with no real grounding.

Accessibility & Data Capture Fixes (Latest Update)

A full readiness audit against a study checklist surfaced several gaps, now fixed:

Reverted: the PDF export button is no longer tied to the AI phase — it broke "baseline works normally when AI is off" and "conditions identical except agent presence." It's back to always available.

Reduced motion: the ADHD and dyslexia simulations now check prefers-reduced-motion and settle into a static state (no continuous animation/re-scrambling) when that's on at the OS/browser level.

Real semantic HTML on the canvas — this is the big one. Headings now render as actual <h1>/<h2>/<h3> tags (not styled <p>), images render as real <img alt="..."> elements (not fake caption boxes), nav items are real <nav><ul><li><a> markup, and form labels are properly linked to their inputs via htmlFor/id. Previously these were all just visual approximations checked by our own JS logic — a real screen reader or automated scanner (axe, Lighthouse) wouldn't have seen a heading structure or alt text at all. Now it will.

The tool's own accessibility:

• Fixed ~20 instances of failing text contrast (was ~2.5:1, now 6-8:1) across captions, labels, and status text
• Added a real <h1> (page title) and multiple <h2>s (panel/modal titles) to the tool's own UI — previously zero semantic headings existed outside the generated PDF
• Fixed the properties panel's form fields — labels are now programmatically linked to their inputs (htmlFor/id), so screen readers announce "Font Size," "Background," etc. instead of nothing
• Added proper ARIA tablist/tab/tabpanel roles to the Properties/Issues/AI tabs

Data capture, for the study itself:

• Demographics intake — a one-time modal (design experience, accessibility familiarity, role) blocks the canvas until answered. Persists so it doesn't reappear on an accidental refresh mid-session.
• Participant/Session ID — a field in the admin panel, tagged onto every exported file (log and snapshot). Use a study code, not a real name.
• Design snapshot export — a new "Export Design Snapshot (JSON)" button in the admin panel captures the actual final canvas state (all 34 components' full props), not just the interaction log.
• Reset for Next Participant — replaces the old "Clear Log" button. One action clears the interaction log, demographics answers, and participant ID, and restores the sample page — preparing a clean slate for the next session. (The AI phase setting is untouched by this, since you likely want to control that independently.)

One thing still worth knowing: "works with screen readers" is now much more plausible given the semantic fixes above, but I don't have a way to test with an actual screen reader in this environment — if this matters for your study's credibility, it's worth a manual pass with VoiceOver/NVDA before you rely on it.

---

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

Counterbalanced study mode

The hidden Study Admin panel now supports four counterbalance sequences:

• Sequence 1: Page A / AI off -> Page B / AI on
• Sequence 2: Page B / AI off -> Page A / AI on
• Sequence 3: Page A / AI on -> Page B / AI off
• Sequence 4: Page B / AI on -> Page A / AI off

Page A (creative studio) and Page B (Maison Lune patisserie) each begin with 13 planted accessibility barriers across the same five categories: 3 missing alt texts, 3 vague buttons, 2 missing form labels, 3 redundant-text barriers, and 2 heading-structure defects.

Exports

• Experiment Summary CSV: one row per completed/started phase, designed for direct import into Excel. It includes participant ID, sequence, phase, page, AI condition, starting/remaining/fixed barriers, accessibility score, action count, timestamps, duration, and demographics.
• Raw Events CSV: one row per recorded interaction, tagged with participant, sequence, phase, page, and AI condition.
• Full JSON: raw events plus demographics and phase summaries.
• Design Snapshot JSON: final current canvas with phase/page/AI metadata.