The defining characteristic of Single-Page-Applications, like those commonly made with Vue.js, is that they take over navigation inside the page with JavaScript instead of leaving it to the browser like normal websites. Unfortunately, when this happens, accessibility can easily fall by the wayside. Screen readers may not pick up route changes, which may leave visually-impaired users disoriented. vue-announcer
should help alleviate the problem, by allowing you to announce changes to screen readers. It’s useful for route changes, notifications, announcements, and pretty much any dynamic DOM modification. All you have to do is tell it when and what to announce.
Go ahead and install vue-announcer. This guide assumes you have a Vue.js project already set up. If not, go ahead and start a new Vue project using vue-cli 3.0 and the default options. Running $ vue create my-new-project
and hitting enter a couple times should be sufficient.
Next, enable the plugin. All it does is register the component:
Now, one of the main features of vue-announcer
is the ability to automatically announce route changes when you navigate somewhere in your app.
The simplest way to configure it is just to pass your router instance when enabling the VueAnnouncer
plugin, like so:
That will do the trick if you’re not looking for anything custom, but what if you want to change the message?
Or would like to have different messages for each route?
vue-announcer
also helps you with informing screen readers of changes to dynamic content. For example, custom status updates or notifications. There’s no real way to do this automatically, so you’ll have to manually trigger and set messages.
When you write announcements, think through how a visually-impaired user would understand them, and try to word your messages accordingly.
To trigger a manual announcement, you’ll first need a mount point for the vue-announcer
component in your app.
Then just send a message using this.$announcer.set(MESSAGE)
.
Take a look at the repository for more up-to-date details. The people behind vue-announcer are just getting-started with their accessibility-related Vue projects, so watch that space!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!