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
次に、プラグインを有効にします。 コンポーネントを登録するだけです。
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)
});
ルート変更の発表
さて、の主な機能の1つ vue-announcer
アプリ内のどこかに移動すると、ルートの変更を自動的にアナウンスする機能です。
設定する最も簡単な方法は、有効にするときにルーターインスタンスを渡すことです。 VueAnnouncer
プラグイン、そのように:
// 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.
// ...
カスタムを探していない場合はこれでうまくいきますが、メッセージを変更したい場合はどうでしょうか。
// Just change this line and set the complimentRoute property.
Vue.use(VueAnnouncer, {
complimentRoute: 'is ready!' // {route} is ready!
}, router);
または、ルートごとに異なるメッセージを表示したいですか?
// 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
アプリのコンポーネント。
<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プロジェクトを始めたばかりなので、そのスペースに注目してください。