Faire parler le lecteur d'écran à l'aide de JavaScript et ARIA

Préambule

Dans certains cas, il peut être intéressant de vouloir faire parler le lecteur d'écran, pour confirmer une action utilisateur par exemple. Dans cet exemple, nous allons voir comment ceci peut être réalisé simplement à l'aide de l'attribut aria-live.

Principe de fonctionnement

L'attribut aria-live positionné sur un élément permet d'indiquer au lecteur d'écran que cet élément doit être vocalisé automatiquement lorsque son contenu est modifié.

Les valeurs possibles sont :

• aria-live="off" : valeur par défaut, l'utilisateur n'est pas averti lorsque l'élément est mis à jour.
• aria-live="polite" : le lecteur d'écran vocalise de manière polie lorsque l'élément est mis à jour. C'est-à-dire que si le lecteur d'écran était déjà en train de lire du texte, celui-ci n'est pas interrompu.
• aria-live="assertive" : le lecteur d'écran est interrompu dans sa lecture et avertit l'utilisateur de la mise à jour le plus tôt possible.

Et en Javascript ?

Cette première solution permet dans bien des cas de rendre son application accessible. Il existe tout de même quelques cas où il serait pratique de pouvoir faire parler le lecteur d'écran directement à l'aide d'une fonction Javascript (exemple : speak('Article supprimé du panier')). Malheureusement ceci n'est pas disponible nativement.

Heureusement, on peut rapidement réaliser une petite fonction Javascript qui utilisera un élément aria-live sous le capot pour réaliser cette fonctionnalité.

À l'appel de la fonction speak, on ajoute une div à la fin de la page. On lui affecte un attribut aria-live et on insère le message à vocaliser dans la div. Pour ne pas que ce message soit visible dans la page, on peut ajouter également une classe de masquage accessible sur cette div, ainsi celle-ci sera vocalisée mais ne sera pas visible à l'écran.

Détail du code

  /* srSpeak(text, priority)
    text : le message à vocaliser
    priority (facultatif) : "polite" (par défaut) ou "assertive" */

  function srSpeak(text, priority) {
      var el = document.createElement("div");
      var id = "speak-" + Date.now();
      el.setAttribute("id", id);
      el.setAttribute("aria-live", priority || "polite");
      el.classList.add("visually-hidden");
      document.body.appendChild(el);

      window.setTimeout(function () {
        document.getElementById(id).innerHTML = text;
      }, 100);

      window.setTimeout(function () {
          document.body.removeChild(document.getElementById(id));
      }, 1000);
  }

Rappel : pour que les messages vocalisés ne soient pas visibles à l'écran vous devez avoir une classe de masquage accessible (visually-hidden) dans vos CSS.

Exemple

Vous pouvez tester cette fonction grâce au formulaire ci-dessous (à tester avec un lecteur d'écran, sinon on n’entend rien).

Test