@dockcodes/accessibility-widget-svelte

Check our Accessibility Widget.

Installation

npm install @dockcodes/accessibility-widget-svelte

or

yarn add @dockcodes/accessibility-widget-svelte

Usage

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}

Base package

👉 @dockcodes/accessibility-widget

🔑 Get Your Free Widget Token

👉 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