Rôle et attributs ARIA
Rôles et attributs ARIA générés par défaut
- Rôles ARIA principaux :
- dsa-table : role=”table”
- dsa-table-head : role=”rowgroup”
- dsa-table-header-row: role=”row”
- dsa-table-header-cell: role=”columnheader”
- dsa-table-body: role=”rowgroup”
- dsa-table-row: role=”row”
- dsa-table-expanded-row: role=”row”
- dsa-table-cell: role=”cell”
- dsa-table-single-cell-row: role=”row”
- Attributs ARIA utilisés :
- aria-labelledby si un titre est visible
- aria-label si pas de titre visible
Attributs de l’élément ayant un impact sur l’accessibilité
- dsa-table-head
|
Attribut |
Impact |
|---|---|
|
loading |
Ajoute un attribut aria-busy=”true”. |
- dsa-table-header-row
|
Attribut |
Impact |
|---|---|
|
selected |
Ajoute un attribut checked à la checkbox. |
|
selection-label |
Modifie le nom accessible de la checkbox de sélection (Par défaut : “Sélectionner toutes les lignes du tableau“, ou sa traduction) |
- dsa-table-header-cell
|
Attribut |
Impact |
|---|---|
|
loading |
Ajoute un attribut aria-hidden=true”. |
|
sortable |
Ajoute un élément interactif <button> permettant de trier la colonne |
|
sort-direction |
Si l’attribut sortable est présent, ajoute un attribut aria-sort. |
- dsa-table-body
|
Attribut |
Impact |
|---|---|
|
loading |
Ajoute un attribut aria-busy=”true”. |
- dsa-table-row
|
Attribut |
Impact |
|---|---|
|
selected |
Ajoute un attribut checked à la checkbox. |
|
selection-label |
Modifie le nom accessible de la checkbox de sélection (Par défaut : “Sélectionner la ligne”, ou sa traduction). |
|
expandable |
Affiche un bouton permettant d’étendre la ligne. |
|
expanded |
Modifie le libellé du bouton entre libellé d’ouverture ou de fermeture . |
|
show-expanded-label |
Modifie le libellé d’ouverture (Par défaut : “Afficher détails”, ou sa traduction). |
|
hide-expanded-label |
Modifie le libellé d’ouverture (Par défaut : “Masquer détails”, ou sa traduction). |
- dsa-table-cell
|
Attribut |
Impact |
|---|---|
|
role |
Attribut ayant la valeur cell par défaut. Si vous voulez désigner une cellule en temps qu’en-tête de ligne, vous pouvez lui ajouter role=”rowheader” (MDN). |
|
loading |
Ajoute un attribut aria-hidden=true”. |
Bonnes pratiques et pièges à éviter
Nous recommandons donc d'éviter une utilisation excessive de cet attribut, pour faciliter la navigation au lecteur d'écran.
Si vous voulez désigner un élément dsa-table-cell comme en-tête de ligne, vous pouvez lui ajouter un attribut role="rowheader".
Référence