Accessibility panel
for Svelte 5
Add contrast, text, navigation, and reading controls to a Svelte 5 site. Install the package, mount the panel in your root layout, and choose which settings to expose.
Try it live: tap the button floating in the bottom right ↘
What's in the panel
Shadow DOM isolated
The panel renders in its own Shadow DOM, isolating its styles from your site's CSS.
Zero runtime dependencies
The published package ships only its own code. Nothing extra lands in your node_modules or your bundle.
Configurable
Brand colour, font, organisation name, contact email, and storage keys are all set from one config object.
30+ adjustments
Five profiles plus individual controls: contrast modes, font overrides, reading guides, text-to-speech, voice navigation, virtual keyboard.
Security-conscious
Colour and URL config values are sanitised before injection, persisted state is schema-validated, and CSP requirements are documented.
Typed API
TypeScript exports for A11yPanelConfig, PanelState, and the public functions.
Two components to install
Add both components to your root layout:
pnpm add svelte-a11y-panel<script>
import { PanelMount, AccessibilityButton } from 'svelte-a11y-panel';
let { children } = $props();
</script>
<PanelMount config={{ accentColor: '#2563eb' }} />
<AccessibilityButton />
{@render children()}