トピックを検索
並べ替えの状態が矢印でしか分からない表
列の見出しを押すと行が並べ替わって矢印も移るが、並べ替えられることも、どの列をどの向きで並べているかもコードに書かれていないため、スクリーンリーダーにはただの見出しとしか聞こえない
<svg class="arrow" aria-hidden="true"> 問題
スクリーンリーダー利用者には、表がどの列でどの向きに並んでいるのかが分からず、見出しで並べ替えられること自体も伝わらない
ネットショップのアカウントページで、注文履歴を表で一覧にしています。列は「注文」「日付」「合計」「状況」の四つです。表は日付の新しい順に並んだ状態で開き、「日付」の横に下向きの小さな矢印があります。「合計」を押すと金額の高い順に並べ替わり、矢印が「合計」の横へ移ります。もう一度押すと順番が逆になります。目で見る人には、矢印だけで十分に伝わります。
スクリーンリーダー利用者が見出しを順に移動すると、「日付」も「合計」も同じように読まれます。日付順に並んでいることも、新しい注文が先頭にあることも伝わらず、「合計」を押しても、並び順が変わったことや今どちらの向きなのかは聞こえません。よくある作り方の一つでは、見出しのセルそのものがクリックを受け付けます。この場合は普通の列見出しとして読まれるため、押せることさえ伝わりません。
WCAG 4.1.2「名前（name）・役割（role）及び値（value）」は、ページ上のすべてのコントロールについて、支援技術が名前と役割を読み取れること、状態も読み取れることを求めています。並べ替えのできる見出しは、どの向きに並べているかという状態を持つコントロールです。この例では、その状態が目にしか伝わりません。矢印は、アイコンのライブラリーでよくあるように aria-hidden="true" を付けて描いたアイコンです。矢印を表示したり向きを変えたりする sorted-desc や sorted-asc のクラスは、ブラウザーにとって何の意味もありません。ARIAにはまさにこの状態のための aria-sort 属性があり、行を並べている列の見出しに付けます。どちらの作り方でも、この属性が付いていません。
sorttable.js のように見出しのセルそのもの、または TanStack Table の並べ替えの例のようにその中の div がクリックを受け付ける場合は、コントロールの役割もありません。見出しのセルはボタンではないため、スクリーンリーダーは見出しとして読み、何かができる要素だとは伝えません。これは、アクセシビリティAPIを使わないカスタムコントロールの失敗例F15にあたります。クリックの処理はどの要素にも付けられ、描いた矢印を状態と結び付ける仕組みはHTMLにないため、ブラウザーはこの作りをそのまま受け入れてしまいます。
コントロールの名前には注意点があります。見出しの文字は列の名前で、その列のすべてのセルと一緒に読まれるため、「並べ替え」という言葉まで入れることはできません。ARIA Authoring Practicesの例では、代わりに表のキャプションで一度だけ「ボタンのある列見出しで並べ替えられます」と伝えています。
長い表を並べ替えるのは、金額の大きい注文、支払いの済んでいない一番古い請求書、一番早く届く商品など、探しているものを見つけるためです。並び順が伝わらなくても、スクリーンリーダー利用者は並べ替えること自体はできます。ただ、何が起きたのかを知るには、何行か読んで比べる必要があります。
10グループ中1グループに影響
- 全盲 （影響あり）
- 弱視 （影響なし）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響なし）
- 筋力・可動域 （影響なし）
- 認知 （影響なし）
- 光過敏 （影響なし）
- 視覚を使わない 見出しを順に移動しても、スクリーンリーダーは「日付」も「合計」も同じように読むため、新しい注文が上にあることも、「合計」を押して金額の大きい注文が先頭に来たことも分かりません。確かめるには何行か読んで比べる必要があり、押すたびにそれを繰り返すことになります。
axe も ANDI も並べ替えの状態は確かめないため、矢印のアイコンだけの見出しも、aria-sort のないボタンの見出しも合格になります。並べ替えの印が画像だけなら、どの列で並べているかはコードから分かりません。sorted-desc、sorting_asc、sorttable_sorted のようにクラスが状態を表している場合は、表のどの見出しにも aria-sort がなければ、この診断は問題として報告します。見出しで並べ替えられそうな表には、スクリーンリーダーで押して確かめる確認候補も出します。onclick 属性でクリックを受け付けるのにTabキーでは届かない見出しは、キーボードで到達できないコントロールとして報告します。sorttable.js のようにスクリプトからクリックの処理を付けた見出しは、この確認候補で人が確かめます。TanStack Table の並べ替えの例や shadcn/ui のデータ表など、よく使われるライブラリーの例は、矢印を描くだけで aria-sort を付けていません。こうした例に倣うAIのコード生成も、同じものを書くことがあります。
試してみる
注文を合計で並べ替えて、並び順が読み上げで分かるか確かめてみましょう
問題1： 「合計」をクリックします。行が並べ替わり、矢印が移ります。次にTabキーを押してみてください。見出しには届きません。クリックした見出しをスクリーンリーダーがどう読むかは、下の欄に出ます。
問題2： Tabキーで「日付」と「合計」へ移動し、「合計」でEnterキーを押します。下の欄に読み上げが出ます。並び順は分かりますか？
修正を適用します。 Tabキーで「日付」へ移動し、「合計」でEnterキーを2回押します。行がどちらの向きに並んでいるか、下の欄で分かりますか？
問題あり 修正できますか？
| 注文 | 日付 | 合計 | 状況 |
|---|---|---|---|
| #1071 | 2026/10/22 | $9.90 | 処理中 |
| #1063 | 2026/10/18 | $142.00 | 発送済み |
| #1057 | 2026/10/12 | $24.50 | 配達済み |
| #1042 | 2026/10/03 | $86.00 | 配達済み |
スクリーンリーダーの読み上げ：
（並べ替えのできる見出しをクリック）
修正方法
見出しをボタンにし、並び順を aria-sort で伝える
見出しのセルがクリックを受け付ける
<table class="orders"> <caption>Your orders</caption> <thead> <tr> <th scope="col">Order</th> <th scope="col" class="sorted-desc" data-key="date"> Date <svg class="arrow" aria-hidden="true">…</svg> </th> <th scope="col" data-key="total"> Total <svg class="arrow" aria-hidden="true">…</svg> </th> <th scope="col">Status</th> </tr> </thead> <tbody> <tr> <td>#1071</td> <td>22 Oct 2026</td> <td>$9.90</td> <td>Processing</td> </tr> … </tbody></table>問題点3点
- 「Date」と「Total」の見出しはセル自体がクリックを受け付けるため、ボタンではなく列見出しとして読まれ、押せることが伝わらない。Tabキーで届かないことは別の問題で、Tabキーで到達できないdivのボタンで扱う。
- 矢印はスクリーンリーダーから隠したアイコンで、ブラウザーが何も知らないクラスで表示や向きを切り替えているため、並べ替えは目にしか伝わらない。
aria-sortの付いた見出しがないため、並べている列も向きも読まれない。
<table class="orders"> <caption> Your orders <span class="visually-hidden">, column headers with buttons are sortable</span> </caption> <thead> <tr> <th scope="col">Order</th> <th scope="col" aria-sort="descending"> <button type="button" data-key="date"> Date <svg class="arrow" aria-hidden="true">…</svg> </button> </th> <th scope="col"> <button type="button" data-key="total"> Total <svg class="arrow" aria-hidden="true">…</svg> </button> </th> <th scope="col">Status</th> </tr> </thead> <tbody> <tr> <td>#1071</td> <td>22 Oct 2026</td> <td>$9.90</td> <td>Processing</td> </tr> … </tbody></table>修正の手順4ステップ
- 並べ替えのできる見出しの文字を、列の名前だけを名前にした
buttonに入れる。Tabキーで届き、EnterキーやSpaceキーで押せて、「Date、ボタン」と読まれる。 - ページを開いた時点で「Date」の見出しに
aria-sort="descending"を付け、押すたびに付け替える。すべての見出しから外してから、押された見出しに ascending か descending を付ける。スクリーンリーダーは見出しと一緒に、その列で並べていることと向きを読み上げる。 - 矢印はクラスではなく
aria-sortから描き、見た目と読み上げが食い違わないようにする。アイコンのaria-hiddenはそのまま残し、ボタンの名前に何も加えないようにする。 - キャプションに、見えないように隠した補足
, column headers with buttons are sortableを加える。見出しごとに言葉を足さなくても、表全体で一度、見出しで並べ替えられることが伝わる。
これで二つの修正前の例はどちらも直り、4.1.2を満たします。「Order」と「Status」にはボタンがないため、aria-sort も付けません。
この方法を選ぶ理由：クラスではなく状態から見た目を決める
見出しの名前に「並べ替え」を入れない。 見出しの名前は、その下のセルと一緒に読まれます。ボタンの名前を「日付で並べ替え」にすると、列を下へ移動するたびに、日付の前に「日付で並べ替え」と読まれます。「Date: Activate to invert sorting」のようなラベルを見出しのセル自体に付けるライブラリーもあり、同じことが起きます。キャプションの補足なら一度で済みます。
並べる列は一度に一つ。 ARIAは、一つの表で aria-sort を付ける見出しは一度に一つだけにするよう求めています。並べていない列には付けません。属性がなければ none と同じ意味になります。状況で並べ、同じ状況の中を日付で並べる表なら、状況の列に付け、二つ目の基準はキャプションで伝えます。aria-sort="other" は、利用者が自分で決めた順のように、昇順でも降順でもない並べ方に使います。
新しい並び順をすぐ伝える。 ボタンを押してもフォーカスはボタンに残ります。変わった aria-sort は、いったん見出しを離れて戻るまで読まれないことがあります。すぐに伝える必要があるときは、「合計の高い順に並べ替えました」のような短いメッセージも、ページにあらかじめ置いた polite のステータス領域に書き込みます。画面に出ても読み上げられないステータスメッセージと同じ方法です。言い方は見出しに合わせ、aria-sort の代わりにはしないでください。表に戻ってきた人が読むのは aria-sort です。
リンクで並べ替える場合。 ?sort=total のようなリンクでページを読み込み直し、サーバーで並べ替える表では、見出しに置くのはボタンではなくリンクです。読み込まれたページでも、並べている列に aria-sort を付け、ページのタイトルや見出しで並び順を伝えられます。
向きは矢印の形で伝える。 二つの三角を並べて片方だけ色を変えるのではなく、行の並ぶ向きを指す矢印を一本描きます。向きを色だけで伝えると、その色が見えない人には上下の区別が付かず、1.4.1「色の使用」を満たしません。下のデザインの案に、基準を満たす描き方を示しています。
Windowsのコントラスト テーマでの矢印。 矢印は currentColor か文字で描きます。テーマが色を置き換えても見出しと同じ色を保てます。背景画像で描くと、ファイルでない画像はテーマに外され、ファイルの画像は元の色のまま残ります。
見出しそのものは別の問題で、見出しが太字だけのデータ表で扱っています。表の名前を付けるキャプションは表題がキャプションになっていない表で扱っています。三つとも同じ表のコンポーネントで対応してください。
デザインの案
並べ替えの印の見せ方は一つではない
同じ注文の表の見出しを、さらに5通りの描き方で示します。押したり、Tabで移動したりしてみてください。4つは形か言葉で並び順を伝え、1つは色だけで伝えます。
デザインファイルで
- 並べ替えのできる見出しを、何もしていないとき、昇順と降順、ホバー、フォーカスのそれぞれで描く。
- 並び順の向きは、行の並ぶ向きを指す矢印の形で示し、色だけで示さない。
- どの列で並べ替えられるか、表を開いたときにどの列がどちら向きに並んでいるかを書いておく。
- 見出しの文字は列の名前のままにし、「新しい順」のような一行は、目で見るためだけの補足にする。
合格
注文 #1071 10/22 $9.90 #1063 10/18 $142.00 並べ替えるまでは上下の矢印 並べ替えられる列には、白に対して4.83:1のグレーの上下の矢印が常にあり、押す前にどの列で並べ替えられるかが分かります。並べている列だけ、行の並ぶ向きを指す一本の矢印に変わります。注文 #1071 10/22 $9.90 #1063 10/18 $142.00 並べている見出しを淡いピルで囲む 選んだ絞り込みのチップのように、淡い色のピルが並べている列を示し、中の矢印が向きを伝えます。#e8effdの地の上でも、#1d4ed8の文字は5.80:1を保ちます。注文 #1071 10/22 $9.90 #1063 10/18 $142.00 並び順を言葉で添える 並べている見出しの下に「新しい順」と小さなグレーの一行を添えると、下向きの矢印が新しい順なのか古い順なのかを迷わせません。列ごとに、両方の向きの言葉を書いておきます。- 表の上の「並べ替え」メニュー ショップでは、並び順を一覧の上のメニューで選ぶことがよくあります。「並べ替え：新しい順」と言葉で並び順を示し、マウスでもキーボードでもスマートフォンでも同じように使えます。見出しは飾らず、並べ替えられそうに見せません。
基本原則：まずHTMLの要素を使う
不合格
注文 #1071 10/22 $9.90 #1063 10/18 $142.00 二つの三角、向きは色だけWCAG 1.4.1 二つの三角は常に表示され、向きを示す方だけが#2563ebの青になり、もう一方は#6b7280のグレーです。二つの間は1.06:1で、違いは色合いだけのため、青が見えない人には上下の区別が付きません。並べている列ではもう一方の三角を隠すか、矢印を一本にします。
修正の確認
5項目、マウス不要
確認方法： スクリーンリーダー、キーボード
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。表のコンポーネントを変更した際は、再度確認します。
制限
このサンプルは、どの表でも同じ結果になることを保証するものではありません。renderRows は、表の本体を描き直す実際のコードに置き換えてください。aria-sort の読み方はスクリーンリーダーによって異なり、押したときには読まず、フォーカスが見出しのセルに入ったときにだけ読むこともあります。並べ替えと同時に行を絞り込んだり、検索で行が減ったりする場合、表示している行数を伝えることは別の問題で、件数が読み上げられない検索・絞り込み結果で扱っています。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。