Améliorer l'accessibilité de Vue.js avec vue-announcer

De Get Docs
Aller à :navigation, rechercher

La caractéristique déterminante des applications à page unique, comme celles couramment créées avec Vue.js, est qu'elles prennent en charge la navigation à l'intérieur de la page avec JavaScript au lieu de la laisser au navigateur comme les sites Web normaux. Malheureusement, lorsque cela se produit, l'accessibilité peut facilement tomber à l'eau. Les lecteurs d'écran peuvent ne pas capter les changements d'itinéraire, ce qui peut désorienter les utilisateurs malvoyants. vue-announcer devrait aider à résoudre le problème, en vous permettant d'annoncer les modifications apportées aux lecteurs d'écran. C'est utile pour les changements de route, les notifications, les annonces et à peu près n'importe quelle modification dynamique du DOM. Tout ce que vous avez à faire est de lui dire quand et quoi annoncer.

Commencer

Allez-y et installez vue-announcer. Ce guide suppose que vous avez déjà configuré un projet Vue.js. Sinon, lancez un nouveau projet Vue en utilisant vue-cli 3.0 et les options par défaut. Exécuter $ vue create my-new-project et appuyer plusieurs fois sur Entrée devrait suffire.

$ npm install --save vue-announcer

Ensuite, activez le plugin. Tout ce qu'il fait est d'enregistrer le composant :

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)
});

Annonce des changements d'itinéraire

Désormais, l'une des principales fonctionnalités de vue-announcer est la possibilité d'annoncer automatiquement les changements d'itinéraire lorsque vous naviguez quelque part dans votre application.

La façon la plus simple de le configurer est simplement de passer votre instance de routeur lors de l'activation du plugin VueAnnouncer, comme ceci :

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.
// ...

Cela fera l'affaire si vous ne cherchez rien de personnalisé, mais que faire si vous voulez changer le message ?

main.js

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

Ou aimeriez-vous avoir des messages différents pour chaque itinéraire ?

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?)'
    }
  }
];

Annonces manuelles

vue-announcer vous aide également à informer les lecteurs d'écran des modifications apportées au contenu dynamique. Par exemple, des mises à jour de statut personnalisées ou des notifications. Il n'y a pas vraiment de moyen de le faire automatiquement, vous devrez donc déclencher et définir manuellement des messages.

Lorsque vous rédigez des annonces, réfléchissez à la façon dont un utilisateur malvoyant les comprendrait et essayez de formuler vos messages en conséquence.


Pour déclencher une annonce manuelle, vous aurez d'abord besoin d'un point de montage pour le composant vue-announcer dans votre application.

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>

Ensuite, envoyez simplement un message en utilisant this.$announcer.set(MESSAGE).

Consultez le référentiel [1] pour plus de détails à jour. Les personnes derrière vue-announcer ne font que commencer leurs projets Vue liés à l'accessibilité, alors surveillez cet espace !