Design Pattern

バッジ

バッジは、ステータス、カテゴリ、件数などの補足情報を小さなラベルとして表示するパターンです。色だけに頼らず、テキストやアイコンで意味を伝えることが重要です。

難易度: 初級カテゴリ: データ表示

いつ使う / 使わない

使うべきとき

ステータス（公開中、下書き、エラーなど）を簡潔に示したい場合
カテゴリやタグとして項目を分類したい場合
通知件数や未読数をアイコンに重ねて表示したい場合

使わないべきとき

長いテキストを表示する場合 → バッジは短いラベル向き
操作を伴う場合 → ボタンやリンクを使う
色だけで意味を伝える場合 → テキストも必ず添える

構造（Anatomy）

1 バッジコンテナ（span）

2 ラベルテキスト

3 ステータスインジケーター（色・アイコン）

4 カウント表示

コンテナ — span でインライン要素として実装。意味のある情報なら aria-label を検討する
ラベル — 色だけでなくテキストで意味を伝える。短く簡潔にする
カウント — 動的に変わる場合は aria-live で変更を通知する

HTML 構造

重要なポイント

バッジは span 要素で実装し、文脈に応じて aria-label を設定する
色に意味を持たせる場合もテキストで同じ情報を伝える
動的なカウントには aria-live="polite" を使って更新を通知する
装飾的なバッジは aria-hidden="true" で支援技術から隠す

CSS 実装

見た目で補助すべき点

サイズ — コンパクトに保ち、親要素のテキストを邪魔しない
色 — ステータスごとに一貫した配色を使い、コントラスト比を確保する
角丸 — pill 型（border-radius: 999px）が一般的
位置 — カウントバッジはアイコンの右上に absolute で配置する

キーボード操作

バッジ自体はインタラクティブではないため、フォーカスは不要
削除可能なタグバッジの場合は、削除ボタンにフォーカスできるようにする
リンクやボタンに付随するバッジは、親要素のフォーカスで読み上げる

ライブデモ

ステータスバッジ

状態を色とテキストで伝える基本的なバッジです。

カウントバッジ

通知件数や未読数をアイコンに重ねて表示するパターンです。

タグバッジ

カテゴリ分類やフィルター選択に使う、削除可能なタグ型バッジです。

よくある間違い

色だけでステータスを区別する

色覚特性を持つユーザーには区別がつきません。テキストでも意味を伝えます。

バッジ内のテキストが長すぎる

バッジは短いラベル向けです。長い説明はツールチップや別の要素で補います。

カウント更新が支援技術に伝わらない

aria-live を設定せずに JavaScript で値だけ変えても通知されません。