aria-sort

Quand l’utiliser

Sur role="columnheader" ou role="rowheader" (ou un <th> natif en faisant office) dans une grille ou un tableau que l’utilisateur peut re-trier. L’attribut indique aux technologies d’assistance à la fois que la colonne est triable et dans quel sens elle est actuellement triée, de sorte qu’un utilisateur de lecteur d’écran entende « Nom, trié par ordre croissant » avant de lire la colonne.

Si la colonne n’est pas triable, n’ajoutez pas aria-sort. L’attribut constitue le contrat qui indique « vous pouvez modifier ceci ».

Comportement

Accepte quatre valeurs textuelles :

• "ascending" — A→Z, 0→9, du plus ancien au plus récent.
• "descending" — Z→A, 9→0, du plus récent au plus ancien.
• "none" — triable, mais pas actuellement trié selon cette colonne. C’est l’état par défaut une fois qu’une autre colonne prend le relais.
• "other" — triable, actuellement trié selon une règle non alphabétique et non numérique qui ne correspond pas à croissant/décroissant (un score de pertinence personnalisé, par exemple). Rare en pratique.

Un seul en-tête par tableau doit porter "ascending", "descending" ou "other" à la fois. Lorsque l’utilisateur change le tri, définissez la nouvelle valeur sur la nouvelle colonne et réinitialisez la précédente à "none" (ou supprimez l’attribut).

aria-sort est purement une annonce. Le comportement de tri réel — gestionnaire de clic, activation clavier, réordonnancement des lignes — est de votre responsabilité. Les technologies d’assistance ne trient pas le tableau à votre place.

Erreurs courantes

• Mettre à jour l’indicateur de tri visuel (icône flèche) sans mettre à jour aria-sort. Les utilisateurs de lecteurs d’écran entendent le mauvais sens.
• Laisser deux colonnes avec aria-sort="ascending" après avoir cliqué sur un nouvel en-tête. La première colonne ne pilote plus le tri mais continue à le prétendre.
• Placer aria-sort sur une colonne non triable. Les technologies d’assistance promettent un comportement de tri que l’utilisateur ne peut pas déclencher.
• Utiliser une valeur hors des quatre valeurs autorisées — aria-sort="asc" est invalide et ignoré.
• Oublier que l’en-tête doit être activable au clavier. aria-sort ne rend pas l’en-tête de colonne focalisable ; c’est votre responsabilité.
• Traiter aria-sort comme source de vérité au lieu de le dériver de l’état du tri. Après un re-rendu qui perd l’attribut, l’annonce disparaît.

Exemple

<table>
  <thead>
    <tr>
      <th
        scope="col"
        aria-sort="ascending"
      >
        <button type="button">Last name</button>
      </th>
      <th scope="col" aria-sort="none">
        <button type="button">First name</button>
      </th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <!-- … rows sorted by Last name ascending -->
  </tbody>
</table>