結果件数のライブ更新
条件を変えると件数がスケルトンになり、少し置いて数字に戻る。連続した変更はデバウンスで1回のリクエストにまとめ、aria-live で件数の変化を読み上げる。右上に変更回数とリクエスト回数を出す。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 条件を変えるたびに件数を問い合わせる検索フォーム
- 連続した変更を 300ms のデバウンスで1回にまとめたい画面
- 古い件数を見せず「数えている」合図を出したい一覧
- 避ける場面
- 件数がローカルで即時に出せる小さな一覧
- 変更が1回きりで問い合わせが1回しか起きないフォーム
- 構成要素
- キーワード入力
- セレクト
- チェックボックス
- 件数（スケルトン）
- 変更／リクエスト回数
- 先頭4件
- 持っている状態
- 通常
- フォーカス
- 読み込み中
- 空
- キーボード
Tab で入力欄・セレクト・チェックを移動。入力は打鍵停止から 300ms 後、セレクト／チェックは変更で問い合わせを予約
- 支援技術
件数の p だけを aria-live=polite にし数字のみ読み上げる。問い合わせ中は結果領域に aria-busy=true（更新が終わってから読む）。各入力は label で包む。スケルトン中は数字を透明化
- 動き
件数のシマー 1s linear 無限（数えている最中の合図）。reduced-motion で静止色
原則ドハティの閾値
目的知らせる
デザインの要点
- 件数の更新を「前の数字のまま」にしない。古い数字が見えていると、変更が効いたのか分からない。スケルトンは『いま数えている』の合図
- 入力のたびに問い合わせると、サーバーにも利用者にも無駄。止まってから 300ms で1回にまとめる（デバウンス）
- 読み上げは polite で件数だけ。一覧全体を live にすると、変更のたびに長文が読まれて操作を妨げる
コード（コピーして使えます）
<div class="rcl">
<div class="rcl-controls">
<label class="rcl-f rcl-f-wide"><span>キーワード</span><input id="rcl-q" type="text" placeholder="例: 鍋" autocomplete="off"></label>
<label class="rcl-f"><span>カテゴリ</span><select id="rcl-cat"><option value="">すべて</option><option>キッチン</option><option>文具</option><option>インテリア</option><option>アウトドア</option></select></label>
<label class="rcl-f"><span>お届け</span><select id="rcl-d"><option value="">指定なし</option><option value="翌日">翌日</option><option value="2〜3日">2〜3日</option></select></label>
<label class="rcl-c"><input id="rcl-stock" type="checkbox"><span>在庫あり</span></label>
<label class="rcl-c"><input id="rcl-sale" type="checkbox"><span>セール中</span></label>
</div>
<div class="rcl-result" id="rcl-result" aria-busy="false">
<div class="rcl-count-row">
<p class="rcl-count" id="rcl-count" aria-live="polite"><span class="rcl-num" id="rcl-num">30</span> 件</p>
<p class="rcl-stat" id="rcl-stat">変更 0 回 → リクエスト 0 回</p>
</div>
<ul class="rcl-list" id="rcl-list" aria-label="商品（先頭4件）"></ul>
</div>
</div>