L'accessibilité vue par « Vue » : conseils et astuces pour rendre votre application accessible

Les frameworks JavaScript sont de plus en plus populaires dans le domaine du développement web, Angular et React comptant le plus grand nombre d'utilisateurs. Cependant, la tendance a commencé à s'inverser ces dernières années. Vue a véritablement pris son essor et s'est imposé comme un acteur majeur dans le domaine des frameworks JavaScript. Bien qu'il soit encore largement derrière React en termes de nombre total de téléchargements, Vue talonne désormais Angular et gagne en popularité chaque mois.

Vue est un excellent framework, dont la popularité n'a cessé de croître ces dernières années. Mais dans quelle mesure Vue est-il accessible ? Vue présente en effet un certain nombre de problèmes d'accessibilité. Toutefois, ces problèmes peuvent être résolus, et il existe des bibliothèques d'accessibilité permettant de créer des sites web accessibles en association avec Vue.

Il existe quelques problèmes d'accessibilité fondamentaux dans Vue qui, s'ils ne sont pas résolus par le développeur, rendront inévitablement votre application inaccessible. Les principaux problèmes sont les suivants :

• Titres des pages
• Gestion de l'attention
• Événements de clic
• Aria-live et zones d'alerte
• Mode sombre / mode clair

Titres des pages

En matière de frameworks, il n’est pas surprenant que les titres de page posent problème de manière générale. Les frameworks JavaScript sont connus pour ne pas mettre à jour le titre de la page lorsqu’un utilisateur passe d’une page à l’autre. À l’instar de React et d’Angular, les titres de page de Vue doivent être mis à jour manuellement afin d’alerter l’utilisateur d’un changement de page. Cela est particulièrement important pour les utilisateurs qui dépendent d’un lecteur d’écran, car le titre de la page est généralement lu lors de la navigation d’une page à l’autre.

Le moyen le plus simple de gérer les titres de vos pages est d'utiliser un mixin. Commencez par créer un fichier titlesMixin.js dans votre dossier mixins avec le code suivant :

function getTitle (vm) {
   const { title } = vm.$options;
   if (title) {
      return typeof title === 'function'
      ? title.call(vm)
      : title;
   }
}

export default {
   created () {
      const title = getTitle(this);
      if (title) {
         document.title = title;
      }
   }
}

Une fois que votre fichier mixin est prêt, importez-le dans votre fichier et appelez-le. Ensuite, ajoutez une propriété « title » à votre composant exporté en lui attribuant le titre de la page ou du composant correspondant.

import Vue from “vue”;
import titleMixin from “./mixin/titleMixin.js”;

Vue.mixin(titleMixin);

export default {
   name: “TestComponent”,
   components: { },
   title: “Test Component”
}

Gestion de l'attention

La gestion du focus dans Vue peut être aussi simple que d'utiliser des « refs ». Les « refs » vous permettent d'accéder au DOM réel plutôt qu'au DOM virtuel créé par Vue. Cela s'avère particulièrement utile lorsque vous disposez de plusieurs instances d'un même composant, où le code HTML serait répété. Le focus doit être géré aussi bien lors des transitions d'un composant à l'autre (par exemple, lors de l'ouverture et de la fermeture d'une fenêtre modale ou d'une boîte de dialogue) que lors des transitions d'une page à l'autre.

Que vous passiez d’une page à l’autre ou d’un composant à l’autre, il est recommandé d’attribuer le focus de manière logique. Cela aide les utilisateurs qui ont recours à des technologies d’assistance à comprendre le contexte du nouveau contenu affiché sur la page. Pour identifier une instance unique de l’élément sur lequel vous souhaitez placer le focus, utilisez l’attribut `ref`. Par exemple, si vous naviguez d’une page à l’autre, vous souhaiterez peut-être placer le focus sur l’en-tête situé tout en haut. Ajoutez l’attribut `ref` comme suit, et n’oubliez pas de définir votre `tabIndex` pour vous assurer qu’il figure bien dans l’ordre de tabulation :

<h1 ref=”headingMsg” tabIndex=”-1”>{{msg}}</h1>

Utilisez ensuite le cycle de vie pour placer le curseur sur l'en-tête une fois la page chargée :

