aria-sort

Kiedy używać

Na role="columnheader" lub role="rowheader" (albo natywnym <th> pełniącym tę rolę) w siatce lub tabeli, którą użytkownik może posortować. Atrybut informuje technologie asystujące zarówno o tym, że kolumna jest sortowalna, jak i w którym kierunku jest aktualnie posortowana — dzięki czemu użytkownik czytnika ekranu słyszy „Nazwisko, posortowane rosnąco” przed przejściem do kolumny.

Jeśli kolumna nie jest sortowalna, nie umieszczaj na niej aria-sort. Atrybut jest umową mówiącą: „możesz to zmienić”.

Działanie

Przyjmuje cztery wartości tokenowe:

• "ascending" — A→Z, 0→9, najstarsze→najnowsze.
• "descending" — Z→A, 9→0, najnowsze→najstarsze.
• "none" — sortowalna, ale aktualnie nieposortowana według tej kolumny. Jest to domyślny stan po przejściu na inną kolumnę.
• "other" — sortowalna, aktualnie posortowana według niealfabetycznej i nienumerycznej reguły, która nie mieści się w rosnąco/malejąco (np. własna ocena trafności). Rzadko stosowane w praktyce.

Tylko jeden nagłówek w tabeli powinien jednocześnie mieć wartość "ascending", "descending" lub "other". Gdy użytkownik zmienia sortowanie, ustaw nową wartość na nowej kolumnie i zresetuj poprzednią do "none" (lub usuń atrybut).

aria-sort służy wyłącznie do ogłaszania. Faktyczne sortowanie — obsługa kliknięcia, aktywacja klawiaturą, zmiana kolejności wierszy — należy do ciebie. Technologie asystujące nie sortują tabeli za ciebie.

Typowe błędy

• Aktualizowanie widocznego wskaźnika sortowania (ikona strzałki), ale zapomnienie o aktualizacji aria-sort. Użytkownicy czytników ekranu słyszą zły kierunek.
• Pozostawienie dwóch kolumn z aria-sort="ascending" po kliknięciu nowego nagłówka. Pierwsza kolumna nie steruje już sortowaniem, ale nadal to twierdzi.
• Umieszczenie aria-sort na niesortowalnej kolumnie. Technologia asystująca obiecuje zachowanie sortowania, którego użytkownik nie może wywołać.
• Używanie wartości spoza czterech dozwolonych tokenów — aria-sort="asc" jest nieprawidłowe i ignorowane.
• Zapomnienie, że nagłówek musi być aktywowany klawiaturą. aria-sort nie sprawia, że nagłówek kolumny jest dosięgalny fokusem; to twoje zadanie.
• Traktowanie aria-sort jako źródła prawdy zamiast wartości pochodnej ze stanu sortowania. Po ponownym renderowaniu, które usuwa atrybut, ogłoszenie znika.

Przykład

<table>
  <thead>
    <tr>
      <th
        scope="col"
        aria-sort="ascending"
      >
        <button type="button">Nazwisko</button>
      </th>
      <th scope="col" aria-sort="none">
        <button type="button">Imię</button>
      </th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <!-- … wiersze posortowane według nazwiska rosnąco -->
  </tbody>
</table>