Stark A11y Demo — SvelteKit

A small SvelteKit demo application seeded with intentional accessibility worst practices. It is designed to be used as a test target for Stark tooling and to demonstrate how Stark surfaces accessibility violations at development time.

The app itself is a fictional "Acme Store" — a product listing page and a contact form — realistic enough to be meaningful but simple enough to read in minutes.

Accessibility violations

Violations are spread across four components and two routes. Each one is marked with a comment in the source explaining the problem.

Stark flags these during both active development and in CI.

Getting started

Prerequisites: Node.js 18+

# 1. Clone and install
git clone [email protected]:stark-projects-demos/svelte.git
cd svelte
npm install

# 2. Start the dev server
npm run dev

Open http://localhost:5173 to see the app.

Running the checks

Install the Stark accessibility scanner:

npm install --save-dev @stark-lab-inc/stark-accessibility-svelte

Then scan the source directory:

npx stark-scan-svelte src/

A Stark token is required to upload results to your dashboard. See the @stark-lab-inc/stark-accessibility-svelte documentation for token setup and full CLI options.

Project structure

src/
├── lib/
│   └── components/
│       ├── NavBar.svelte        # navigation bar
│       ├── ProductCard.svelte   # product card
│       └── ContactForm.svelte   # contact form
└── routes/
    ├── +layout.svelte           # app shell
    ├── +page.svelte             # home / product listing
    └── contact/
        └── +page.svelte         # contact page

Tech stack

• SvelteKit — full-stack framework
• Svelte 5 — app framework
• ESLint — static analysis
• typescript-eslint — TypeScript-aware linting