Vue-announcerでVue.jsのアクセシビリティを向上させる

提供:Dev Guides
移動先:案内検索

シングルページアプリケーションの特徴は、Vue.jsで一般的に作成されているものと同様に、通常のWebサイトのようにブラウザに任せるのではなく、JavaScriptを使用してページ内のナビゲーションを引き継ぐことです。 残念ながら、これが発生すると、アクセシビリティが簡単に低下する可能性があります。 スクリーンリーダーがルートの変更を認識しない場合があります。これにより、視覚障害のあるユーザーが混乱する可能性があります。 vue-announcerは、スクリーンリーダーの変更をアナウンスできるようにすることで、問題を軽減するのに役立つはずです。 これは、ルートの変更、通知、アナウンス、およびほとんどすべての動的DOM変更に役立ちます。 あなたがしなければならないのは、いつ、何を発表するかを伝えることだけです。

入門

先に進み、vue-announcerをインストールします。 このガイドは、Vue.jsプロジェクトがすでに設定されていることを前提としています。 そうでない場合は、先に進み、 vue-cli3.0とデフォルトのオプションを使用して新しいVueプロジェクトを開始します。 $ vue create my-new-projectを実行し、Enterキーを数回押すだけで十分です。

$ 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の主な機能の1つは、アプリ内のどこかに移動したときにルートの変更を自動的にアナウンスする機能です。

設定する最も簡単な方法は、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コンポーネントのマウントポイントが必要です。

App.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プロジェクトを始めたばかりなので、そのスペースに注目してください。