表の並べ替えと絞り込みは、最初から読めるHTMLの表に追加し、JavaScriptが動かなくても一覧を読める作りにします。操作を押して初めて行が現れる表にはしません。
先に、表の目的と初期の順番を決めてください。次に、動かす列、絞る条件、空欄の位置を決めます。最後に操作を足すと、機能が止まったときも、何の表かと各行の値が残ります。
表の見出しやスマホ表示の基本は比較表のHTMLで扱っています。ここでは、読める表へ操作を付け足す手順に絞ります。
最初の順番を決める
製造業の設備一覧なら、設備名順、メーカー順、用途ごとの順など、操作しなくても探せる並びを選びます。価格の低い順なら、価格の条件をそろえられるかも先に確認します。
データを取った順番のままでは、読む人には規則が分かりません。先頭の行だけが特に優れていると誤解されないよう、並び方を表の題や近くの説明へ書きます。
| 決めること |
例 |
| 初期の順番 |
メーカー名の読み順 |
| 切り替えられる順番 |
高さの小さい順・大きい順 |
| 同じ値の順番 |
製品IDの順 |
| 値がない行 |
昇順でも降順でも最後 |
これは実装の設計例です。読み順で並べるなら、社名の漢字を文字コード順に比較するだけでは足りません。表示する名前とは別に、確認した読みを並び替え用に持つ方法があります。読みが不明なら推測で足さず、別の明示できる軸を使います。
同じ値の行の順番も固定します。並べ替えるたびに同じ値の行が入れ替わると、見ていた製品を見失います。順位の差がないものへ、表示の都合で優劣を付けないようにしてください。
HTMLだけで何を残す？
表の題、列と行の見出し、各行の値、出典と時点を残します。最初に届くHTMLを読んだ時点で、一覧として成立する状態です。
JavaScriptが準備できる前は、操作を隠すか無効にします。押しても反応しないボタンや、入力しても何も起きない検索欄を最初から使えるように見せないためです。処理の準備が終わった時点で、操作可能な表示へ切り替えます。
行数が多くてページを分けているなら、次のページへの通常のリンクも残します。いま表示している行だけを動かす機能なら、全件の並べ替えと呼びません。表示中の範囲を並べ替える、と操作の近くに示します。
検索エンジンがJavaScriptを処理する話はJSと検索の関係にまとめています。ここでの確認は、利用者の手元で処理が失敗しても、表を読む仕事を続けられるかです。
aria-sortは何を伝える？
WAI-ARIAの仕様の該当箇所は、表やグリッドの項目が昇順・降順で並んでいるかを示す属性としています。見出しのセルに適用し、一つの表では同時に一つの見出しだけへ付けることを推奨しています。
MDNの属性説明も、現在基準にしている列や行へ付けると説明しています。別の列を基準にしたら属性を移し、方向を変えたら値を変えます。属性そのものには、行を動かす効果はありません。
代表的な値は次のとおりです。
| 値 |
意味 |
| ascending |
昇順 |
| descending |
降順 |
| none |
並び順を定義していない |
| other |
昇順・降順以外の規則 |
小さい順と大きい順を切り替えるときは、実際の行順と属性を一緒に変更します。画面の矢印だけを逆向きにして、属性を変え忘れないようにします。
属性は見出しへ付ける
次は、製品の高さを小さい順に表示している表の見出しの例です。ボタンを動かす処理や表全体のコードではありません。
<th scope="col" aria-sort="ascending">
<button type="button">高さ（小さい順）</button>
</th>
aria-sortを付けるのはthです。操作するのは、その中のbuttonです。列の見出しをクリック可能な文字に見せるだけでなく、キーボードでも操作できるボタンを使います。
W3Cの並べ替え表の例も、列見出しの中にボタンを置き、並び替えた列の見出しへ属性を付けています。ただし同ページは、例をそのまま本番へ転用せず、支援技術や端末で確認するよう注意しています。
数字を文字で比べない
表にある高さや重量を、そのまま文字列として比べると、数の大小とは違う順になります。次は説明用の数値です。
| 比べ方 |
小さい順の結果 |
| 文字列の比較 |
100、20、3 |
| 数値の比較 |
3、20、100 |
表示用のカンマや単位を含む文字と、比較に使う数値を分けます。高さの列にmmとmが混ざるなら、同じ単位へ換算してから比べます。換算した値と、元の値の両方を追えるようにしてください。
空欄も別に扱います。JavaScriptで空の文字を数へ変換すると0になる処理があります。非公表の製品が最小値として先頭に来ないよう、値の有無を先に判断します。理由の書き分けは空欄の見せ方にあります。
小さい順を単純に反転させると、最後へ置いた空欄まで先頭へ来ます。方向を変える処理でも、空欄の規則を独立させます。
絞る範囲を明示する
入力欄には、何を探せるかのラベルを付けます。メーカー名を対象にするなら、検索という一語だけでなくメーカー名で絞ると書きます。検索の対象に型番を含むかも説明します。
表の上には、条件に一致した件数を示します。全体の件数と表示件数は、別の意味です。ページ分けがある表では、絞り込みが表示中のページだけに効くのか、一覧全体へ効くのかを先に決めます。
表示中の行だけで全国を探したことにしない
一部の行しか読み込んでいない表で0件になっても、全件に該当する製品がないとは分かりません。全件検索が必要なら、サーバー側で条件を受け取って表を返す方法も検討します。
入力後に結果が変わることは、必要に応じて短い状態メッセージでも伝えます。表全体を毎回読み上げさせるより、件数を伝え、利用者が表へ進める形にします。実際の読み上げと操作は対象環境で確かめます。
URLへ条件を残すかは、操作とは別の判断です。無制限に条件付きURLを増やさない扱いは絞り込みのSEOに任せます。
元に戻れるようにする
0件なら、現在の条件と一致する行がないことを示し、条件を解除するボタンを置きます。データそのものがない状態と、条件で行が隠れた状態を同じ文で済ませません。
解除した後の順番も決めます。初期の順に戻すのか、利用者が選んだ並びを維持するのかを統一します。複数の条件があるなら、条件を全部解除したことを画面でも確認できるようにします。
公開前はJavaScriptを無効にして表を読み、次に有効にして昇順・降順・別列への変更・0件・解除を試します。キーボードだけでも同じ作業を終えられるかを見ます。狭い画面では、ボタンの文字、表の幅、件数の表示が重ならないかも確認します。
私たちは暦の自社メディアで、FAQを構造化データにだけ入れ、画面へ出していませんでした。出典は自社メディアの運営記録です。表でも、裏側に値があることと、読者が読めることは分けて確認します。
データ型サイトで表を依頼する際は、初期の順番、操作の対象範囲、空欄の規則、機能停止時の表示まで渡してください。操作が増えたことより、探していた行にたどり着けることを完了条件にします。
仕様・出典の確認日：2026年10月26日。
