Accessibility widget installation – Vue

The @dockcodes/accessibility-widget-vue package allows for quick integration of the accessibility widget with Vue 3-based applications, providing access to the full functionality of the base library via a convenient Provider and the useAccessibility() composition.

1. Installing the package

Using NPM:

npm install @dockcodes/accessibility-widget-vue

or Yarn:

yarn add @dockcodes/accessibility-widget-vue

2. Basic use

First, wrap your app in an <AccessibilityProvider> and pass your token:

App.vue

<template>
  <AccessibilityProvider token="YOUR_TOKEN">
    <Demo />
  </AccessibilityProvider>
</template>

<script setup lang="ts">
import { AccessibilityProvider } from "@dockcodes/accessibility-widget-vue"
import Demo from './Demo.vue'
</script>

Demo.vue

<template>
  <div v-if="!ready">
    <p>Widget loading…</p>
  </div>

  <div v-else style="padding: 20px;">
    <h1>Demo Accessibility Widget</h1>

    <button @click="accessibility.setContrast(true)">Enable contrast</button>
    <button @click="accessibility.toggleInvertColors()">Invert colors</button>
    <button @click="accessibility.setFontSize(4)">Large font</button>
    <button @click="accessibility.resetAll()">Reset</button>
  </div>
</template>

<script setup lang="ts">
import { watchEffect } from "vue"
import { useAccessibility } from "@dockcodes/accessibility-widget-vue"

const { accessibility, ready } = useAccessibility()

watchEffect(() => {
  if (ready) {
    accessibility.onMenuOpen(() => console.log("Menu opened!"))
  }
})
</script>

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