このワイヤーの特徴
関係のある話題だけを、すぐに見られる
いろいろな種類が混ざった一覧では、読み手は自分に関係のある話題を探して全体を読むことになります。種類のボタンで絞り込み、関係のある話題だけを見られるようにしています。
ボタンに件数を添え、押す前に量が分かる
押してみて1件もなかった、ということが続くと、読み手は絞り込みを使わなくなります。ボタンに種類ごとの件数を添え、押す前にどのくらいあるかが分かるようにしています。
選んでいる種類を、見た目と読み上げで伝える
選んでいるボタンは色を反転させ、aria-pressed で押している状態を示しています。
絞り込んだあとは一覧の上に「イベントのお知らせ 2件」と表示し、読み上げでも知らせています。
SPでは、ボタンを2列にそろえる
SPでボタンを横一列に並べると、画面からはみ出して一部が見えなくなります。
SPではボタンを2列の格子に並べ、すべての種類が1画面に見えるようにしています。
制作時のよくある失敗
種類を細かく分けすぎる
種類が7つ、8つと増えると、読み手はどれを押せばよいか迷います。
種類は3〜5つ程度にまとめ、どの種類にも当てはまらない話題を出さないように分けます。
それでも種類が多い場合は、セレクトや検索での絞り込みを検討します。
1つのお知らせを、複数の種類に入れる
同じお知らせがどの種類でも出てくると、絞り込みの意味が薄れます。
1件に1つの種類を付けるのが基本です。
絞り込んだ状態が、URLに残らない
ページ内の絞り込みだけで切り替えると、特定の種類の一覧を人に知らせたり、ブックマークしたりできません。
件数が多い場合は、種類ごとに一覧のページを分け、URLで開けるようにします。
タブの見た目なのに、ページの移動になっている
タブの見た目で種類ごとのページへ移動させる場合、タブの役割（role=”tab”）を付けると、読み上げで操作が食い違います。
ページを移動するならリンクとして組み、表示中の種類に aria-current=”page” を付けます。
よくある質問
絞り込みは、ページ内で切り替えるのと、ページを分けるのと、どちらがよいですか?
件数が少ないうちは、ページ内で切り替える形で十分な場合が多いと考えられます。
件数が多くなり、種類ごとに探されるようになったら、種類ごとに一覧のページを分けると、URLで開けて検索にも見つけてもらいやすくなります。
「すべて」のボタンは必要ですか?
絞り込みを解除する手段になるため、置いておくと迷いにくくなります。
最初は「すべて」を選んだ状態で表示するのが一般的です。
種類のラベルは、一覧の各行にも必要ですか?
「すべて」を選んでいるときに、どの種類のお知らせかが分かるように、各行にもラベルを付けておくと親切です。
