このワイヤーの特徴
検索できることが、ひと目で分かる
虫眼鏡のアイコンだけでは、検索できることに気づかない読み手もいます。入力欄そのものをヘッダーに見せ、押す前から「ここに言葉を入れれば探せる」と分かるようにしています。
どのページからも、同じ場所で探せる
検索欄をヘッダーに置き、どのページを開いていても同じ位置から検索できるようにしています。
探す手段の場所が変わらないため、読み手が迷いにくくなります。
検索の範囲を、欄の中の文字で伝える
入力欄に「サイト内を検索」と表示し、インターネット全体ではなくこのサイトの中を探す欄だと伝えています。
読み上げでも伝わるよう、入力欄にはラベルを付けています。
SPでは、ヘッダーの下に欄を移す
SPのヘッダーに入力欄を入れると、ロゴやメニューのボタンと重なって狭くなります。
SPでは入力欄をヘッダーの下の段に移し、横幅いっぱいで入力できるようにしています。
制作時のよくある失敗
プレースホルダーだけで、ラベルを付けない
欄の中の薄い文字だけでは、入力を始めると消えてしまい、読み上げでも伝わらないことがあります。
見た目に出さない場合も、aria-label などで入力欄に名前を付けます。
入力欄が小さすぎて、言葉が収まらない
入力欄の幅を狭くしすぎると、入力した言葉が途中で見えなくなります。
よく検索される言葉が収まる程度の幅を確保します。
検索のボタンがなく、Enterでしか送れない
キーボードに慣れていない読み手は、入力したあとにどう送ればよいか迷います。
虫眼鏡などのボタンを置き、ボタンにも「検索」という名前を付けます。
検索の仕組みが弱く、欄だけが目立つ
検索欄を目立たせても、結果が的外れだと読み手の信頼を失います。
検索の精度や、0件のときの案内まで用意してから、入口を目立たせます。
よくある質問
サイト内検索は、どのくらいのページ数から必要ですか?
決まった基準はありません。
メニューからたどるのに何段階もかかるページが増えてきたら、検索を置く目安になります。
ページが少ないうちは、メニューの整理を先に考えるのがよいと考えられます。
検索欄の入力欄には、どの種類を使えばよいですか?
検索用の入力欄（type=search）を使い、全体を role=search の form で囲むと、検索の欄であることが伝わりやすくなります。
HTMLの search 要素で囲む方法もあります。
WordPressの標準の検索でも十分ですか?
ページ数が少ないうちは十分な場合が多いと考えられます。
題名や本文の一致だけで並ぶため、ページが増えて的外れな結果が目立ってきたら、検索の仕組みを見直す目安になります。
