ウェブ・アクセシビリティ・クックブック

第10章. データをフィルタリングする

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

オンラインショップ（ ）、マーケットプレイス、不動産Webサイト、大規模なブログには、ユーザがアクセスできる大量のデータという共通点がある。大規模データセットを扱うと、すぐに気が遠くなり、圧倒されてしまう。フィルタリングを使えば、ユーザは検索結果を絞り込むことができ、探しているものを発見しやすくなる。同時に、インタフェースの複雑さを増すこともある。フィルタリングフォームを作成するときは、ユーザが素早く効率的に設定を適用できるように、できるだけシンプルにすることが重要だ。ユーザーがどのようにウェブにアクセスしても、どのフィルターが有効で、適用されているかを常に把握できなければならない。

10.1 フォームを作成する

問題

、ユーザに何百、何千というアイテムのリストを提示すると、ユーザが探しているものを見つけるのが難しくなることがある。リストにインタラクティブな要素が含まれている場合、スイッチ・デバイスのような支援技術を使用している人々にとって、リスト内をナビゲートすることは、身体的に厳しいものになる可能性がある。

解決策

ユーザが無関係な結果をフィルタリングできるようにする。例10-1は、HTMLの例示的なフィルタリングを示している。

例 10-1. さまざまなタイプのフォーム要素を持つフィルタリング・フォーム

<form role="form" aria-label="Filter" id="filter">
  <label for="artist">Artist</label>
  <select id="artist" name="artist">
    <option value="">All</option>
    <option>AFI</option>
    <option>Absolute Beginner</option>
    <option>Akne Kid Joe</option>
    <option>Bad Religion</option>
    <option>Beastie Boys</option>
    <option>Bilderbuch</option>
    <option>Billy Joel</option>
    <option>Bring me the Horizon</option>
    <option>Dead Kennedys</option>
    …
  </select>

  <fieldset>
    <legend>Country</legend>

    <input type="checkbox" name="country" id="country_at" value="at">
    <label for="country_at">Austria</label>

    <input type="checkbox" name="country" id="country_ca" value="ca">
    <label for="country_ca">Canada</label>

    <input type="checkbox" name="country" id="country_us" value="us">
    <label for="country_us">USA</label>

    <input type="checkbox" name="country" id="country_de" value=