このワイヤーの特徴
最後まで入力しなくても、目的のページを開ける
入力の途中から一致するページの候補を出し、選んだ候補をそのまま開けるようにしています。
長い言葉を入力する手間や、書き間違いを減らせます。
一致した部分と種類で、候補を見分けやすくする
候補の中で入力した言葉と一致した部分を太くし、ページ・よくある質問などの種類を添えています。
似た題名が並んでも、どれを開けばよいか判断しやすくなります。
キーボードでも候補を選べる
入力欄を role=”combobox”、候補を role=”listbox” として組み、↑↓キーで候補を選び、Enterで開けるようにしています。
選んでいる候補は aria-activedescendant で伝え、候補の数は読み上げでも知らせています。
候補がないときも、全文の検索へ進める
一致する候補がない場合は、その旨を表示し、Enterで全文の検索へ進めるようにしています。
候補がないことで検索が止まらないようにしています。
制作時のよくある失敗
候補を出すたびに、入力欄から操作が外れる
候補が表示されたときに操作が候補の一覧へ移ると、入力を続けられません。
操作は入力欄に残したまま、選んでいる候補だけを aria-activedescendant で伝えます。
候補を閉じる方法がない
候補が入力欄の下のボタンやリンクを隠したままになると、読み手は操作に困ります。
Escキーや入力欄の外を押したときに候補を閉じるようにします。
候補の数が多すぎる
候補が10件、20件と並ぶと、選ぶのに時間がかかります。
多すぎない件数（目安として5〜8件）に絞り、それ以上は全文の検索で探してもらいます。
1文字入力するたびに、画面が重くなる
入力のたびに問い合わせを送ると、候補の表示が遅れます。
入力が止まってから少し待って候補を出すなど、表示の間隔を調整します。
よくある質問
候補は、何文字入力したら出せばよいですか?
日本語では1文字でも意味を持つことが多いため、1文字から出す例が多く見られます。
候補が多すぎる場合は、2文字からにする方法もあります。
候補を選んだら、結果のページを開くのと、そのページを直接開くのと、どちらがよいですか?
ページの題名の候補なら、そのページを直接開くほうが早く目的に着けます。
言葉の候補（よく検索される言葉）なら、その言葉で結果のページを開く形が合うと考えられます。
ブラウザの入力履歴が、候補と重なって表示されます。
ブラウザの入力履歴が候補の上に重なる場合は、入力欄の autocomplete を off にすると、サイトの候補だけを表示できます。
