@stark-lab-inc/stark-accessibility-svelte

A comprehensive accessibility toolkit for Svelte applications by Stark Lab, Inc. This package provides a CLI tool for accessibility scanning and an ESLint plugin for IDE integration.

Features

• 🚀 CLI Tool - Scan your Svelte codebase with minimal setup required
• 📊 Stark Integration - All scans automatically sync to your Stark dashboard
• 🔍 Dual-pass scanning - ESLint rules and direct Svelte compiler a11y diagnostics
• 🛠️ ESLint Plugin - Integrate with your existing ESLint setup for IDE support
• ⚙️ Flexible Configuration - Environment variables, .env files, or CLI arguments
• 🟦 TypeScript-ready - TypeScript inside <script> blocks is fully supported out of the box

Installation

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

svelte is a peer dependency. If it isn't already installed in your project:

npm install --save-dev svelte

CLI Tool (Recommended)

The easiest way to get started is with the CLI tool. It scans your Svelte files for accessibility issues and automatically uploads results to your Stark dashboard. A Stark token is required for all scans.

Quick Setup

1. Log in to your Stark account at app.getstark.co
2. Navigate to your project and create or edit a source code asset
3. Find your asset's Stark Token (it looks like stark_1452216e48434f07bd0cf4f6f6502e56)
4. Copy this token — you'll need it for running the tool
5. Configure your token (see options below)
6. Run accessibility checks

Stark Token Configuration

Option 1: Environment Variable (recommended for CI/CD)

export STARK_TOKEN="your-stark-token"
npx stark-scan-svelte src/

Option 2: .env File (recommended for development)

# Create .env file in your project root
echo "STARK_TOKEN=your-stark-token" > .env
npx stark-scan-svelte src/

Option 3: Command Line Argument

npx stark-scan-svelte src/ --stark-token your-stark-token

Usage Examples

# Scan a directory
npx stark-scan-svelte src/

# Scan specific files or globs
npx stark-scan-svelte src/**/*.svelte

# With a custom scan name
npx stark-scan-svelte src/ --name "Production Build"

# Silent mode (upload only, no console output — useful in CI)
npx stark-scan-svelte src/ --silent

# Merge with your project's local ESLint configuration
npx stark-scan-svelte src/ --merge-config

# Help
npx stark-scan-svelte --help

CLI Options

| Option | Description | | ----------------------- | -------------------------------------------------------------------------------- | | --stark-token <token> | Your Stark token (required; can also be set via STARK_TOKEN env var or .env) | | --name <name> | Custom scan name (defaults to the current directory name) | | --silent | Suppress all console output except errors | | --merge-config | Search for and merge local eslint.config.js with the embedded config | | --help | Show help message |

How scanning works

Each run performs two passes over your .svelte files:

1. ESLint pass — runs the stark-accessibility-svelte plugin rules (button types, ARIA correctness, duplicate directives, event handler validity, and more)
2. Svelte compiler pass — invokes the Svelte compiler directly and captures its built-in a11y diagnostics (missing alt, invalid href, keyboard event pairing, role validity, etc.)

Results from both passes are merged and uploaded to Stark in a single report.

What Gets Synced to Stark

• 📊 Accessibility metrics (errors and warnings)
• 📍 Issue locations (relative file paths, line numbers)
• 📝 Code snippets (context around each issue)
• 🔄 Historical tracking (progress over time)

ESLint Plugin Integration

To integrate accessibility checking directly into your existing ESLint setup for IDE support:

// eslint.config.js
import starkAccessibilitySvelte from '@stark-lab-inc/stark-accessibility-svelte';
import { defineConfig } from 'eslint/config';

export default defineConfig({
  extends: [starkAccessibilitySvelte.configs.recommended],
});

The recommended config automatically:

• Sets svelte-eslint-parser as the parser for .svelte files
• Configures @typescript-eslint/parser for TypeScript inside <script> blocks
• Enables all rules at their default severities

Configuration Merging (CLI)

By default, the CLI uses an embedded configuration and ignores any local ESLint config in your project. Pass --merge-config to have it search for and merge your local eslint.config.js — useful if you have custom parser settings or environment configuration that the rules depend on.

Support & Resources

• 💬 Support: Report bugs or get help with Stark integration
• 🌐 Stark Dashboard: app.getstark.co
• 📖 WCAG Explained: www.getstark.co/wcag-explained/