UI Component Lab English

← コンポーネント一覧

データ表示

Avatar アバター

人やアカウントを表す、小さな写真・頭文字・アイコン。

見分けるポイント

写真か、色の付いた背景に頭文字を入れた丸（角丸の四角のこともある）。複数を少し重ねて並べ、最後に「+N」を付けることもある。

挙動

  • 写真がないときや読み込めないときは、頭文字や汎用のアイコンで代わりに表示する。
  • 隣に名前があるならアバターは飾り扱いにし、ないなら名前を代替テキストとして付ける。
  • このデモでは頭文字をスクリーンリーダーから隠し、代わりにフルネームを読ませている。

キーボード操作

キー動作
—なし。プロフィールを開くアバターはリンクかボタンにし、そのキー操作に従う。

出典