OK

• ✓選択状態は aria-pressed="true|false"。
• ✓件数表示は filter-chip-count。

NG

• ✕単一選択（1 つ選ぶと他が外れる）に並べない → 同じ一覧の表示を切り替えるなら tab （tabs-line + tab-count で件数付き）、フォームの入力値なら radio / select。 件数付きチップの見た目が合っていても、排他にするとユーザーは何個選べるか分からなくなる （2026-09 利用側の管理画面で「有望 / 意欲が高い / 休眠から再訪 …」から 1 つ選ぶ絞り込みに filter-chip を並べた実例）。
• ✕<a class="filter-chip"> にしない → filter-chip は <button type="button"> のトグル。 href で URL を切り替える 1 つ選択の絞り込みは tab、別ページへの移動は link / menu。
• ✕aria-current を付けない → 状態は aria-pressed のみ。aria-current="page" は menu の 現在地用で、併用すると支援技術が「押下」と「現在地」を二重に読み上げる。
• ✕送信やページ遷移（リロード・URL 変更）を伴う検索・絞り込みフォームに使わない → checkbox / select + 明示的な適用ボタンにする（選択と同時に送信するとユーザーの 予期しないコンテキスト変化になる: WCAG 3.2.2）。
• ✕チップ形状を独自シェイプに変えない → 何個選べるか直感が崩れる（guidelines 参照）。
• ✕filter-chip-check の中に svg を直置きしない → filter-chip-check-circle で必ず包む。 省くと svg が既定サイズ（300×150px）で描かれチップを突き抜ける（evals status-table 2026-09-03 で実例）。sprite の <use> を使う場合も同じ 3 層構造にする。

選択中は色に加えチェックマークでも示す。色を区別できなくても選択が分かる。

<button class="filter-chip" aria-pressed="true">
  …<span class="filter-chip-check">…✓</span>
</button>

チェックを外し背景色だけで選択を示すと、色を区別できない人に伝わらない。

<button class="filter-chip">  <!-- チェックなし・色のみ -->
  <span class="filter-chip-label">自治体連携</span>
</button>

aria-pressed でトグル状態を伝える。SR が「押されている」と読む。

<button class="filter-chip" aria-pressed="true">教育機関</button>

aria-pressed が無いと、見た目が選択でも SR には状態が伝わらない。

<button class="filter-chip">教育機関</button>  <!-- aria-pressed なし -->