
Product
Introducing Socket Fix for Safe, Automated Dependency Upgrades
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
vue-announcer
Advanced tools
A simple way with Vue to announce any information to the screen readers.
Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar or a loading, among others. Now imagine all this happening to people who have visual disabilities and who use screen readers.
The idea of this plugin is to tell the screen reader what is happening and primarily if you use single-page application.
Inspired by others in the community like:
https://haltersweb.github.io/Accessibility/spa.html (Example of how creating an accessible single-page application)
https://github.com/ember-a11y/a11y-announcer (Ember A11y community)
npm install -S vue-announcer
yarn add vue-announcer
In your main.js
import Vue from 'vue'
import VueAnnouncer from 'vue-announcer'
Vue.use(VueAnnouncer)
In your App.vue
Example using vue-toasted
<template>
<div id="app">
<vue-announcer />
<h2>App page</h2>
<button type="button" data-va="toasted" @click="notify">
trigger notification
</button>
</div>
</template>
<script>
export default {
name: 'app'
methods: {
notify () {
let message = `Hi, it's a toasted notification`
this.$toasted.success(message)
this.$announcer.set(message) // Sets the message that will be read by the screen reader automatically.
}
}
}
</script>
See this example:
Example link
For page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.
import Vue from 'vue'
import router from './router'
import VueAnnouncer from 'vue-announcer'
Vue.use(VueAnnouncer, {}, router)
Key | Data Type | default |
---|---|---|
complementRoute | String | has loaded |
Example:
Vue.use(VueAnnouncer, {
complementRoute: 'ha cargado' // e.g. in spanish
}, router)
Note: These methods are registered on the $announcer
property injected into the Vue instance
$announcer.setComplementRoute(complementRoute)
If you need to set the complementRoute
option dynamically without reloading the application, for example if you're
dynamically loading translations, you can use this method to update it.
export default {
onTranslationsUpdated (translations) {
this.$announcer.setComplementRoute(translations.complementRouteKey /* = 'ha cargado' */)
}
}
You can set a property on the meta object, which will serve as information to get the message that will be announced to the screen reader on each page. e.g.:
{
name: 'home',
path: '/',
component: Home,
meta: {
announcer: 'Página de inicio'
}
}
When the page loads, the screen reader user will hear:
Página de inicio ha cargado
Note:
router.afterEach
to announce the route changes.https://vue-announcer.surge.sh/
git clone https://github.com/vue-a11y/vue-announcer.git vue-announcer
// Run plugin
cd vue-announcer
npm install
npm run dev
// Run example
cd examples
npm install
npm run dev
cd ..
// Run Cypress testing
npm run test
Or run Cypress on interactive mode
npm run test:open
It is a simple webpack template already installed and configured. After the commands just access the http://localhost:8080/
If you want a faster communication, find me on @ktquez And follow us on Twitter @vue_a11y
Thank you
FAQs
A simple way with Vue to announce any information to the screen readers.
We found that vue-announcer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.
Product
We’re excited to announce a powerful new capability in Socket: historical data and enhanced analytics.