OK

• ✓role="tablist" / role="tab"、選択は aria-selected="true"。
• ✓variant は solid / line から選ぶ。
• ✓幅が足りないときは段落ちに任せる（.tabs が自動で折り返す）。
• ✓単一選択の絞り込み切替では、切り替わる一覧の領域を tabpanel にし、件数は tab-count （line variant）で示す。

NG

• ✕tablist を overflow-x-auto 等で包んで横スクロールにしない → 隠れたタブに気付けないため段落ちさせる。
• ✕複数同時に選べる絞り込みに使わない → filter-chip（aria-pressed の独立トグル）。
• ✕同じ内容の見え方（一覧 / グリッド 等）の切替に使わない → toggle-btn-group（tabpanel が要らない切替）。
• ✕ページ遷移リンクの並びに使わない → 同一ページ内の表示切替に使う。
• ✕設定画面のセクション（プロフィール / 通知 / セキュリティ等）のような、独立した画面の 粒度を持つ切替に使わない → 各セクションをページにして menu でナビする（フォームを持つ・ 単独で開けるべき・現在地を URL で示せるべきセクションはページ + menu）。 ※ tab はボタン状の切替 UI（リンクに見えない見た目）のため、「テキストリンクは常に下線」原則の例外として下線なし。
• ✕選択状態をクラスだけで示さない → aria-selected を使う。

同じ画面で内容を切り替える用途に role="tab" を使う。

<div role="tablist">
  <button role="tab" aria-selected="true">概要</button>
</div>

別ページへの遷移に tab を使わない。ナビゲーションは menu / link を使う。

<a class="tab tab-solid" href="/page-a">ページA</a>  <!-- 遷移に流用 -->

選択タブだけ aria-selected="true"。SR に選択が伝わる。

<button role="tab" aria-selected="true">すべて</button>
<button role="tab" aria-selected="false">未読</button>

role／aria-selected が無いと、ただのボタンの並びで選択状態が伝わらない。

<button class="tab tab-line">すべて</button>  <!-- role/aria-selected なし -->