aria-sort

Hvornår bruges det

På role="columnheader" eller role="rowheader" (eller et native <th>, der fungerer som sådan) i et gitter eller en tabel, som brugeren kan sortere. Attributten fortæller hjælpeteknologi både, at kolonnen kan sorteres, og i hvilken retning den aktuelt er sorteret — så en skærmlæserbruger hører “Efternavn, sorteret stigende” inden de læser ned ad kolonnen.

Hvis kolonnen ikke kan sorteres, må du ikke sætte aria-sort på den. Attributten er kontrakten, der siger “du kan ændre dette”.

Adfærd

Accepterer fire tokenværdier:

• "ascending" — A→Z, 0→9, ældste→nyeste.
• "descending" — Z→A, 9→0, nyeste→ældste.
• "none" — sortérbar, men ikke aktuelt sorteret efter denne kolonne. Det er standardtilstanden, når en anden kolonne overtager.
• "other" — sortérbar, aktuelt sorteret efter en ikke-alfabetisk, ikke-numerisk regel, der ikke passer til ascending/descending (f.eks. en brugerdefineret relevancescore). Sjælden i praksis.

Kun én overskrift per tabel bør have "ascending", "descending" eller "other" ad gangen. Når brugeren ændrer sorteringen, sættes den nye kolonne til sin nye værdi, og den forrige kolonne nulstilles til "none" (eller attributten fjernes).

aria-sort er udelukkende en annoncering. Den faktiske sorteringsadfærd — klikhåndtering, tastaturaktivering, genordning af rækker — er dit ansvar. Hjælpeteknologi sorterer ikke tabellen for dig.

Typiske fejl

• Opdatering af den synlige sorteringsindikator (pilikonet) men glemmer at opdatere aria-sort. Skærmlæserbrugere hører den forkerte retning.
• To kolonner efterlades med aria-sort="ascending" efter klik på en ny overskrift. Den første kolonne driver ikke længere sorteringen, men hævder stadig at gøre det.
• Placering af aria-sort på en kolonne, der ikke kan sorteres. Hjælpeteknologi lover sorteringsadfærd, brugeren faktisk ikke kan udløse.
• Brug af en værdi uden for de fire tilladte tokens — aria-sort="asc" er ugyldig og ignoreres.
• Glemmer at overskriften skal kunne aktiveres med tastatur. aria-sort gør ikke kolonneoverskriften fokuserbar; det er dit ansvar.
• Behandling af aria-sort som sandhedskilde i stedet for at derive den fra din sorteringstilstand. Efter en genrendering, der mister attributten, forsvinder annonceringen.

Eksempel

<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>
    <!-- … rækker sorteret efter efternavn stigende -->
  </tbody>
</table>