Accessibility widget installation – 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

or Yarn:

yarn add @dockcodes/accessibility-widget-svelte

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>

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}

3. Base package documentation

All widget methods, events, configuration and API are available in the main package documentation:
👉 @dockcodes/accessibility-widget

🔑 Get a free token

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

🤝 Contributing

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