Qu’est-ce que le nom accessible d’un élément HTML et sous quelles formes le retrouve-t-on ?

Ce que j’ai fait :

• lire l’article Le nom accessible en HTML(lien externe) d’Orange
• lire l’article What is an accessible name?(lien externe) de Léonie Watson
• lire l’article Les noms accessibles dans tous leurs états(lien externe) de Lena Chandelier
• lire la notice Utiliser l’attribut aria-label(lien externe) de Mozilla
• lire la notice Utiliser l’attribut aria-labelledby(lien externe) de Mozilla

Ce que j’ai appris

Définition

Nous avons vu dans les articles précédents que les navigateurs génèrent un arbre d’accessibilité à partir du DOM (Document Object Model). Dans cet arbre, on retrouve différents objets, par exemple un <a>, un <label> ou un <span>, qui ont besoin d’un nom accessible pour pouvoir être correctement restitués par les technologies d’assistance.

Le nom accessible d’un élément HTML est donc le texte qui est lu par les lecteurs d’écran pour identifier l’élément HTML en question. Il peut s’agir de l’attribut alt d’une image, du texte d’un bouton ou de l’intitulé d’un lien…

Le nom accessible peut provenir :

• du contenu d’une balise
• d’un attribut de cette balise
• d’un élément qui lui est associé
• d’un attribut ARIA (Accessible Rich Internet Applications)
• d’un texte invisible

Nom accessible donné par le contenu d’une balise

Prenons l’exemple suivant :

<a href="rerv.html">Le Réseau Express Régional Vélo</a>

Le nom accessible de ce lien est “Le Réseau Express Régional Vélo”. Un lecteur d’écran restituera donc ce lien de la manière suivante au moment de la prise de focus : “Le Réseau Express Régional Vélo Lien”. Reprenons ce même lien, cette fois sans intitulé :

<a href="rerv.html"></a>

Un lien de ce type n’est pas du tout accessible, car aucun nom n’est restitué par les technologies d’assistance. L’internaute n’a donc aucune idée de la destination de ce lien.

Nom accessible donné par un attribut

Prenons l’exemple suivant :

<img src="rerv.jpg" alt="Carte du Réseau Express Régional Vélo" />

Le nom accessible de cette image est “Carte du Réseau Express Régional Vélo”, contenu dans l’attribut alt.

Dans l’article Des liens accessibles (la théorie), nous avions vu que lorsqu’un lien est composé uniquement d’une image, c’est l’alternative de cette image qui constitue son intitulé : l’alternative est donc utilisée pour indiquer la destination du lien et par la même occasion son nom accessible. Prenons l’exemple suivant :

<a href="rerv.html"
  <img src="rerv.jpg" alt="Carte du Réseau Express Régional Vélo" />
</a>

Dans cet exemple, le nom accessible du lien est donné par l’attribut alt de l’image.

Nom accessible donné par un élément associé

Prenons l’exemple suivant :

<label for="search">Rechercher</label>
<input id="search" type="text">

Le nom accessible de ce champ de formulaire est “Rechercher”. L’attribut for sur le <label> et l’attribut id sur le champ <input> partagent la même valeur. L’association entre les deux éléments permet au navigateur d’exposer le contenu du label en tant que nom accessible pour le champ.

Nom accessible donné par un attribut ARIA

Il est également possible d’utiliser des attributs ARIA pour nommer un élément HTML ou modifier son nom accessible, notamment aria-label et aria-labelledby. Toutefois, il est important de noter que le nom accessible fourni par l’élément HTML natif sera remplacé par le nom accessible fourni par ARIA.

Aria-label

L’attribut aria-label peut être utilisé pour fournir un nom accessible à un élément qui n’en a pas. Les WCAG (Web Content Accessibility Guidelines) précisent ainsi que si le texte d’un élément n’est pas visible à l’écran, il faut de préférence utiliser aria-label. Par exemple :

<button class="burger-menu" type="button" aria-label="Ouverture du menu" >
  <span class="burger-icon"></span>
</button>

Pour la plupart des usagers, le contexte et la forme du bouton (ici une icône de hamburger) suffisent à déterminer son rôle. En revanche les personnes aveugles ou mal-voyantes ne disposent pas de ces informations. L’attribut aria-label permet de fournir une alternative textuelle, ici “Ouverture du menu”.

Notons bien que cet attribut aria-label n’est visible que pour les personnes utilisant des technologies d’assistance.

L’attribut aria-label peut aussi être utilisé pour fournir un autre nom accessible à un élément qui en possède déjà un. Par exemple :

<button aria-label="Calculer mon itinéraire par le Réseau Espress Régional Vélo">
  Calculer mon itinéraire
</button>

Le nom accessible de ce bouton est bien “Calculer mon itinéraire par le Réseau Espress Régional Vélo”, car il supplante le nom HTML natif, à savoir “Calculer mon itinéraire”. Cela permet de fournir un nom accessible et plus significatif aux utilisateurs et utilisatrices de lecteurs d’écran, tout en présentant une étiquette plus courte aux personnes voyantes.

Attention ! Depuis la publication de la version 2.1 des WCAG, un nouveau critère précise que le nom accessible ajouté doit reprendre au moins le nom affiché, ceci afin que les utilisateurs de commande vocale puissent faire interagir le composant d’interface. Dans l’exemple précédent, il faut donc que le aria-label contienne les mots “Calculer mon itinéraire”.

Aria-labelledby

L’attribut aria-labelledby permet de référencer comme nom accessible un texte qui se trouve ailleurs sur la page. Les WCAG précisent ainsi que si le texte du libellé est visible à l’écran, il faut de préférence utiliser aria-labelledby et pas aria-label. Par exemple :

<dialog role="dialog" aria-labelledby="modal-title">
  <h1 id="modal-title">Votre demande a bien été prise en compte !</h1>
</dialog>

On peut lier plusieurs id et donc plusieurs textes à un seul élément aria-labelledby. La restitution se fait alors dans l’ordre d’appel des identifiants. Par exemple :

<h2 id="facturation">Facturation</h2>

<div>
  <h3 id="nom">Votre nom</h3>

  <input type="text" aria-labelledby="nom facturation"/>
</div>

<div>
  <h3 id="adresse">Votre adresse</h3>

  <input type="text" aria-labelledby="adresse facturation"/>
</div>

Ici, les aria-labelledby restitueront donc respectivement :

• “Votre nom Facturation”
• “Votre adresse Facturation”

Nom accessible donné par un texte invisible

Il s’agit de texte invisible pour tout le monde, sauf les technologies d’assistance. Dans l’article Cacher du contenu en CSS, j’avais notamment évoqué la méthode employée par Gaël Poupard (voir son article Cache-cache CSS(lien externe)) et la fameuse class sr-only. Par exemple :

<a href="https://twitter.com/elbuffeto" class="twitter">
  <span class="sr-only">Compte Twitter de Loriane Buffet</span>
</a>

Le nom accessible du lien est contenu dans le <span>, visible uniquement pour les technologies d’assistance.

Note de l’autrice : cet article a été modifié le 13 janvier 2020, suite à une remarque d’Arnaud Delafosse sur Twitter(lien externe). La valeur d’un attribut aria-labelledby est bien celle correspondant à un id référencé sur la même page, tandis que la valeur d’un attribut aria-label est une chaîne de caractères correspondant au nom accessible. En conséquence, l’exemple cité dans le tweet a été déplacé dans la section relative à aria-label.