The accessible tech stack

Every tool used to build a11yequitas.org was chosen deliberately. This page explains what each tool is and why it supports WCAG 2.2 AAA accessibility — for users, for developers, and for the people who run audits.

Frontend framework

• Next.js (App Router, static export).Next.js renders every page to static HTML at build time. There is no client-side JavaScript required to read the content. Static HTML means no layout shifts after page load — a significant benefit for users with ADHD, who are sensitive to unexpected movement and visual instability. Screen readers receive fully-formed markup instead of waiting for JavaScript to hydrate. The App Router’s file-based routing keeps every page a self-contained file with its own metadata export, so titles and descriptions are never missed.

Styling

• Tailwind CSS. Tailwind is a utility-first CSS framework. Unlike component libraries that ship pre-built styles with opinionated focus rings, resets, and color palettes, Tailwind provides low-level utilities. Nothing is hidden. Every contrast ratio, focus outline width, and spacing value is explicitly declared in markup. This makes WCAG AAA contrast ratios (7:1) and thick focus rings straightforward to implement and audit — there is no framework CSS fighting back.

Testing

• Playwright. Playwright is an end-to-end browser automation framework. It drives real browsers (Chromium, Firefox, WebKit) and can simulate keyboard-only navigation, screen reader announcements via ARIA roles, and reduced-motion preferences. Tests run on every build so regressions are caught before deployment — not after a user reports them.
• axe-core. axe-core is the industry-standard accessibility rules engine, maintained by Deque Systems. It checks DOM snapshots against WCAG 2.2 rules and reports violations with WCAG success criterion references. axe-core runs inside Playwright tests on this site so automated accessibility checks are part of every CI run, not a manual afterthought.
• Accessibility Insights for Web.Microsoft’s browser extension runs guided manual assessments aligned to WCAG 2.2 AA and AAA. It walks auditors through a checklist — keyboard navigation, focus order, ARIA landmarks, reading order — with screenshots and notes attached to each finding. Used during development to catch issues axe-core cannot detect programmatically (such as illogical focus order or missing context for icon-only buttons).
• Alfa (Siteimprove). Alfa is an open-source accessibility checker with stricter WCAG 2.2 AAA coverage than axe-core alone. It flags criteria such as SC 1.4.6 Contrast (Enhanced) at 7:1, SC 2.4.13 Focus Appearance, and SC 3.1.5 Reading Level. Running both axe-core and Alfa gives broader rule coverage than either alone.
• Fallow. Fallow is an accessibility and security scanner used to audit the deployed site. It checks HTTP headers (Content Security Policy, permissions policy), link health, and accessibility markers from outside the build system — simulating what a third-party auditor sees. Fallow results appear in the security audit report.
• Vitest. Vitest is the unit test runner used for component logic and utility functions. Fast, TypeScript-native, and compatible with Next.js — it keeps unit tests cheap to run locally without a full browser.

Infrastructure

• Rocky Linux. Rocky Linux is an open-source, RHEL-compatible Linux distribution used as the server operating system. It is stable, long-term supported, and runs the Podman containers that serve the site. A stable server means consistent response times — slow or unreliable servers harm cognitive accessibility by forcing users to wait and re-orient.
• Nginx. Nginx serves the static HTML files built by Next.js. Correct HTTP headers — including Content-Type, Content-Security-Policy, and Strict-Transport-Security — are set at the Nginx layer. Proper headers prevent browsers from misinterpreting content and protect users from injected scripts that could break assistive technology.
• Cloudflare. Cloudflare sits in front of the origin server and provides edge caching, DDoS protection, and TLS termination. Pages load from edge nodes close to the user, reducing latency. Lower latency benefits all users and is especially important for users on slower connections or assistive devices with limited processing power.

Why static generation matters for neurodivergent users

Layout shifts — content that moves after initial render — are one of the most disorienting experiences for users with ADHD. When a page loads and then jumps because an ad, image, or dynamic component rendered late, it breaks focus and can cause the user to lose their place entirely. Next.js static export eliminates this class of problem: every element is in its final position from the first paint. There is nothing waiting to arrive.

Static HTML also means the page works without JavaScript enabled. Users who run browser extensions that block scripts (sometimes for sensory reasons, sometimes for security) still get full content. No JavaScript means no risk of a broken hydration cycle leaving the page in a half-rendered state that confuses screen readers.