このワイヤーの特徴
読み手が、自分の見たい順に並べられる
新しい資料を探す人もいれば、短い資料から読みたい人もいます。列の見出しを押すだけで、その列の順に並び替えられるようにしています。
押せる場所が、見出しそのものだと分かる
見出しの文字だけに押せる範囲があると、押せることに気づかれにくくなります。見出しの幅いっぱいにボタンを置き、矢印の形で並び替えられることを示しています。
いまの並び順が、3つの方法で伝わる
矢印の向きだけでは、昇順と降順を取り違えることがあります。見出しの矢印と背景に加えて、aria-sort と表の見出し（caption）の文字でも、いまの並び順を示しています。
並び替えたことを、読み上げでも知らせる
行が入れ替わっても、読み上げを使う人には変化が伝わりません。並び替えたあとに「ページ数の多い順に並び替えました」と読み上げで知らせています。
数字と日付が、正しい順に並ぶ
数字を左寄せにしたり、日付の書き方がばらばらだったりすると、正しく並ばず、見た目でも比べにくくなります。数字の列は右寄せにし、日付は同じ書式で書いたうえで、並び替え用の値を持たせています。
制作時のよくある失敗
見出しの文字だけが押せて、押せると分からない
小さな文字だけが押せる作りでは、押せることにも気づかれず、押しにくくもなります。
見出しの幅いっぱいをボタンにし、矢印で並び替えられることを示します。
日付の書式がばらばらで、正しく並ばない
「2026年9月」と「9/10」が混ざると、文字として並べたときに順番が崩れます。
書式をそろえ、並び替え用の値を別に持ちます。
並び替えるたびに、ページを読み込み直す
読み込み直してスクロール位置が先頭に戻ると、読み手は表を探し直すことになります。
並び替えはページの中で行い、位置を保ちます。
並び順を、矢印の向きだけで示す
矢印だけでは、昇順・降順を取り違えたり、読み上げで伝わらなかったりします。
aria-sort と文字でも示します。
よくある質問
最初は、どの順番で並べておけばよいですか?
読み手がいちばんよく使う順番にしておくのが分かりやすいと考えられます。
資料やお知らせの一覧なら、新しい順にすることが多いです。
最初の並び順は、表の見出しに書いておきます。
並び替えと絞り込みは、両方必要ですか?
行が多く、読み手が条件で探すなら、絞り込みを加えると探しやすくなります。
行が数十件までで、並べる順を変えれば見つけられるなら、並び替えだけでも足りることがあります。
行が多い場合は、ページを分けたほうがよいですか?
ページを分けると、並び替えがそのページの中だけか、全件が対象かが分かりにくくなります。
分ける場合は、並び替えが全件に対して行われるように作り、そのことを示します。
