Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Element : propriété ariaRowIndex

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis octobre 2023.

La propriété ariaRowIndex de l'interface Element reflète la valeur de l'attribut aria-rowindex, qui définit l'index de ligne d'un élément ou sa position par rapport au nombre total de lignes dans un tableau, une grille ou une grille arborescente.

Valeur

Une chaîne de caractères contenant un entier.

Exemples

Dans cet exemple, l'attribut aria-rowindex sur l'élément avec un ID de entete-role est défini sur "1". En utilisant ariaRowIndex, nous mettons à jour la valeur à "2".

html
<table
  id="tableau-semantique"
  role="table"
  aria-label="Éléments sémantiques"
  aria-describedby="description_tableau_elements_semantiques"
  aria-rowcount="100">
  <caption id="description_tableau_elements_semantiques">
    Éléments sémantiques à utiliser à la place des rôles ARIA
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th
        role="columnheader"
        id="entete-role"
        aria-sort="none"
        aria-rowindex="1">
        Rôle ARIA
      </th>
      <th
        role="columnheader"
        id="entete-element"
        aria-sort="none"
        aria-rowindex="1">
        Élément sémantique
      </th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" aria-rowindex="11">header</td>
      <td role="cell" aria-rowindex="11">h1</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="16">header</td>
      <td role="cell" aria-rowindex="16">h6</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="18">rowgroup</td>
      <td role="cell" aria-rowindex="18">thead</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="24">term</td>
      <td role="cell" aria-rowindex="24">dt</td>
    </tr>
  </tbody>
</table>
js
let el = document.getElementById("entete-role");
console.log(el.ariaRowIndex); // 1
el.ariaRowIndex = "2";
console.log(el.ariaRowIndex); // 2

Spécifications

Spécification
Accessible Rich Internet Applications (WAI-ARIA)
# dom-ariamixin-ariarowindex

Compatibilité du navigateur

Voir aussi