aria-sort

Wanneer gebruiken

Op role="columnheader" of role="rowheader" (of een native <th> die daarvoor dient) in een grid of tabel die de gebruiker opnieuw kan sorteren. Het attribuut geeft hulptechnologie zowel door dat de kolom sorteerbaar is als in welke richting momenteel gesorteerd wordt, zodat een schermlezergebruiker “Achternaam, gesorteerd oplopend” hoort voordat de kolom wordt gelezen.

Als de kolom niet sorteerbaar is, gebruik aria-sort er niet op. Het attribuut is het contract dat zegt: “u kunt dit wijzigen”.

Hoe het werkt

Accepteert vier tokenwaarden:

• "ascending" — A→Z, 0→9, oudste→nieuwste.
• "descending" — Z→A, 9→0, nieuwste→oudste.
• "none" — sorteerbaar, maar momenteel niet gesorteerd op deze kolom. Dit is de standaard­toestand zodra een andere kolom het sorteren overneemt.
• "other" — sorteerbaar, momenteel gesorteerd op een niet-alfabetische, niet-numerieke regel die niet past bij oplopend/aflopend (een aangepaste relevantiepuntenscore, bijvoorbeeld). In de praktijk zeldzaam.

Slechts één kopregel per tabel mag tegelijk "ascending", "descending" of "other" dragen. Wanneer de gebruiker de sortering wijzigt, stelt u de nieuwe kolom in op de nieuwe waarde en reset u de vorige kolom naar "none" (of verwijdert u het attribuut).

aria-sort is puur een aankondiging. Het daadwerkelijke sorteergedrag — klikhandler, toetsenbordactivering, het opnieuw ordenen van rijen — is de verantwoordelijkheid van de ontwikkelaar. Hulptechnologie sorteert de tabel niet voor u.

Veelvoorkomende fouten

• De zichtbare sorterindicator (pijlpictogram) bijwerken maar vergeten aria-sort bij te werken. Schermlezergebruikers horen de verkeerde richting.
• Twee kolommen met aria-sort="ascending" laten staan na het klikken op een nieuwe kopregel. De eerste kolom stuurt de sortering niet meer maar claimt dat nog steeds.
• aria-sort op een niet-sorteerbare kolom plaatsen. Hulptechnologie belooft sorteergedrag dat de gebruiker niet kan activeren.
• Een waarde buiten de vier toegestane tokens gebruiken — aria-sort="asc" is ongeldig en wordt genegeerd.
• Vergeten dat de kopregel via het toetsenbord activeerbaar moet zijn. aria-sort maakt de kopregel niet focusbaar; dat is de taak van de ontwikkelaar.
• aria-sort behandelen als de bron van waarheid in plaats van als afgeleid van de sorteerstatus. Na een herrender waarbij het attribuut verdwijnt, verdwijnt ook de aankondiging.

Voorbeeld

<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>
    <!-- … rijen gesorteerd op achternaam oplopend -->
  </tbody>
</table>