aria-sort 属性によるソート中のテーブルのマークアップ

Tech
Share

表による一覧画面を実装する最中に思いついた小ネタを載せておく。aria-sort 属性を使ってテーブルのヘッダーをマークアップする。

aria-sort

aria-sort とはテーブルやグリッドの項目のソート順を示す ARIA 属性で、columnheader および rowheader ロールで使用される。

列スコープの（列のヘッダーと識別された） th 要素は columnheader となるので、この th 要素の場所に aria-sort を使うとこのようになる。ここでは、左から 2 番目の列が昇順であることを意味している。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table>
  <thead>
    <tr>
      <th>名前</th>
      <th aria-sort="ascending">番号</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>ほげ太郎</td>
      <td>123</td>
    </tr>
    <tr>
      <td>ふが花子</td>
      <td>456</td>
    </tr>
  </tbody>
</table>
名前 番号
ほげ太郎 123
ふが花子 456

スタイル

ここで、 Web アプリケーションを実装しているとして、昇順・降順に指定している列のヘッダーを強調表示したり、どちらの並び順で表示しているかを表したい状況を考える。このとき、CSS の属性セレクタを [aria-sort="ascending"] のように使うと、簡易的なものなら以下のように書ける。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
th[aria-sort="ascending"] {
  background: lightgray;
  font-weight: bold;

  &::after {
    content: "(↑)";
  }
}

th[aria-sort="descending"] {
  background: lightgray;
  font-weight: bold;
  
  &::after {
    content: "(↓)";
  }
}

// other もあれば

今のところは細かい部分や「派手」な効果（例えば列全体への装飾や独立したオブジェクト）は難しいかもしれないが、:has() 等が使えるようになったらもっと柔軟になり、aria-sort 属性だけでいろいろ書けるようになるかもしれない。