このワイヤーの特徴
ヘッダーを整理したまま、検索を残せる
入力欄の代わりに虫眼鏡のボタンだけを置き、ヘッダーの横幅をメニューに使えるようにしています。
検索したいときだけ欄を開くため、ふだんのヘッダーはすっきり見えます。
アイコンに「検索」の文字を添える
虫眼鏡のアイコンだけでは、検索のボタンだと気づかない読み手もいます。PCではアイコンの横に「検索」と書き、押して何が起きるかを伝えています。
開くと、すぐに入力できる
ボタンを押すと検索欄を開き、入力欄に自動で移るようにしています。
開いたあとにもう一度欄を押す手間をなくしています。
開閉の状態を、読み上げでも伝える
ボタンには aria-expanded を付け、開いているか閉じているかを伝えています。
閉じるボタンやEscキーで閉じたときは、元のボタンに戻るようにしています。
制作時のよくある失敗
アイコンだけで、ボタンに名前がない
虫眼鏡の画像だけのボタンは、読み上げで「ボタン」としか伝わりません。
見た目に文字を出さない場合も、aria-label=”検索” などで名前を付けます。
開いたあと、入力欄に移らない
欄が開いても入力欄が選ばれていないと、読み手はもう一度押す必要があります。
開いたときに入力欄へ移し、そのまま入力できるようにします。
閉じる方法が分からない
欄を開いたあとに閉じるボタンがないと、読み手は元の画面に戻る方法に迷います。
閉じるボタンを置き、Escキーでも閉じられるようにします。
開いた欄が、ページの内容を隠す
検索欄を内容の上に重ねて開くと、読んでいた部分が隠れます。
ヘッダーの下に段を差し込む形にするか、閉じたときに元の位置に戻るようにします。
よくある質問
検索欄は、ヘッダーの下に開くのと、画面全体に開くのと、どちらがよいですか?
入力するだけならヘッダーの下に開く形で足ります。
よく検索される言葉や候補を一緒に見せたい場合は、画面全体に開く形が向くと考えられます。
SPでも同じ形にしてよいですか?
同じ形にそろえると、PCとSPで探し方が変わらず迷いにくくなります。
SPではアイコンだけにし、押せる範囲を44px程度の高さで確保します。
検索のボタンは、メニューのボタンと並べてもよいですか?
並べられます。
メニューと検索のどちらのボタンか分かるように、アイコンを変え、それぞれに名前を付けます。
