アバター
Avatar
別名: プロフィール画像、ユーザーアイコン、アバターグループ、ファセパイル、Avatar、Profile picture、User icon、Avatar group、Facepile
生態（さわってみる）
単体のバリエーション
田中 健
イニシャル
画像（人物アイコンで代替）
佐藤 誠（オンライン）
アバターグループ（+3表記）
- 鈴
- 高
- 伊
- +3
一言定義
ユーザーやアカウントを表す顔写真・イラスト・イニシャルを、丸型または角丸の小さな枠に収めて示す表示UI。
分類
使う場面
- コメント欄や担当者一覧など、誰の情報かを一目で識別させたいとき
- 複数人の関与者を省スペースで重ねて見せたいとき（アバターグループ）
避ける場面
- 実名やテキストでの識別が必須で、画像・イニシャルだけでは不十分なとき
- 対象がユーザーではなく、状態や件数そのものを示したいだけのとき（→バッジ）
近縁種との比較
アバターに重ねるオンライン状態ドットは、件数や状態を知らせるバッジの通知ドットバリアントと見た目が近いが、アバターの状態ドットが「そのユーザーが今どうしているか」という人物固有の状態を表すのに対し、バッジはアイコンボタンなど対象物側の状態・件数を表す点で対象が異なる。複数アバターを重ねて表示する「アバターグループ（Facepile）」は、表示しきれない残りの人数を「+3」のような数値バッジ状の表記で補うことが多く、この点で両者は組み合わさって使われることも多い。
近縁種
実例リンク
アクセシビリティ
- role
- 画像アバターはimgのaltに人物名を入れる。イニシャルのみのアバターも装飾ではなく情報を持つため、同様に人物名が伝わるテキストを添える
- キーボード操作
- クリックでプロフィール等に遷移させる場合はリンク/ボタンとして通常のTab移動に含める。単なる識別表示で操作を持たないアバターはリンク化しない
- 補足
- アバターグループで重なって隠れた分は「+3」のような残数表記をテキストとして持たせ、スクリーンリーダーにも人数が伝わるようにする。オンライン状態を示すドットは色だけに依存せず、aria-labelで「オンライン」等の状態語を併記する