件数が読み上げられない検索・絞り込み結果

文言も位置も正しいのですが、p はライブリージョンではないため、変化は描かれても読み上げられません。

件数の行は、描き直されるリストの外に最初からあるため、role="status" を付けるだけで、ブラウザーが最初から見ている控えめなライブリージョンになります。手を止めて少しすると、スクリーンリーダーは読み上げ中の内容を終えてから「「エプロン」の検索結果：3件」と読みます。カーソルは検索欄に残ります。聞こえる内容は、いつも見えている行と同じです。新しいコードは属性と say だけです。ただし、件数の行そのものが検索のたびに残る場合に限ります。結果と一緒に行も作り直すページでは、次の方法を使ってください。

どちらも、フォーカスを動かさずに結果の件数を伝えます。件数の行が検索のたびに残るなら、見えている件数をステータス領域にしてください。すでにある要素に属性を一つ付けるだけで、聞こえる内容が見える内容からずれることもありません。隠した領域が合うのは、件数が結果と一緒に作り直され、それを変えられない場合です。たとえば他社の検索ウィジェットや、まるごと再描画される結果のコンポーネントです。その代わり、同じ文言をもう一か所、そろえて保つ必要があります。

伝えるタイミング。 適切なタイミングは、検索の始まり方によって変わります。

• 入力しながら動く検索：キーを押すたびではなく、入力が止まり、結果がそろったときに伝えます。0.5秒ほど待てば、速く入力する人にも件数は5回ではなく一度だけ聞こえます。
• チェックしたらすぐ反映される絞り込み：その変更の結果がそろったときに伝えます。スクリーンリーダーは先にチェックボックス自体の状態を読み、そのあとに件数を読みます。
• 「適用」ボタンのある絞り込みパネル：「適用」を押したあとに伝えます。フォーカスはボタンに残すか、パネルが閉じる場合はパネルを開いたボタンに戻します。
• 新しいページを読み込む検索：この場合、件数はステータスメッセージではありません。ページのタイトルと見出しに入れます（「エプロンの検索結果 3件」）。ページの読み込み時に読まれます。

作り直される部分の外に置きます。 コンポーネントのフレームワークでは、領域をレイアウトか、検索コンポーネントのうち表示され続ける部分に置きます。キー付きのブロック、{#if}、結果と一緒に置き換わるリストの中には置きません。メッセージと一緒に作られる領域は、書き方が違うだけで同じ失敗です。

伝えるのは件数で、リストではありません。 結果のリストに aria-live を付けないでください。手を止めるたびに商品名がすべて読まれるか、リストが置き換わって何も読まれないかのどちらかで、知りたかった件数が埋もれます。件数の行だけで十分です。利用者は準備ができたらリストへ移動できます。

0件には言葉と次の手を。 「商品が見つかりませんでした」だけでは、利用者は行き詰まります。別の語や、絞り込みを減らすことなど、次に試すことを伝えます。検索が表記ゆれを直す場合（「エプロンの結果を表示しています」）は、同じメッセージに含めます。

同じ文言が続くとき。 検索語のあとに空白を入れたり、何も変わらない絞り込みにチェックを入れたりすると、同じ文言がもう一度書き込まれます。領域の文言が変わらないと、何も読まないスクリーンリーダーがあります。say は先に領域を空にし、少し待ってから書き込むため、毎回件数が読まれます。見えている行では、文言が0.1秒ほど消えますが、ほとんど気づかれません。

時間のかかる検索。 結果が出るまでに少しかかる場合は、同じ領域に「検索中…」と書き込み、そのあとに件数を書き込みます。すぐに結果が出る検索では書き込まないでください。雑音が増えるだけです。読み込み中のメッセージについては、読み上げられない読み込み中の表示を参照してください。

控えめに伝えます。 role="status" は、スクリーンリーダーが読み終えるのを待ってから伝えるため、件数に合っています。role="alert" や aria-live="assertive" は使わないでください。入力した文字の読み上げに割り込んでしまいます。

修正にならないもの。 結果や件数の行へフォーカスを移せば読み上げられますが、カーソルが検索欄から抜け、検索を絞り直すには戻る場所を探す必要があります。リストに aria-busy を付けても、何も読み上げられません。入力中に検索欄の下に出る候補は、コンボボックスという別のパターンで、別の決まりがあります。