バッジ
component状態・分類・件数などを短いラベルで示す、非インタラクティブな表示要素です。塗り（solid）と淡色（soft）の 2 系統 × 6 色があります。
Neutral
Primary
Info
Success
Warning
Danger
Neutral
Primary
Info
Success
Warning
Danger
機能
このコンポーネントの用途
ステータス・分類・件数などを短いテキストで示す非操作のラベル。
操作するなら button / link、絞り込みのトグルは filter-chip。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓色は意味で選ぶ（成功=success / 警告=warning / エラー=negative 等）。
- ✓強調度に応じて solid / soft を使い分ける。
NG
- ✕クリック操作に使わない → button / link / filter-chip。
- ✕長文を入れない → 1〜2 語のラベルに留める。
状態は文言で示す（色だけに頼らない）
色の使用
Good
承認済み
却下
ラベル文言で状態を伝える。色を認識できなくても意味が分かる。
<span class="badge badge-soft-success">承認済み</span> <span class="badge badge-soft-danger">却下</span>
Don't
状態
状態
文言が同じで、意味の違いを色だけに委ねない。色が区別できないと差が伝わらない。
<span class="badge badge-soft-success">状態</span> <span class="badge badge-soft-danger">状態</span>
バッジのアクセシビリティ
バッジは非インタラクティブな表示要素です。フォーカスや操作の対象ではなく、意味は必ずラベル文言で伝えます。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
提示
状態・分類は色だけでなくラベル文言で伝える。solid / soft の各色は文字とのコントラストを確保。
適応
文字は rem / トークンで拡大に追従し、折り返しでも欠けない。
操作
非インタラクティブ。フォーカスやクリックの対象にしない。操作が要るなら button / link を使う。
支援技術
ラベル文言がインラインで読まれる。件数・状態は近接する要素と結びつけて意味を補う（例: 「未読 3 件」）。
DS が担保する機能
追加実装なしで満たされる
- ✓solid / soft の各色は文字とのコントラストを確保（テキスト可読）
- ✓テキストラベル前提の設計（アイコンのみのバッジは持たない）
- ✓文字は
fgロール／サイズトークンで拡大・コントラストに追従
実装時の必須対応
プロダクト側で担保する
- !状態は色だけでなくラベル文言で示す（色覚に依存しない）
- !件数・ステータスは文脈と結びつける（近接見出し や
aria-labelで「未読 3 件」等） - !操作にはバッジを使わない →
button/link（フォーカス・キーボード操作が必要） - !純粋な装飾で情報が重複する場合は
aria-hidden="true"を検討
テスト方法
スクリーンリーダー / 自動チェック
- 操作バッジ自体はフォーカス対象ではない（Tab で止まらない）。操作要素があれば別途 button / link で検証
- SRラベル文言が読まれ、色に依存せず意味が伝わるか確認
- 自動axe / Lighthouse で solid / soft のコントラストを確認
操作には button / link を使う
達成基準：WCAG 4.1.2 名前・役割・値 / 2.1.1 キーボード
Good
3
バッジは件数の表示だけを担い、操作は button に持たせる。フォーカス・キーボード操作ができる。
<span class="badge badge-soft-info">3</span> <button type="button" class="btn btn-sm">未読を開く</button>
Don't
絞り込み ✕
バッジをクリック要素にしない。span はフォーカスできず、キーボードや SR から操作できない。
<span class="badge badge-soft-neutral" onclick="…">絞り込み ✕</span>