
Security News
MCP Community Begins Work on Official MCP Metaregistry
The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.
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
1.0.6 (2020-01-08)
<a name="1.0.5"></a>
FAQs
A simple way with Vue to announce any information to the screen readers.
The npm package vue-announcer receives a total of 970 weekly downloads. As such, vue-announcer popularity was classified as not popular.
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.
Security News
The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.
Research
Security News
Socket uncovers an npm Trojan stealing crypto wallets and BullX credentials via obfuscated code and Telegram exfiltration.
Research
Security News
Malicious npm packages posing as developer tools target macOS Cursor IDE users, stealing credentials and modifying files to gain persistent backdoor access.