Svelte 5 · Zero runtime deps · MIT
Accessibility panel
for Svelte 5
Lets visitors adjust your site for their needs — contrast, fonts, cursors, TTS, voice nav, and more. Drops into any SvelteKit project in two lines. No CSS required.
Try it live — tap the button floating in the bottom right ↘
Everything your users need
Shadow DOM isolated
Panel CSS is fully isolated — it cannot affect your site's styles.
Zero runtime deps
The published package includes only its own code. Nothing extra installed.
Fully configurable
Brand colours, fonts, org name, contact email — all configurable.
20+ features
Profiles, contrast modes, font overrides, TTS, voice nav, virtual keyboard, and more.
Security audited
CSS injection protection, localStorage schema validation, CSP documented.
TypeScript ready
Full type exports for A11yPanelConfig, PanelState, and all public APIs.
Two lines to install
Add to your root layout. No CSS, no config files, no build plugins.
Terminal
pnpm add svelte-a11y-panelsrc/routes/+layout.svelte
<script>
import { PanelMount, AccessibilityButton } from 'svelte-a11y-panel';
let { children } = $props();
</script>
<PanelMount config={{ accentColor: '#2563eb' }} />
<AccessibilityButton />
{@render children()}