ARIA : attribut aria-sort

Description

Si une grille ou un tableau propose une fonctionnalité de tri, l'attribut aria-sort doit être défini sur ascending, descending ou other sur la cellule d'en-tête de la colonne ou de la ligne triée.

L'attribut aria-sort n'est défini que sur la colonne ou la ligne actuellement triée. Utilisez aria-sort="ascending" pour indiquer que les cellules de la colonne ou de la ligne sont triées par ordre croissant. Si l'ordre de tri est inversé, passez la valeur à aria-sort="descending". Quand une autre colonne ou ligne devient triée, l'attribut aria-sort unique est déplacé vers la cellule d'en-tête correspondante avec la valeur appropriée.

L'attribut aria-sort ne doit être ajouté qu'à un seul en-tête de tableau ou de grille à la fois. Il sert à informer les utilisateur·ice·s de technologies d'assistance de la colonne ou de la ligne triée. Il n'a aucun impact sur l'ordre réel du tri.

Exemple

Ce tableau se charge avec la colonne « Nom » triée par ordre croissant.

<table>
  <caption>
    Membres du comité de pilotage
  </caption>
  <thead>
    <tr>
      <th>
        <button>Prénom</button>
      </th>
      <th aria-sort="ascending">
        <button>Nom</button>
      </th>
      <th>
        <button>Entreprise</button>
      </th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    …
  </tbody>
</table>

Si un·e utilisateur·ice clique sur le bouton Nom, aria-pressed="true" serait ajouté à l'élément HTML <button> et la valeur de aria-sort serait basculée sur "descending" avec JavaScript. Si l'utilisateur·ice clique sur un autre bouton d'en-tête, aria-sort serait retiré de l'en-tête Nom pour être placé sur le parent <th> du bouton cliqué.

Nous avons ajouté des instructions dans la légende pour les technologies d'assistance qui ne voient pas les flèches descendantes ajoutées avec le CSS ciblant les sélecteurs th[aria-sort="ascending"] et th[aria-sort="descending"].

Valeurs

ascending

Les éléments sont triés par ordre croissant selon cette colonne.

descending

Les éléments sont triés par ordre décroissant selon cette colonne.

none (valeur par défaut)

Aucun tri n'est appliqué à la colonne.

other

Un algorithme de tri autre que croissant ou décroissant a été appliqué.

Interfaces associées

Element.ariaSort

La propriété ariaSort, qui fait partie de l'interface Element, reflète la valeur de l'attribut aria-sort.

ElementInternals.ariaSort

La propriété ariaSort, qui fait partie de l'interface ElementInternals, reflète la valeur de l'attribut aria-sort.

Rôles associés

Utilisé dans les rôles :

• columnheader
• rowheader

Spécifications

Voir aussi

• Exemple de tableau triable ^(angl.) - Guide de rédaction ARIA (APG)
• L'attribut ARIA aria-pressed
• L'élément HTML <th>