使用vue-announcer提高Vue.js的可访问性

单页应用程序的定义特征，就像通常使用 Vue.js 制作的那些一样，是它们使用 JavaScript 接管页面内部的导航，而不是像普通网站那样将其留给浏览器。不幸的是，当这种情况发生时，可访问性很容易被淘汰。屏幕阅读器可能无法识别路线变化，这可能会使视力受损的用户迷失方向。 vue-announcer 通过允许您宣布对屏幕阅读器的更改，应该有助于缓解问题。它对于路由更改、通知、公告和几乎任何动态 DOM 修改都很有用。您所要做的就是告诉它何时以及宣布什么。

入门

继续安装 vue-announcer。本指南假设您已经设置了 Vue.js 项目。如果没有，继续使用 vue-cli 3.0 和默认选项开始一个新的 Vue 项目。运行 $ vue create my-new-project 并按回车几次就足够了。

$ npm install --save vue-announcer

接下来，启用插件。它所做的只是注册组件：

main.js

import Vue from 'vue';
import VueAnnouncer from 'vue-announcer';
import App from './App.vue';

Vue.use(VueAnnouncer);

new Vue({
  el: '#app',
  render: h => h(App)
});

宣布路线变更

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

配置它的最简单方法是在启用 VueAnnouncer 插件时传递您的路由器实例，如下所示：

main.js

// the import stuff from Getting Started above.
// ...
import VueRouter from 'vue-router';

import Home from './routes/Home.vue';
import About from './routes/About.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
];

const router = new VueRouter({ routes });

Vue.use(VueAnnouncer, {}, router);

// Everything else from the section above.
// ...

如果您不寻找任何定制的东西，这将起到作用，但是如果您想更改消息怎么办？

main.js

// Just change this line and set the complimentRoute property.
Vue.use(VueAnnouncer, {
  complimentRoute: 'is ready!' // {route} is ready!
}, router);

或者想为每条路线提供不同的信息？

main.js

// Add meta: { announcer: 'My Message' } to the route configuration for each route.

const routes = [
  {
    path: '/home',
    component: Home,
    meta: {
      // "Home route is ready!" when combined with the configuration above.
      announcer: 'Home route'
    }
  },
  {
    path: '/about',
    component: About,
    meta: {
      // "About route (aboute?) is ready!" when combined with the configuration above.
      announcer: 'About route (aboute?)'
    }
  }
];

手动公告

vue-announcer 还可以帮助您通知屏幕阅读器动态内容的更改。例如，自定义状态更新或通知。没有真正的方法可以自动执行此操作，因此您必须手动触发和设置消息。

当您撰写公告时，请考虑视障用户如何理解它们，并尝试相应地措辞您的信息。

要触发手动公告，您首先需要在您的应用中为 vue-announcer 组件安装一个挂载点。

应用程序.vue

<template>
  <div id="app">
    <!-- Make sure to include this! -->
    <vue-announcer/>
    <h1>My Page - Example</h1>
    <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>
  </div>
</template>

<script>
export default {
  mounted() {
    // Send a notification after five seconds.
    setTimeout(() => {
      // Or whatever you use to send visual notifications.
      this.$someNotificationSystem.notify('A surprising announcement!');

      // Now send an auditory one.
      this.$announcer.set('Notification: A surprising announcement!')
    }, 5000)
  }
}
</script>

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

查看存储库了解更多最新详细信息。 vue-announcer 背后的人员刚刚开始他们与可访问性相关的 Vue 项目，所以请注意这个空间！