Comment décrire de manière accessible avec aria-describedby ?

Ce que j’ai fait :

• lire l’article Utiliser l’attribut aria-describedby(lien externe) de Mozilla
• lire l’article Describing aria-describedby(lien externe) de Scott O’hara
• lire l’article Short note on aria-label, aria-labelledby, and aria-describedby(lien externe) de Léonie Watson
• lire le chapitre Accessible Descriptions(lien externe) des WAI-ARIA Authoring Practices 1.1

Ce que j’ai appris

Impact sur les utilisateurs et utilisatrices

Un site web ou une application comporte des contenus et fonctionnalités qui doivent être clairement identifiables et compréhensibles pour les utilisatrices et utilisateurs. Souvent, de nombreux indications purement visuelles sont données aux internautes pour les guider dans une tache ou les diriger vers les informations nécessaires. Malheureusement, ces indications visuelles ne peuvent être perçues par tout le monde : les personnes aveugles ou mal-voyantes, ou les internautes utilisant des loupes pour grossir des portions de l’écran sont susceptibles d’être exclus.

L’attribut aria-describedby, lorsqu’il est correctement utilisé, peut fournir des descriptions à même d’être exploitées par les technologies d’assistance.

Définition

aria-describedby fonctionne de la même manière que aria-labelledby : utilisé sur un élément, il fournit un identifiant relié à un texte décrivant l’élément en question. Prenons l’exemple donné dans l’article Describing aria-describedby(lien externe) du Paciello Group :

<div role="alertdialog" aria-labelledby="acc_name" aria-describedby="acc_desc">
  <h2 id="acc_name">
    Are you sure?
  </h2>        

  <p id="acc_desc">
    Once you delete this thing, it's gone forever!
  </p>

  <button autofocus>
    Do not delete
  </button>

  <button>
    Delete
  </button>
</div>

Il s’agit d’une fenêtre de confirmation, dans laquelle un bouton reçoit automatiquement le focus au chargement de la fenêtre. Dans cet exemple, un lecteur d’écran lira “Are you sure? dialog. Once you delete this thing, it’s gone forever! Do not delete, button”.

Si l’attribut aria-describedby n’avait pas été ajouté, le lecteur d’écran aurait restitué le contenu suivant : “Are you sure? dialog. Do not delete, button”. La description fournie par aria-describedby permet à un internaute mal-voyant ou aveugle de mieux connaître le contexte dans lequel il ou elle se trouve.

Identifiants multiples

Au même titre que aria-labelledby, aria-describedby accepte plusieurs valeurs d’identifiants. Le contenu correspondant est restitué dans le même ordre que celui des identifiants. Par exemple :

<p id="text-1">
  Votre date de naissance vous sera demandée en cas de perte de votre mot de passe.
</p>
<!-- ... -->
<label for="birth"> Date de naissance :</label>
  <input id="birth" type="text" aria-describedby="text-2 text-1">
<p id="text-2">
  Veuillez renseigner votre date de naissance au format JJ/MM/AAAA.
</p>

Le lecteur d’écran restituera donc : “Veuillez renseigner votre date de naissance au format JJ/MM/AAAA. Votre date de naissance vous sera demandée en cas de perte de votre mot de passe.”

Restitution par les technologies d’assistance

Concaténation de la description

Le contenu référencé d’un attribut aria-describedby sera concaténé en une chaîne de caractères. Les liens, les images et les listes ne seront donc pas annoncés en tant que tels. Par exemple, si la description contient un élément <img />, c’est son texte alternatif qui sera restitué.

Prenons le code suivant :

<button aria-describedby="trash-desc"> Déplacer dans <img src="trash.svg" alt="corbeille"></button>
...
<p id="trash-desc">Les éléments placés dans <img src="bin.svg" alt="la corbeille"> seront définitivement supprimés après 30 jours.</p>

Le lecteur d’écran restituera la phrase suivante : “Les éléments placés dans la corbeille seront définitivement supprimés après 30 jours.”

Support

Dans son article Short note on aria-label, aria-labelledby, and aria-describedby(lien externe), Léonie Watson explique que l’attribut aria-describedby est bien supporté lorsqu’il est appliqué à des éléments interactifs (tels que les boutons, les formulaires ou les liens), ou bien des éléments possédant un rôle landmark ou widget. En revanche, utiliser aria-describedby sur des éléments du type <div>, <p> ou <blockquote> ne fonctionne généralement pas avec toutes les combinaisons de navigateurs et technologies d’assistance.

L’attribut aria-describedby est globalement bien supporté, cependant certaines descriptions peuvent ne pas être correctement restituées en fonction du navigateur ou du lecteur d’écran utilisé :

• l’article Describing aria-describedby(lien externe) présente plusieurs cas problématiques

• Access42 a réalisé plusieurs tests de restitution de aria-describedby(lien externe) sur des messages liés à un champ de formulaire et possédant différentes propriétés ARIA

Calcul de la description accessible

Comme pour le nom accessible, le navigateur et le lecteur d’écran effectuent un calcul pour déterminer la priorité d’une description accessible, dans le cas où plusieurs sont fournies. L’ordre de priorité est défini de la façon suivante :

1. aria-describedby
2. si aucune description n’est fournie, des attributs ou éléments HTML sont utilisés (dans le cas où ils ne servent pas de nom accessible). Il peut s’agir de :
   • l’attribut value d’un élément <input /> de type button, submit ou reset. Par exemple :

      <input type="submit" value="Submit" />
     

   • le contenu de l’élément <summary> dans un élément <details>.
   • le premier élément <caption> d’un élément <table>
3. l’attribut title