Passage de texte
Un passage de texte, dans le glossaire du RGAA, désigne un texte présent dans le code source d'une page et référencé par un autre élément via aria-labelledby ou aria-describedby. C'est le mécanisme qui permet à un composant d'emprunter son nom accessible (ou sa description) à un texte situé ailleurs dans le DOM.
Votre bouton « × » ferme une modale intitulée « Confirmer la suppression ». Il n'a pas de texte visible. Comment transmettre cette information aux technologies d'assistance sans dupliquer le texte ? En pointant vers le titre existant. C'est un passage de texte.
#Le mécanisme : un pont entre deux éléments
Un passage de texte repose sur un principe simple. Un élément du DOM reçoit un id. Un autre le référence avec aria-labelledby ou aria-describedby :
<h2 id="titre-modale">Confirmer la suppression</h2>
<button aria-labelledby="titre-modale">×</button>Le lecteur d'écran annonce « Confirmer la suppression, bouton ». Le bouton emprunte son nom au titre existant.
Vous pouvez référencer plusieurs id séparés par des espaces. Le navigateur concatène les textes dans l'ordre indiqué :
<span id="action">Supprimer</span>
<span id="objet">le fichier rapport.pdf</span>
<button aria-labelledby="action objet">🗑️</button>
<!-- Nom accessible : "Supprimer le fichier rapport.pdf" -->aria-labelledby occupe le rang le plus élevé dans l'algorithme AccName du W3C. Il l'emporte sur aria-label, alt, <label> et le contenu textuel de l'élément. Priorité absolue.
Le RGAA mentionne les passages de texte dans presque toutes ses thématiques : images (critère 1.1), cadres (critère 2.1), liens (critère 6.1), scripts (critère 7.1), champs de formulaire (critère 11.1). La formulation est toujours la même : « passage de texte associé via l'attribut WAI-ARIA aria-labelledby ».
#Ce qui casse sans prévenir
Un id absent du DOM. Si aria-labelledby pointe vers un identifiant inexistant, le nom accessible est vide. Pas d'erreur dans la console. Le composant devient muet.
display: none ne bloque pas aria-labelledby. C'est contre-intuitif. La spécification AccName fait une exception : quand un texte est référencé par aria-labelledby, l'algorithme traverse display: none et visibility: hidden. Votre passage de texte peut être invisible à l'écran et fournir un nom accessible. Aucun autre mécanisme de nommage ne bénéficie de cette exception. Un <label> en display: none ne nomme plus son champ.
Confondre nom et description. aria-labelledby fournit le nom accessible, le label que le lecteur d'écran annonce en premier. aria-describedby fournit une description complémentaire, lue après une pause. Deux rôles distincts, deux attributs à ne pas interchanger.
#En résumé
Un passage de texte est un pont entre deux éléments du DOM, construit avec des id. Vérifiez que vos identifiants existent, que le texte référencé correspond au contenu attendu par l'utilisateur, et réservez aria-labelledby aux cas où le HTML natif (<label>, contenu textuel, alt) ne suffit pas.