ARIA : attribut aria-rowindex

L'attributaria-rowindex définit la position d'un élément par rapport au nombre total de lignes dans un tableau, une grille ou une arborescence de grille.

Description

Certains tableaux comportent de très nombreuses lignes. Charger uniquement une sous-partie des lignes peut être un choix de conception, améliorer les performances ou l'expérience utilisateur·ice.

Lorsque seulement une partie des lignes est chargée, il faut indiquer à tou·te·s les utilisateur·ice·s quelles sous-parties de lignes sont affichées. L'attributaria-rowindex sert à définir l'index ou la position de la cellule ou de la ligne par rapport au nombre total de lignes dans un tableau, une grille ou une arborescence de grille.

Ajouté sur l'élément<tr> ou sur un élément avec le rôlerow, ou directement sur<td>,<th> ou un élément avec le rôlecell ougridcell, la valeur correspond à la position de la ligne dans le tableau complet.

La valeur dearia-rowindex est un entier supérieur ou égal à1, supérieur à la valeur dearia-rowindex de toute ligne précédente, et inférieur ou égal au nombre de lignes du tableau complet.

Si toutes les lignes sont chargées et présentes dans le DOM, il n'est pas nécessaire d'ajouteraria-rowindex car les navigateurs calculent automatiquement l'index de chaque ligne. Cependant, lorsque seule une partie des lignes est présente dans le DOM,aria-rowindex est nécessaire pour indiquer la position de chaque ligne dans le tableau complet. Si seule une partie des lignes est chargée, il faut aussi inclurearia-rowcount sur l'ancêtre tableau, même si le nombre total de lignes n'est pas connu.

Si le tableau avec une sous-partie de lignes possède une cellule qui s'étend sur plusieurs lignes, la ligne et la cellule doivent toutes deux avoir l'attributaria-rowindex. Si une cellule s'étend sur plusieurs lignes (quand le rôle de la cellule inclut l'attributaria-rowspan ou que la cellule HTML possède l'attributrowspan supérieur à 1), incluez la valeur dearia-rowindex de la ligne de départ sur la cellule en plus de l'attribut d'étendue de ligne approprié. La valeur doit être l'index de la ligne où commence l'étendue.

Note :L'attributaria-rowindex doit être ajouté à chaque ligne, mais il est optionnel sur les cellules, sauf pour les cellules qui s'étendent sur plusieurs lignes : l'attributaria-rowindex est requis sur toutes les cellules étendues.

Exemple

L'exemple suivant montre une grille de 24 lignes, dont la première et les lignes 7 à 10 sont affichées à l'utilisateur·ice. La dernière cellule « Poste » s'étend sur les colonnes 9 et 10.

html

<div role="grid" aria-rowcount="24">  <div role="rowgroup">    <div role="row" aria-rowindex="1">      <span role="columnheader">Prénom</span>      <span role="columnheader">Nom</span>      <span role="columnheader">Poste</span>    </div>  </div>  <div role="rowgroup">    <div role="row" aria-rowindex="7">      <span role="gridcell">Morgan</span>      <span role="gridcell">Brian</span>      <span role="gridcell">Milieu de terrain</span>    </div>    <div role="row" aria-rowindex="8">      <span role="gridcell">Abby</span>      <span role="gridcell">Dahlkemper</span>      <span role="gridcell">Défenseure</span>    </div>    <div role="row" aria-rowindex="9">      <span role="gridcell">Ashlyn</span>      <span role="gridcell">Harris</span>      <span role="gridcell" aria-rowspan="2" aria-rowindex="9"        >Gardienne de but</span      >    </div>    <div role="row" aria-rowindex="10">      <span role="gridcell">Alyssa</span>      <span role="gridcell">Naeher</span>    </div>  </div></div>

Notez quearia-rowspan etaria-rowindex sont présents sur la cellule « Gardienne de but », qui s'étend sur deux lignes.

Valeurs

<integer>: Un entier supérieur ou égal à 1, supérieur à la valeur dearia-rowindex de la ligne précédente (si elle existe), et inférieur ou égal à la valeur dearia-rowcount.

Interfaces associées

Element.ariaRowIndex: La propriétéariaRowIndex, qui fait partie de l'interfaceElement, reflète la valeur de l'attributaria-rowindex.
ElementInternals.ariaRowIndex: La propriétéariaRowIndex, qui fait partie de l'interfaceElementInternals, reflète la valeur de l'attributaria-rowindex.