ARIA : rôle rowheader
Le rôle role="rowheader" désigne une cellule contenant l'information d'en-tête d'une ligne au sein d'une structure tabulaire, comme une grid, une table ou un treegrid.
Description
Rowheader est la cellule d'en-tête d'une ligne ; il établit une relation entre cette cellule et les autres cellules de la même ligne.
<div
role="table"
aria-label="Populations"
aria-describedby="country_population_desc">
<div id="country_population_desc">Populations mondiales par pays</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-sort="descending">Pays</span>
<span role="columnheader" aria-sort="none">Population</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span role="rowheader">Finlande</span>
<span role="cell">5,5 millions</span>
</div>
<div role="row">
<span role="rowheader">France</span>
<span role="cell">67 millions</span>
</div>
</div>
</div>
C'est l'équivalent structurel de l'élément HTML <th> avec l'attribut scope="row" (soit <th scope="row">). Il est fortement recommandé d'utiliser l'élément HTML natif <th>.
Pour créer un en-tête de ligne ARIA, ajoutez role="rowheader" à l'élément. Cet en-tête doit être imbriqué dans une row, laquelle est, à son tour, imbriquée dans un rowgroup, ou peut être placée directement dans une grid, table ou treegrid.
Note : Il est fortement conseillé d'utiliser les éléments de tableau natifs HTML autant que possible.
Propriétés, états et rôles WAI-ARIA associés
Rôles de contexte
- role="row"
-
Le seul contexte dans lequel on trouve un
row. Il englobe une cellule ou un groupe de cellules constitutives d'une ligne, dont une seule devrait avoir le typerowheader. Similaire à l'élément HTML natif<tr>.
Interactions au clavier
Aucune.
Fonctionnalités JavaScript requises
Aucune.
Note :
La première règle d'utilisation d'ARIA est la suivante : si vous pouvez utiliser une fonctionnalité native qui offre déjà la sémantique et le comportement requis, utilisez‑la plutôt que de détourner un élément et d'ajouter un rôle, un état ou une propriété ARIA pour le rendre accessible. Employez les éléments HTML <table>, <tr>, <th>, <td> et autres éléments de tableau natifs plutôt que les rôles ARIA de tableau lorsque cela est possible.
Exemples
<div
role="table"
aria-label="Semantic Elements"
aria-describedby="semantic_elements_table_desc"
aria-rowcount="81">
<div id="semantic_elements_table_desc">
Éléments sémantiques à utiliser à la place des rôles ARIA
</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-sort="none">Rôle ARIA</span>
<span role="columnheader" aria-sort="none">Élément sémantique</span>
</div>
</div>
<div role="rowgroup">
<div role="row" aria-rowindex="11">
<span role="rowheader">header</span>
<span role="cell">h1</span>
</div>
<div role="row" aria-rowindex="16">
<span role="rowheader">header</span>
<span role="cell">h6</span>
</div>
<div role="row" aria-rowindex="18">
<span role="rowheader">rowgroup</span>
<span role="cell">thead</span>
</div>
<div role="row" aria-rowindex="24">
<span role="rowheader">term</span>
<span role="cell">dt</span>
</div>
</div>
</div>
L'exemple ci‑dessus illustre une table ARIA non sémantique avec un en-tête et un corps de tableau, où cinq des 81 lignes sont présentes dans le DOM : une dans l'en-tête et quatre dans le corps. La ligne d'en-tête, isolée dans son groupe, possède deux en-têtes de colonne. Les colonnes sont triables, mais ne sont pas triées actuellement, comme l'indique la propriété aria-sort. Le corps du tableau constitue un autre rowgroup, avec quatre lignes présentes dans le DOM. Chaque ligne de données du tableau possède un en‑tête de ligne. Comme toutes les lignes ne figurent pas dans le DOM, la propriété aria-rowindex est incluse sur chaque ligne.
Bonnes pratiques
Utilisez uniquement <table>, <tbody>, <thead>, <tr>, <th>, <td> et ainsi de suite pour la structure des tableaux de données. Vous pouvez ajouter ces rôles ARIA afin d'assurer l'accessibilité si la sémantique native du tableau est supprimée, par exemple par des règles CSS. Un cas d'utilisation pertinent du rôle ARIA table est lorsque la propriété CSS display outrepasse la sémantique native d'un tableau (par exemple display: grid). Dans ce cas, vous pouvez rétablir la sémantique à l'aide des rôles ARIA.
<table
role="table"
aria-label="Semantic Elements"
aria-describedby="semantic_elements_table_desc"
aria-rowcount="81">
<caption id="semantic_elements_table_desc">
Semantic Elements to use instead of ARIA's roles
</caption>
<thead role="rowgroup">
<tr role="row">
<th role="columnheader" aria-sort="none">ARIA Role</th>
<th role="columnheader" aria-sort="none">Semantic Element</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" aria-rowindex="11">
<th role="rowheader">header</th>
<td role="cell">h1</td>
</tr>
<tr role="row" aria-rowindex="16">
<th role="rowheader">header</th>
<td role="cell">h6</td>
</tr>
</tbody>
</table>
Ci‑dessus, la manière sémantique d'écrire un tableau. Les rôles ARIA ne sont nécessaires que si la sémantique native du tableau (et donc des en‑têtes de lignes) est supprimée, par exemple en appliquant la propriété display à flex ou grid.
Bénéfices supplémentaires
Aucun.
Spécifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # rowheader |
Voir aussi
- L'élément HTML
<table> - L'élément HTML
<th>d'en-tête de ligne - Tutoriel sur les tableaux HTML
- ARIA : rôle
cell - ARIA : rôle
row - ARIA : rôle
gridcell