ARIA : attribut aria-colindextext
L'attribut aria-colindextext définit une alternative textuelle lisible par humain·e à la valeur numérique de aria-colindex.
Description
Lorsque vous avez un tableau très large ou que vous souhaitez n'afficher qu'une partie d'un tableau, il se peut que toutes les colonnes ne soient pas présentes dans le DOM. Dans ce cas, on utilise aria-colcount avec une valeur entière pour indiquer combien de colonnes le tableau (ou la grille) comporterait si toutes étaient présentes, et on ajoute la propriété aria-colindex sur chaque colonne pour fournir l'indice de colonne dans le tableau complet.
Dans l'exemple HTML suivant, notre tableau comporte 8 colonnes, mais nous n'en affichons que 4. La colonne « Ville » est la cinquième colonne du tableau complet, comme défini par aria-colindex="5".
<table aria-colcount="8">
<thead>
<tr>
<th aria-colindex="1" scope="col">Prénom</th>
<th aria-colindex="2" scope="col">Nom</th>
<th aria-colindex="5" scope="col">Ville</th>
<th aria-colindex="7" scope="col">Code postal</th>
</tr>
</thead>
…
</table>
Ce tableau n'est pas très complexe. S'il s'agissait d'un tableur de plus de 100 colonnes ou d'une grille sans en-têtes de colonnes (comme un échiquier), la valeur fournie ou calculée de aria-colindex pourrait ne pas être parlante ou ne pas refléter l'indice affiché. Dans ce cas, on peut inclure aria-colindextext. Sa valeur est une chaîne de caractères lisible par humain·e, alternative à la valeur numérique de aria-colindex.
<table aria-colcount="128">
<thead>
<tr>
<th aria-colindex="1" aria-colindextext="Symbole NYSE" scope="col">
NYSE
</th>
<th aria-colindex="110" aria-colindextext="Valeur début 2021" scope="col">
01/21
</th>
<th aria-colindex="122" aria-colindextext="Valeur début 2022" scope="col">
01/22
</th>
<th aria-colindex="124" scope="col">Recommandation</th>
</tr>
</thead>
…
</table>
Dans l'exemple ci-dessus, le tableau comporte 128 colonnes dont seulement 4 sont affichées. L'attribut aria-colindextext est utilisé sur trois colonnes pour fournir une alternative textuelle lisible. En incluant aria-colindextext="Valeur début 2021", les technologies d'assistance peuvent annoncer « Valeur début 2021 » au lieu de « Colonne 110 ».
N'utilisez aria-colindextext que lorsque la valeur fournie ou calculée de aria-colindex n'est pas parlante ou ne reflète pas l'indice affiché. Lorsque vous ajoutez aria-colindextext, conservez aussi aria-colindex car certaines technologies d'assistance s'appuient sur l'indice numérique pour suivre la position de l'utilisateur·ice et proposer une navigation alternative dans le tableau.
Note :
Alors que aria-colindex peut être ajouté à une ligne lorsque toutes les colonnes présentes sont contiguës (car des valeurs séquentielles peuvent être déduites), aria-colindextext n'est PAS une propriété supportée pour row.
Voir aussi aria-rowindextext.
Valeurs
<string>-
L'alternative textuelle lisible par humain·e à la valeur numérique de
aria-colindex
Interfaces associées
Element.ariaColIndexText-
La propriété
ariaColIndexText, qui fait partie de l'interfaceElement, reflète la valeur de l'attributaria-colindextext. ElementInternals.ariaColIndexText-
La propriété
ariaColIndexText, qui fait partie de l'interfaceElementInternals, reflète la valeur de l'attributaria-colindextext.
Rôles associés
Utilisé dans les rôles :
Hérité par les rôles :
Spécifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # aria-colindextext |