バッジ

Badge

別名: 通知バッジ、通知ドット、レッドドット、Notification badge、Badge dot、Red dot、Notification dot

生態(さわってみる)

一言定義

アイコンや要素に重ねて、件数や状態を小さなラベルで知らせる表示UI。

分類

使う場面

  • アイコンボタンに未読件数や新着状態を重ねて知らせたいとき
  • 詳細を開かなくても状態(新着・要対応など)を一目で伝えたいとき

避ける場面

  • 件数そのものが主情報で、単独でも意味を持つ数値を見せたいとき(本文中の数値表示で十分)
  • ユーザーの操作を伴う選択・フィルタリングの単位であるとき(→チップ)

近縁種との比較

バッジには件数を表示する数値バリアントと、件数を持たず存在の有無だけを示す小さな点だけのバリアント(「通知ドット」または「レッドドット」と呼ばれる)があり、後者は未読の有無のみを伝えたい場合や、件数を出すとかえって煩雑になる場面で使われる。同じ小型ラベルでもチップは削除・選択・トグルなどユーザーが操作できる要素であるのに対し、バッジは状態や件数を一方的に知らせるだけで操作を伴わない点で区別され、本図鑑はこの「操作できるのがChip、表示だけならTag/Badge」という基準を採用している。

実例リンク

アクセシビリティ

role
バッジ自体はaria-hidden="true"の装飾とし、件数や状態は親要素(ボタン等)のaria-labelに含めて1つのアクセシブルネームとして伝える
キーボード操作
通常のボタンとして操作可能。バッジ自体はフォーカス対象にしない
補足
通知ドット(レッドドット)のように数値を持たないバリアントも、aria-labelで「未読あり」等の状態を言葉にする。数値の変化はライブリージョンでの通知も検討する