Nom accessible

Un nom accessible (accessible name en anglais) est le nom d'un élément d'interface utilisateur ; il s'agit du texte associé à un élément HTML qui fournit aux utilisateur·ice·s d'une technologie d'assistance une étiquette pour l'élément en question.

Les noms accessibles indiquent l'objectif ou l'intention de l'élément. Cela aide les utilisateur·ice·s à comprendre à quoi sert l'élément et comment ils peuvent interagir avec lui. En général, les noms accessibles des éléments doivent être propres à une page. Cela permet aux utilisateur·ice·s de distinguer un élément des autres et d'identifier l'élément avec lequel ils veulent interagir.

En fonction de l'élément et du balisage HTML, la valeur du nom accessible peut être dérivée du contenu visible (par exemple, le texte dans <figcaption>) ou invisible (par exemple, l'attribut aria-label défini sur un élément), ou d'une combinaison des deux. La manière dont le nom accessible d'un élément est déterminé est basée sur le calcul du nom accessible (en anglais), qui est différent pour chaque élément.

Il est préférable d'utiliser du texte visible comme noms accessibles. De nombreux éléments, notamment <a>, <td> et <button>, tirent leur nom de leur contenu. Par exemple, étant donné <a href="foo.html">Bar</a>, le nom accessible est « Bar ».

D'autres éléments tirent leur nom accessible du contenu des éléments associés. Pour certains éléments parents, comme <fieldset>, <table>, et <figure>, si ces derniers contiennent respectivement un enfant <fieldset>, <caption>, ou <figcaption>, l'association est automatique. Pour d'autres éléments, comme <textarea> et <input>, le nom accessible provient également d'un élément associé, l'élément <label>, mais cette association doit être explicitement définie avec une valeur d'attribut for sur le <label> qui correspond à l'attribut id de l'élément de formulaire.

Avec certains éléments, comme <img>, le nom accessible provient de ses attributs, dans ce cas, la valeur est l'attribut alt. En considérant que <img src="grape.jpg" alt="banane"/>, le nom accessible de l'image est « banane ».

Pour créer une association entre le contenu visible et un élément ou plusieurs nœuds de texte et un élément, l'attribut aria-labeledby peut être utilisé. S'il n'y a pas de texte visible à associer à un élément d'interface utilisateur nécessitant un nom accessible, l'attribut aria-label peut être utilisé. Les noms ne doivent pas être ajoutés aux éléments balisant le texte en ligne, comme <code>, <del>, et <mark>.

De nombreux éléments, tels que des sections de contenu textuel, n'ont pas besoin d'un nom accessible. Tous les contrôles doivent avoir un nom accessible. Toutes les images qui transmettent des informations et qui ne sont pas purement décoratives le sont également.

Les technologies d'assistance fourniront à l'utilisateur·ice la propriété de nom d'accessibilité, qui est le nom accessible ainsi que le rôle de l'élément. Bien que de nombreux éléments n'aient pas besoin d'un nom accessible, certains rôles de contenu peuvent bénéficier d'un nom accessible. Par exemple, un panneau d'onglets tabpanel est une section de contenu qui apparaît après qu'un·e utilisateur·ice a activé l'élément associé avec un rôle d'onglet tab. Ce rôle peut être défini sur un élément sans nom nécessaire, comme l'élément <div>. L'onglet tab est le contrôle et doit avoir un nom accessible. Le panneau d'onglets tabpanel est l'enfant (section de contenu) de tab. L'ajout de aria-labelledby à tabpanel est une bonne pratique.