Focus sur l’ordre de priorité des noms accessibles.

Ce que j’ai fait :

• lire l’article Les attributs ARIA qui peuvent vous sauver(lien externe) d’Orange
• lire la spécification Accessible Name and Description Computation(lien externe) du W3C (World Wide Web Consortium)
• lire l’article Les noms accessibles dans tous leurs états(lien externe) de Lena Chandelier

Ce que j’ai appris

L’algorithme du W3C

Nous avons précédemment qu’il existe plusieurs méthodes pour donner un nom accessible à un élément :

• avec du HTML natif, dans le contenu de la balise

• avec du HTML complémentaire, grâce à des attributs comme alt ou title

• avec la surcouche sémantique ARIA, grâce à des attributs comme aria-label ou aria-labelledby

• avec du CSS, grâce à des propriétés spécifiques permettant de rendre le nom accessible visible uniquement aux technologies d’assistance

Plusieurs de ces méthodes peuvent être utilisées simultanément et dans ce cas, le navigateur et le lecteur d’écran doivent effectuer un calcul pour déterminer quel est le nom accessible.

Le W3C a donc établi un algorithme de calcul(lien externe) permettant de déterminer la priorité du nom accessible sur des composants interactifs tels que les champs de formulaire ou les liens.

Je dois avouer que la spécification du W3C est assez technique et relativement complexe (quelqu’un ne veut pas se lancer dans une petite traduction ?), néanmoins voici ce que j’en ai compris.

ARIA gagne toujours

aria-labelledby en premier, puis aria-label sont prioritaires dans le calcul et supplantent les autres valeurs de noms accessibles. Examinons le code suivant :

<button aria-label="Accéder à mon site de recettes">Mes recettes</button>

Le résultat restitué par un lecteur d’écran sera “Accéder à mon site de recette” uniquement, car aria-label est prioritaire sur le contenu texte. Prenons ensuite le code suivant :

<h2 id="titre">Mon site de recettes<h2>
<button aria-label="Accéder à mon site de recettes" aria-labelledby="titre">Mes recettes</buttton>

Le résultat restitué par un lecteur d’écran sera “Mon site de recette”, car aria-labelledby est prioritaire sur aria-label.

title en dernier recours

La spécification du W3C précise :

Tooltip attributes are used only if nothing else, including subtree content, has provided results.

La valeur de l’attribut title est donc la moins prioritaire et n’est utilisée que si aucun autre nom accessible n’est fourni.

Attributs et éléments associés

Nous nous intéressons ensuite à ce qu’il se passe entre les attributs ARIA et l’attribut title. Immédiatement après aria-labelledby et aria-label, l’algorithme de calcul prend en compte l’attribut de l’élément ou un autre élément associé à même de fournir un nom accessible. Il peut s’agir par exemple de l’attribut alt d’une image ou d’une balise label associée à un champ de formulaire par un id. Par exemple :

<img src="pandaroux.jpg" alt="Un panda roux endormi" title="Panda roux" />

Dans cet exemple, la valeur de l’attribut alt est définie comme nom accessible, en priorité sur la valeur de l’attribut title. Le nom accessible est donc “Un panda roux endormi”.

“Name from content”

Certains éléments HTML peuvent fournir un nom accessible à partir de leur contenu. C’est le cas des éléments button. Par exemple :

<button title="Cliquez sur le bouton">Validez ma commande</buttton>

Dans cet exemple, le nom accessible restitué par un lecteur d’écran sera “Validez ma commande”.

Pseudo-éléments CSS

Le contenu CSS généré par les pseudo-éléments ::before et ::after peut lui aussi avoir valeur de nom accessible. Par exemple :

<button class="btn" title="Cliquez sur le bouton"></buttton>

.btn::after {
  content: 'Cliquez pour valider !';
}

Dans cet exemple, le nom accessible restitué sera “Cliquez pour valider !”.

Prenons maintenant l’exemple suivant :

<button class="btn" title="Cliquez sur le bouton">Validez ma commande</buttton>

.btn::after {
  content: 'Cliquez pour valider !';
}

Dans cet exemple, le nom accessible restitué sera “Validez ma commande Cliquez pour valider !”. L’algorithme de calcul concatène les valeurs du contenu texte et du pseudo-élément pour constituer le nom accessible.

Attention ! Si l’internaute choisit de désactiver le CSS, il ou elle n’aura plus accès au contenu du pseudo-élement. Il est donc important de ne pas compter uniquement sur les pseudo-éléments pour générer un nom accessible ou tout contenu nécessaire à la compréhension.

Récapitulatif

Si l’on résume les points précédents, l’ordre de priorié établi pour désigner le nom accessible d’un élément est donc le suivant :

1. aria-labelledby
2. aria-label
3. un attribut ou un élément HTML associé tel que alt pour une image ou label pour un champ de texte
4. contenu texte de l’élément et/ou pseudo-element CSS
5. title

Notes

Un contenu caché par du CSS (grâce à la propriété display: none; ou visibility: hidden;) ou l’attribut HTML hidden entre en compte dans le calcul de priorité du nom accessible s’il est référencé par un attribut aria-labelledby.