export default {
   name: “TestPage”,
   props: {
   msg: String
},
mounted: function() {
   this.focusToHeader();
},
methods: {
   focusToHeader() {
      this.$refs.headingMsg.focus();
      console.log(this.$refs.headingMsg);
   }
}

Ou bien, imaginons que vous ayez une boîte de dialogue modale que vous souhaitiez ouvrir en cliquant sur un bouton :

<button @click={toggleModal} ref=”modalToggle”></button>
<div class=”modal-wrapper” v-bind:class=”open: isOpen” ref=”modalWrapper” aria-hidden=”true”>
<div>...</div>

Une fois qu'une valeur de type chaîne est attribuée à `ref`, vous pouvez l'utiliser comme référence dans la fonction `toggleModal` pour basculer entre les attributs ou les noms de classes :

toggleModal() {
   this.$refs.modalWrapper.setAttribute(‘aria-hidden’, isOpen);
   console.log(this.$refs.modalToggle);
}

Si vous souhaitez placer le focus sur un élément situé à l'intérieur de la fenêtre modale lorsque la méthode `toggleModal()`est appelée (par exemple, le bouton de fermeture ou un champ de saisie), vous devriez utiliser la fonction `$nextTick()`de Vue, qui garantit que l'élément existe avant d'essayer de lui attribuer le focus. Vous pouvez également utiliser des directives personnalisées pour gérer le focus lors du chargement de la page. Pour des exemples illustrant cette approche, consultez la page de la documentation Vue consacrée aux directives personnalisées.

Événement de clic

Les événements de clic dans Vue fonctionnent de la même manière que dans n'importe quel autre framework. Vous pouvez les déclencher à l'aide de `v-on:click` ou en utilisant la propriété abrégée `@click`.

<button @click=”toggleModal”>More Information</button>

En utilisant des éléments sémantiques, vous bénéficierez à la fois des événements de clic et des événements clavier lorsque vous déclencherez des éléments tels qu’un bouton bascule ou un bouton de validation. En revanche, si vous utilisez du code HTML non sémantique, vous devrez ajouter des événements clavier afin d’activer les fonctionnalités nécessaires aux utilisateurs du clavier et des technologies d’assistance. Les événements clavier sont essentiels pour les utilisateurs qui dépendent exclusivement de leur clavier pour naviguer et interagir avec votre site web. Ne pas inclure ces événements empêchera les utilisateurs d'accéder à certains contenus qui pourraient être masqués derrière l'action d'un bouton. Le HTML sémantique est fortement recommandé par rapport au HTML non sémantique, car il intègre d'emblée les événements clavier.

div role=”button” tabindex=”0” @click=”toggleModal” @keypress=”toggleModal”>More Information</button>

Aria-live et zones d'alerte

Lorsqu'il s'agit d'alerter les utilisateurs d'un changement d'état ou de contenu sur la page, il est important d'utiliser correctement les attributs `aria-live` et les zones d'alerte. Il est possible de remplacer dynamiquement le contenu d'une page au sein d'une zone « live », mais cette zone doit déjà être présente sur la page pour que le contenu puisse être annoncé à toute technologie d'assistance. L'ajout et la suppression dynamiques de la zone dans le DOM entraîneront des problèmes avec les technologies d'assistance et pourraient faire en sorte que votre nouveau contenu ou votre alerte soit complètement ignoré.

Mode sombre / Mode clair

Certaines bibliothèques permettent de basculer d'un thème à l'autre. C'est un excellent moyen de permettre aux utilisateurs de personnaliser l'apparence d'une application web selon leurs préférences ou leurs besoins, plutôt que de les limiter à un seul style. Bien que cela puisse aider l'utilisateur, il est important de garder à l'esprit que tous les thèmes doivent être accessibles. Veillez à ce que le contraste des couleurs, la taille du texte et les styles de zoom soient conformes aux normes WCAG afin que les utilisateurs puissent profiter pleinement du travail considérable que vous avez consacré à la conception de vos thèmes.

Bibliothèques et paquets d'accessibilité

Il existe de nombreuses bibliothèques et modules qui vous aideront à créer un site web accessible. Voici quelques ressources notables :

• Frameworks d'interface utilisateur
  • Vuetensils – une bibliothèque regroupant plusieurs composants conçus pour être utilisables dès leur installation
    • https://vuetensils.stegosource.com/
    • Comprend un composant « date » de calendrier entièrement accessible, un composant modal/boîte de dialogue, un composant d'onglets et un composant « bascule » de type accordéon
    • Le composant « Input » impose l'utilisation d'étiquettes ; toutefois, il fournit également des informations détaillées sur la manière de masquer ces dernières, ce que nous déconseillons ; en effet, les descriptions des étiquettes ne seront pas associées à celles-ci par programmation.
    • L'utilisateur doit ajouter un texte alternatif susceptible de s'appliquer à plusieurs images (en cas d'utilisation d'un attribut `srcset`)
    • Comprend un composant « skip » (ou « lien de saut ») qui permet aux utilisateurs d'accéder facilement au contenu principal de la page
  • Veutify – une bibliothèque d'interfaces utilisateur complète qui garantit une accessibilité totale et la conformité à la norme 508
    • https://vuetifyjs.com/en/
    • Dispose d'un composant d'alerte entièrement accessible qui utilise l'attribut « alert » et l'attribut « aria-label » lorsque cela est nécessaire
    • Le carrousel utilise des images d'arrière-plan au lieu de la balise `img`, ce qui empêche l'ajout d'un texte alternatif permettant de rendre les images du carrousel accessibles. Cependant, la navigation au sein du carrousel est entièrement accessible.
    • Les éléments non cliquables sont accessibles ; les éléments interactifs ne disposent pas de la fonction « bouton » permettant à un utilisateur de lecteur d'écran de savoir que l'élément est interactif.
    • Le calendrier n'est pas entièrement accessible
    • Les boîtes de dialogue sont facilement accessibles grâce au document de rôle et à l'index de tabulation 0, avec un bouton de basculement entièrement accessible et un focus captif.
    • Il comporte des champs de formulaire et des composants accessibles à tous, notamment :
      • Case à cocher
      • Liste déroulante
      • Sélectionner les menus déroulants et les boutons de débordement
      • Case à cocher
      • Zones de texte et champs de texte
  • Il est possible d'activer le mode clair, le mode sombre ou un thème personnalisé. Si vous utilisez cette option, assurez-vous que vos thèmes sont entièrement accessibles et conformes aux normes WCAG.
• Utilitaires et composants
  • Focus-trap-vue
    • https://github.com/posva/focus-trap-vue
    • Très facile à mettre en œuvre
    • Dispose d'une documentation claire
    • Cette option permet à l'utilisateur de désactiver certaines fonctionnalités d'accessibilité, ce que nous ne recommandons pas.
  • Utilitaires d'accessibilité Vue
    • https://github.com/Jinjiang/vue-a11y-utils
    • Permet d'ajouter et de gérer facilement plusieurs attributs « aria-* » pour un composant donné, soit directement, soit via la directive « v-aria ».
    • Générez facilement des identifiants uniques à l'aide du mixin « ID » au sein d'un composant
    • Possibilité de verrouiller la mise au point à l'aide du composant « Vue Focus Trap »
    • Il fournit un mixin « Shortcuts », que nous vous recommandons d'éviter car il peut remplacer les raccourcis clavier prévus pour les technologies d'assistance.
  • Vue-announcer
    • https://github.com/vue-a11y/vue-announcer
    • Mise en place aisée d'annonces ponctuelles ou d'annonces de routage
    • Documentation descriptive

En résumé

Malheureusement, l’équipe Vue n’a pas encore publié ses directives en matière d’accessibilité, mais cela ne signifie pas pour autant que le framework ne prenne pas en charge l’accessibilité. Il existe un excellent ouvrage de Marcus Herrmann intitulé « Accessible Vue », qui vous permettra d’approfondir vos connaissances sur la manière de rendre vos applications Vue accessibles dès le départ. En ce qui concerne les outils qui vous aideront à créer des applications plus accessibles, il existe Vue-Axe, qui vous permettra de détecter les problèmes d’accessibilité dès la phase de développement, plutôt que plus tard dans le processus.

Il n’y a guère d’excuses pour créer des sites web et des applications inaccessibles lorsqu’on utilise des frameworks JavaScript, en particulier Vue, compte tenu de l’abondance de ressources sur l’accessibilité disponibles sur le web. Comme pour les autres frameworks JavaScript, c’est à vous, en tant que développeur, qu’il incombe de veiller à ce que le contenu soit accessible, et vous savez désormais quels sont les points à vérifier avant de mettre votre site web en production. Dans l’ensemble, les perspectives sont prometteuses pour la création d’applications accessibles avec le framework Vue.