ARIA : rôle columnheader
Le rôle columnheader
identifie un élément comme étant une cellule dans une ligne contenant des informations d'en-tête pour une colonne, similaire à l'élément HTML natif <th>
avec une portée de colonne.
Description
Un élément avec role="columnheader"
imbriqué en tant que descendant d'un élément avec role="row"
est une structure tabulaire statique d'une cellule d'en-tête de colonne dans un conteneur tabulaire, soit un tableau, une grille ou un autre graphique qui doit montrer des relations de données. Pour être pris en charge, le columnheader doit être imbriqué dans un élément avec le rôle row
.
Rôles, états et propriétés WAI-ARIA associés
Tous les en-têtes de colonne doivent être imbriqués dans une ligne. Chaque ligne, à son tour, doit être imbriquée dans une grille, un tableau ou l'arbre d'une grille, alternativement dans un groupe de lignes imbriqué dans l'un des éléments ci-dessus.
aria-sort
-
Appliqué uniquement à un en-tête de colonne à la fois, le
aria-sort
indique si une colonne est triée dans l'un des trois ordresascending
oudescending
, ounone
si elle n'est pas triée.
Interactions au clavier
Ce rôle ne prend pas en charge d'interaction spécifique au clavier.
Fonctionnalités JavaScript requises
JavaScript est uniquement requis si l'attribut aria-sort
est utilisé.
Exemples
<table>
<thead>
<tr role="row">
<th role="columnheader" scope="col">
<button>Prénom</button>
</th>
<th role="columnheader" scope="col">
<button>Nom</button>
</th>
<th role="columnheader" scope="col" aria-sort="ascending">
<button>Nom de l'entreprise</button>
</th>
<th role="columnheader" scope="col">
<button>Intitulé du poste</button>
</th>
</tr>
</thead>
<tbody>
…
</tbody>
</table>
Bonnes pratiques
Les en-têtes de colonne doivent contenir un titre ou des informations d'en-tête pour la colonne.
La première règle de l'ARIA est la suivante : si un élément ou un attribut HTML natif a la sémantique et le comportement requis, utilisez-le au lieu de réutiliser un élément et d'ajouter un rôle, un état ou une propriété ARIA pour le rendre accessible. Il est recommandé d'utiliser l'élément HTML natif <th>
avec l'attribut scope
défini sur <th scope="col">
au lieu d'un <div>
ou d'un autre élément. Si vous utilisez le <th scope="col">
de HTML sémantique, l'attribut de rôle n'est pas requis, mais peut être inclus en tant que sauvegarde pour garantir que le tableau conserve sa sémantique si la sémantique par défaut est supprimée avec une valeur de propriété d'affichage CSS.
L'attribut aria-sort
peut être ajouté à un <th scope="col">
même lorsque l'attribut de rôle ARIA n'est pas spécifié.
Préférer HTML
Le rôle de columnheader a la même sémantique que <th scope="col">
.
Spécifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA)> # columnheader> |
Unknown specification> |
Voir aussi
- ARIA : rôle
table
- ARIA : rôle
grid
- ARIA : rôle
treegrid
- ARIA : rôle
row
- ARIA : rôle
rowgroup
- L'élément HTML
<th>
- L'élément HTML
<table>
- L'élément HTML
<tr>
- L'élément HTML
<td>