Vue-announcerでVue.jsのアクセシビリティを向上させる
シングルページアプリケーションの特徴は、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プロジェクトを始めたばかりなので、そのスペースに注目してください。