vue 屏幕监听方法_使用Vue公布屏幕阅读器有用信息的一种简单方法

vue 屏幕监听方法

播音员 (vue-announcer)

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.

该插件的目的是告诉屏幕阅读器正在发生的事情，主要是如果您使用单页应用程序。

View demo 查看演示 Download Source 下载源

安装套件 (Install package)

NPM (NPM)

npm install -S vue-announcer

纱 (Yarn)

yarn add vue-announcer

---

---

如何使用 (How to use)

In your main.js

在你的main.js

import Vue from 'vue'
import VueAnnouncer from 'vue-announcer'

Vue.use(VueAnnouncer)

In your App.vue Example using vue-toasted

在您的App.vue示例中，使用vue-toasted App.vue

<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

请参见以下示例： 示例链接

宣布路线变更 (Announce route changes)

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)

选件 (Options)

Key	Data Type	default
complementRoute	String	has loaded

键	数据类型	默认
complementRoute	串	has loaded

Example:

例：

Vue.use(VueAnnouncer, {
  complementRoute: 'ha cargado' // e.g. in spanish
}, router)

每页的自定义消息(可选) (Custom message to each page (optional))

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:

注意：

• The plugin checks whether it was defined in the meta object, otherwise, without any problems, the title of the page being loaded will be used.

  该插件检查它是否已在meta对象中定义，否则，没有任何问题，将使用正在加载的页面的标题。

• The vue-announcer uses the global after hooks router.afterEach to announce the route changes.

  vue-announcer使用全局的after hooks router.afterEach来宣布路由更改。

运行测试 (Run the tests)

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/

翻译自: https://vuejsexamples.com/a-simple-way-with-vue-to-announce-any-useful-information-for-screen-readers/

vue 屏幕监听方法