aria-sort

Quando usarlo

Su role="columnheader" o role="rowheader" (o un <th> nativo che svolge tale funzione) in una griglia o tabella che l’utente può riordinare. L’attributo comunica alla tecnologia assistiva sia che la colonna è ordinabile sia in quale direzione è attualmente ordinata: uno screen reader leggerà «Cognome, ordinamento crescente» prima di scorrere la colonna.

Se la colonna non è ordinabile, non inserire aria-sort. La presenza dell’attributo costituisce il contratto che dichiara «è possibile modificare questo ordinamento».

Comportamento

Accetta quattro valori token:

• "ascending" — A→Z, 0→9, dal più vecchio al più recente.
• "descending" — Z→A, 9→0, dal più recente al più vecchio.
• "none" — ordinabile, ma non attualmente ordinato in base a questa colonna. Questo è lo stato predefinito dopo che un’altra colonna prende il controllo.
• "other" — ordinabile, attualmente ordinato secondo una regola non alfabetica e non numerica che non rientra in crescente/decrescente (ad esempio, un punteggio di rilevanza personalizzato). Raro nella pratica.

Solo un’ intestazione per tabella dovrebbe portare "ascending", "descending" o "other" alla volta. Quando l’utente cambia l’ordinamento, è necessario impostare il nuovo valore sulla nuova colonna e reimpostare la colonna precedente a "none" (o rimuovere l’attributo).

aria-sort è un’annotazione puramente dichiarativa. Il comportamento di ordinamento effettivo — gestore del clic, attivazione da tastiera, riordinamento delle righe — è a carico dello sviluppatore. La tecnologia assistiva non ordina la tabella autonomamente.

Errori comuni

• Aggiornare l’indicatore di ordinamento visivo (icona freccia) dimenticando di aggiornare aria-sort. Gli utenti di screen reader sentono la direzione errata.
• Lasciare due colonne con aria-sort="ascending" dopo aver cliccato su una nuova intestazione. La prima colonna non sta più guidando l’ordinamento ma continua a dichiararlo.
• Inserire aria-sort su una colonna non ordinabile. La tecnologia assistiva promette un comportamento di ordinamento che l’utente non può effettivamente attivare.
• Utilizzare un valore al di fuori dei quattro token consentiti — aria-sort="asc" non è valido e viene ignorato.
• Dimenticare che l’intestazione deve essere attivabile da tastiera. aria-sort non rende l’intestazione di colonna focalizzabile; questo rimane a carico dello sviluppatore.
• Trattare aria-sort come fonte di verità anziché come valore derivato dallo stato di ordinamento. Se un re-render perde l’attributo, l’annuncio scompare.

Esempio

<table>
  <thead>
    <tr>
      <th
        scope="col"
        aria-sort="ascending"
      >
        <button type="button">Cognome</button>
      </th>
      <th scope="col" aria-sort="none">
        <button type="button">Nome</button>
      </th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <!-- … righe ordinate per Cognome in ordine crescente -->
  </tbody>
</table>