このワイヤーの特徴
自分に近い事例だけを、すぐに見られる
種類のボタンで絞り込み、読み手が自分の状況に近い事例だけを見られるようにしています。
ボタンに件数を添える
ボタンに種類ごとの件数を添え、押す前にどのくらい事例があるかが分かるようにしています。
絞り込みの状態を、見た目と読み上げで伝える
押しているボタンは色を反転させて aria-pressed で示し、絞り込んだ件数を一覧の上に書いて読み上げでも知らせています。
写真の下に、種類のラベルを添える
「すべて」を選んでいるときにも、どの種類の事例かが分かるよう、写真の下に種類のラベルを添えています。
制作時のよくある失敗
種類を細かく分けすぎる
種類が10個近くに増えると、読み手はどれを押せばよいか迷います。
3〜6つにまとめます。
絞り込むと、写真が1枚しか残らない種類がある
1〜2件しかない種類は、ほかの種類とまとめるか、事例が増えるまでボタンを出さないようにします。
絞り込んだ状態が、URLに残らない
「店舗の事例」を人に知らせたい場合、URLで開けないと不便です。
件数が多い場合は、種類ごとに一覧のページを分けます。
色だけで、押している状態を示す
押しているボタンを薄い色の違いだけで示すと、どれを選んでいるか分かりにくくなります。
反転させるなど、はっきり区別し、aria-pressed でも伝えます。
よくある質問
種類は、何で分ければよいですか?
読み手が自分に当てはめやすい分け方にします。
建物の種類、業種、依頼の内容など、問い合わせでよく聞かれる分け方が目安になります。
1つの事例を、複数の種類に入れてもよいですか?
入れることはできますが、どの種類でも同じ事例が出てくると、絞り込みの意味が薄れます。
主な種類を1つ決めておくと整理しやすくなります。
絞り込みは、ページ内で切り替えるのと、ページを分けるのと、どちらがよいですか?
件数が少ないうちはページ内の切り替えで足ります。
件数が増え、種類ごとに探されるようになったら、種類ごとのページに分けると検索からも見つけてもらいやすくなります。
ページ内で切り替える場合も、?category=shop のようにURLに絞り込みの状態を残すと、再読み込みや共有のときに同じ状態で開けます。
