このワイヤーの特徴
入力に集中できる
画面全体を検索の画面にし、大きな入力欄を中央に置いて、入力することだけに集中できるようにしています。
言葉の例で、検索を始めやすくする
何と入力すればよいか分からない読み手は、検索をやめてしまいがちです。よく検索される言葉を並べ、押すだけで検索できるようにしています。
画面を覆う間は、操作を検索の画面に閉じ込める
検索の画面は role=”dialog” と aria-modal=”true” のモーダルとして扱い、Tabキーで移動しても後ろのページへ移らないようにしています。
閉じるボタンとEscキーで閉じると、開いたボタンに戻ります。
SPでも、同じ形で使える
画面全体を使うため、SPでも入力欄を大きく取れます。
言葉の例は折り返して並べ、指で押しやすい大きさにしています。
制作時のよくある失敗
後ろのページに、操作が移ってしまう
画面を覆っているのに、Tabキーで後ろのページのリンクへ移れると、読み手はどこを操作しているか分からなくなります。
dialog 要素を showModal() で開くか、独自に作る場合は操作を検索の画面の中に閉じ込めます。
閉じるボタンが見つけにくい
閉じるボタンが小さい×だけだと、見つけにくく押しにくくなります。
「閉じる」の文字を添え、押しやすい大きさにします。
よく検索される言葉が、実際の検索と合っていない
想像で選んだ言葉を並べても、読み手の探し方と合わないことがあります。
検索の記録を見て、実際によく検索される言葉を選びます。
開くたびに、前の入力が残っている
前に入力した言葉が残っていると、消す手間がかかります。
開くたびに空にするか、残す場合は全体を選んだ状態にします。
よくある質問
よく検索される言葉は、どう選べばよいですか?
サイト内検索の記録を、Googleアナリティクスなどで確認できる場合があります。
記録がないうちは、問い合わせでよく聞かれることから選び、記録がたまったら見直すとよいと考えられます。
全画面にすると、読み手は戸惑いませんか?
見出しに「サイト内を検索」と書き、閉じるボタンを分かりやすく置けば、何の画面かが伝わりやすくなります。
開いたら入力欄にすぐ移るようにしておくことも大切です。
候補の表示と組み合わせてもよいですか?
組み合わせられます。
入力前はよく検索される言葉、入力を始めたら一致する候補、と切り替えると、入力の前後で手助けを続けられます。
