使用 vue-announcer 改善 Vue.js 的可访问性

单页应用程序的定义特征,就像通常使用 Vue.js 制作的应用程序一样,是它们使用 JavaScript 来接管页面内部的导航,而不是将其留给浏览器,就像正常的网站一样。不幸的是,当这种情况发生时,可访问性很容易掉在路上。屏幕阅读器可能不会接收路线更改,这可能会使视觉障碍的用户失去方向。 vue-announcer 应该帮助缓解问题,允许您向屏幕阅读器宣布更改。它对于路线更改,通知,公告和几乎任何动态 DOM 更改都是有用的。

开始的

继续安装 vue-announcer。本指南假定您已经设置了 Vue.js 项目,否则继续使用 vue-cli 3.0和默认选项启动新的 Vue 项目。

1$ npm install --save vue-announcer

接下来,启用插件. 它所做的就是注册组件:

 1[label main.js]
 2import Vue from 'vue';
 3import VueAnnouncer from 'vue-announcer';
 4import App from './App.vue';
 5
 6Vue.use(VueAnnouncer);
 7
 8new Vue({
 9  el: '#app',
10  render: h => h(App)
11});

路线变更公告

现在,vue-announcer的主要功能之一是在您在应用程序中导航时自动宣布路线变更的能力。

配置最简单的方法是通过您的路由器实例启用VueAnnouncer插件时,如下:

 1[label main.js]
 2// the import stuff from Getting Started above.
 3// ...
 4import VueRouter from 'vue-router';
 5
 6import Home from './routes/Home.vue';
 7import About from './routes/About.vue';
 8
 9Vue.use(VueRouter);
10
11const routes = [
12  {
13    path: '/home',
14    component: Home
15  },
16  {
17    path: '/about',
18    component: About
19  }
20];
21
22const router = new VueRouter({ routes });
23
24Vue.use(VueAnnouncer, {}, router);
25
26// Everything else from the section above.
27// ...

如果您不寻找任何自定义内容,那么这将是技巧,但如果您想更改消息呢?

1[label main.js]
2// Just change this line and set the complimentRoute property.
3Vue.use(VueAnnouncer, {
4  complimentRoute: 'is ready!' // {route} is ready!
5}, router);

或者你想为每条路径发出不同的信息吗?

 1[label main.js]
 2// Add meta: { announcer: 'My Message' } to the route configuration for each route.
 3
 4const routes = [
 5  {
 6    path: '/home',
 7    component: Home,
 8    meta: {
 9      // "Home route is ready!" when combined with the configuration above.
10      announcer: 'Home route'
11    }
12  },
13  {
14    path: '/about',
15    component: About,
16    meta: {
17      // "About route (aboute?) is ready!" when combined with the configuration above.
18      announcer: 'About route (aboute?)'
19    }
20  }
21];

手动公告

「vue-announcer」还帮助您通知屏幕阅读器对动态内容的更改,例如,自定义状态更新或通知。

当你写广告时,想想一个视力障碍的用户会如何理解它们,并尝试相应地表达你的信息。

要触发手动公告,您首先需要应用程序中的vue-announcer组件的安装点。

 1[label App.vue]
 2<template>
 3  <div id="app">
 4    <!-- Make sure to include this! -->
 5    <vue-announcer/>
 6    <h1>My Page - Example</h1>
 7    <p>Normally people put some sort of Latin/hipster/bacon-related text here, but I wanted to try English instead, just to mix things up.</p>
 8  </div>
 9</template>
10
11<script>
12export default {
13  mounted() {
14    // Send a notification after five seconds.
15    setTimeout(() => {
16      // Or whatever you use to send visual notifications.
17      this.$someNotificationSystem.notify('A surprising announcement!');
18
19      // Now send an auditory one.
20      this.$announcer.set('Notification: A surprising announcement!')
21    }, 5000)
22  }
23}
24</script>

然后只需使用this.$announcer.set(MESSAGE)发送一个消息。

看看https://github.com/vue-a11y/vue-announcer以获取更多最新的细节。 [Vie-Announcer]的人(https://vue-a11y.com)刚刚开始使用他们的可访问性相关的Vue项目,所以看看这个空间!