How to install the accessibility widget in Svelte

The @dockcodes/accessibility-widget-svelte package allows easy integration of the accessibility widget with Svelte applications. It provides an AccessibilityProvider wrapper and the reactive accessibilityStore.

---

1. Installation

Using NPM:

npm install @dockcodes/accessibility-widget-svelte
Copy text

or Yarn:

yarn add @dockcodes/accessibility-widget-svelte
Copy text

---

2. Basic use

Wrap your app with AccessibilityProvider and pass your token.

App.svelte

<script>
    import { AccessibilityProvider } from "@dockcodes/accessibility-widget-svelte";
    import Demo from "./Demo.svelte";
</script>

<AccessibilityProvider token="YOUR_TOKEN">
    <Demo />
</AccessibilityProvider>
Copy text

Demo.svelte

<script lang="ts">
    import { accessibilityStore } from '@dockcodes/accessibility-widget-svelte';

    $: ready = $accessibilityStore.ready;
    $: accessibility = $accessibilityStore.accessibility;
</script>

{#if !ready || !accessibility}
    <p>Widget loading…</p>
{:else}
<div style="padding:20px">
    <h1>Demo Accessibility Widget</h1>

    <button on:click={() => accessibility.setContrast(true)}>Enable contrast</button>
    <button on:click={() => accessibility.toggleInvertColors()}>Invert colors</button>
    <button on:click={() => accessibility.setFontSize(4)}>Large font</button>
    <button on:click={() => accessibility.setLanguage("en")}>EN</button>
    <button on:click={() => accessibility.resetAll()}>Reset</button>
</div>
{/if}
Copy text

---

3. Base package documentation

All widget methods, events, configuration and API are available in the main package documentation: 👉 @dockcodes/accessibility-widget (opens in a new tab)

---

🔑 Get a free token

The widget requires a token that you generate for free in the panel: 👉 https://wcag.dock.codes/my-account/tokens/ (opens in a new tab)

---

🤝 Contributing

Contributions are welcome! If you find a bug or want to improve the library, please open an issue or pull request on 👉 GitHub (opens in a new tab)