aria-sort

När ska du använda det

På role="columnheader" eller role="rowheader" (eller ett inbyggt <th> som fungerar som ett sådant) i ett rutnät eller en tabell som användaren kan sortera om. Attributet talar om för hjälpmedelstek­niken både att kolumnen går att sortera och åt vilket håll den för tillfället är sorterad, så att en skärmläsaranvändare hör “Efternamn, sorterat stigande” innan hen läser ned kolumnen.

Om kolumnen inte är sorterbar, lägg inte aria-sort på den. Attributet är kontraktet som säger “du kan ändra detta”.

Hur det beter sig

Accepterar fyra tokenvärden:

• "ascending" — A→Ö, 0→9, äldst→nyast.
• "descending" — Ö→A, 9→0, nyast→äldst.
• "none" — sorterbar, men inte för tillfället sorterad efter denna kolumn. Det är standardläget när en annan kolumn tar över.
• "other" — sorterbar, för tillfället sorterad enligt en icke-alfabetisk, icke-numerisk regel som inte passar stigande/fallande (t.ex. ett anpassat relevanspoäng). Ovanligt i praktiken.

Endast ett huvud per tabell bör ha "ascending", "descending" eller "other" åt gången. När användaren ändrar sorteringen, sätt den nya kolumnen till sitt nya värde och återställ den tidigare kolumnen till "none" (eller ta bort attributet).

aria-sort är enbart ett tillkännagivande. Det faktiska sorteringsbeteendet — klickhanterare, tangentbordsaktivering, radomsortering — är ditt ansvar. Hjälpmedelstek­niken sorterar inte tabellen åt dig.

Vanliga fel

• Den synliga sorteringsindikatorn (pilikon) uppdateras men aria-sort glöms bort. Skärmläsaranvändare hör fel riktning.
• Två kolumner har aria-sort="ascending" efter att ett nytt huvud klickats. Den första kolumnen driver inte längre sorteringen men påstår sig fortfarande göra det.
• aria-sort placeras på en kolumn som inte kan sorteras. Hjälpmedelstek­niken utlovar ett sorteringsbeteende som användaren faktiskt inte kan utlösa.
• Ett värde utanför de fyra tillåtna tokenerna används — aria-sort="asc" är ogiltigt och ignoreras.
• Glömmer att kolumnhuvudet måste vara aktiverbart via tangentbord. aria-sort gör inte kolumnhuvudet fokuserbart — det är ditt ansvar.
• aria-sort behandlas som sanningskälla i stället för att härledas från ditt sorteringstillstånd. Efter en omrendering som förlorar attributet försvinner tillkännagivandet.

Exempel

<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>