ARIA : rôle table
Le rôle table
identifie l'élément comme une structure de tableau non interactive contenant des données organisées en lignes et colonnes, similaire à l'élément HTML natif <table>
.
<div
role="table"
aria-label="Semantic Elements"
aria-describedby="semantic_elements_table_desc"
aria-rowcount="81">
<div id="semantic_elements_table_desc">
Les é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="cell">en-tête</span>
<span role="cell">h1</span>
</div>
<div role="row" aria-rowindex="16">
<span role="cell">en-tête</span>
<span role="cell">h6</span>
</div>
<div role="row" aria-rowindex="18">
<span role="cell">groupe de lignes</span>
<span role="cell">thead</span>
</div>
<div role="row" aria-rowindex="24">
<span role="cell">terme</span>
<span role="cell">dt</span>
</div>
</div>
</div>
Description
Un élément avec role="table"
est une structure tabulaire statique avec des lignes contenant des cellules. Les cellules ne sont ni sélectionnables ni focalisables, bien que des widgets à l'intérieur de chaque cellule puissent être interactifs. Il est fortement recommandé d'utiliser l'élément HTML natif <table>
chaque fois que possible.
Attention :
Si un tableau gère un état de sélection, propose une navigation bidimensionnelle ou permet à l'utilisateur·ice de réorganiser l'ordre des cellules, utilisez plutôt grid
ou treegrid
.
Pour créer un tableau ARIA, ajoutez role="table"
à l'élément conteneur. À l'intérieur de ce conteneur, chaque ligne possède le rôle row
et contient des cellules enfants. Chaque cellule a le rôle columnheader
, rowheader
ou cell
. Les lignes peuvent être enfants du tableau ou d'un rowgroup
.
La légende du tableau peut être définie via aria-labelledby
ou aria-label
. Tous les autres éléments sémantiques de tableau, comme <tbody>
, <thead>
, <tr>
, <th>
et <td>
, doivent être ajoutés via les rôles associés : rowgroup
, row
, columnheader
et cell
.
Si le tableau contient des colonnes ou des lignes triables, l'attribut aria-sort
doit être ajouté sur la cellule d'en-tête (et non sur le tableau lui-même). Si des lignes ou colonnes sont masquées, il faut inclure aria-colcount
ou aria-rowcount
pour indiquer le nombre total de colonnes ou de lignes, ainsi que aria-colindex
ou aria-rowindex
sur chaque cellule. aria-colindex
ou aria-rowindex
est défini sur la position de la cellule dans la ligne ou la colonne. Si le tableau inclut des cellules qui s'étendent sur plusieurs lignes ou colonnes, il faut aussi inclure aria-rowspan
ou aria-colspan
. Il est bien plus simple d'utiliser l'élément <table>
avec tous les éléments et attributs sémantiques associés, qui sont pris en charge par toutes les technologies d'assistance.
Pour créer un widget interactif à structure tabulaire, utilisez plutôt le modèle grid
. Si l'interaction permet la sélection individuelle des cellules, la navigation de gauche à droite et de haut en bas, ou si l'interface permet de réorganiser l'ordre des cellules (par glisser-déposer, etc.), utilisez grid
ou treegrid
.
Note : Il est fortement recommandé d'utiliser l'élément HTML natif table chaque fois que possible.
Propriétés, états et rôles WAI-ARIA associés
role="rowgroup"
-
Enfant optionnel du tableau, le groupe de lignes encapsule un groupe de lignes, similaire à
<thead>
,<tbody>
et<tfoot>
. role="row"
-
Une ligne dans le tableau, et éventuellement dans un rowgroup, qui contient une ou plusieurs cellules, en-têtes de colonne ou en-têtes de ligne.
- l'attribut
aria-describedby
-
Prend comme valeur l'id de l'élément qui sert de description au tableau.
- l'attribut
aria-label
-
Fournit un nom accessible au tableau.
- l'attribut
aria-colcount
-
Cet attribut n'est requis que si les colonnes ne sont pas toujours présentes dans le DOM. Il indique explicitement le nombre de colonnes du tableau complet. Définissez la valeur sur le nombre total de colonnes du tableau. Si inconnu, utilisez
aria-colcount="-1"
. - l'attribut
aria-rowcount
-
Cet attribut n'est requis que si les lignes ne sont pas toujours présentes dans le DOM, comme dans les tableaux défilants qui réutilisent les lignes pour minimiser le nombre de nœuds DOM. Il indique explicitement le nombre de lignes du tableau complet. Définissez la valeur sur le nombre total de lignes du tableau. Si inconnu, utilisez
aria-rowcount="-1"
.
Interactions au clavier
Aucune.
Fonctionnalités JavaScript requises
Aucune. Pour les colonnes triables, voir le rôle ARIA columnheader.
Note :
La première règle d'utilisation d'ARIA est : si vous pouvez utiliser une fonctionnalité native avec la sémantique et le comportement requis déjà intégrés, au lieu de détourner un élément et d'ajouter un rôle, un état ou une propriété ARIA pour le rendre accessible, faites-le. Utilisez l'élément HTML <table>
plutôt que le rôle ARIA table chaque fois que possible.
Exemples
<div
role="table"
aria-label="Éléments sémantiques"
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="cell">en-tête</span>
<span role="cell">h1</span>
</div>
<div role="row" aria-rowindex="16">
<span role="cell">en-tête</span>
<span role="cell">h6</span>
</div>
<div role="row" aria-rowindex="18">
<span role="cell">groupe de lignes</span>
<span role="cell">thead</span>
</div>
<div role="row" aria-rowindex="24">
<span role="cell">terme</span>
<span role="cell">dt</span>
</div>
</div>
</div>
Ce qui précède est un extrait d'un tableau. Bien que le tableau complet comporte 81 entrées, comme indiqué par la propriété aria-rowcount
, seules quatre sont actuellement visibles. Les colonnes sont triables, mais ne sont pas triées actuellement, comme indiqué par la propriété aria-sort
sur les en-têtes de colonne.
Bonnes pratiques
Utilisez uniquement <table>
, <tbody>
, <thead>
, <tr>
, <th>
, <td>
, etc., pour la structure des tableaux de données. Vous pouvez ajouter ces rôles ARIA pour garantir l'accessibilité si la sémantique native du tableau est supprimée, par exemple avec du CSS. Un cas d'usage pertinent du rôle ARIA table est lorsque la propriété CSS display remplace la sémantique native d'un tableau, comme avec display: grid
. Dans ce cas, vous pouvez utiliser les rôles ARIA table pour rétablir la sémantique.
Spécifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA)> # table> |
Unknown specification> |