CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Avatar

Avatars are used to represent users, groups, and entities.
  • Examples
  • Properties
  • Accessibility

Examples

To render an avatar, apply the class chi-avatar to a div element and place an image inside.

Customizations

Web Component

Properties

Web component coming soon

Accessibility

Keyboard Navigation

KeyFunction
TabMoves focus to the avatar element if it is interactive (e.g., a button or link).
Shift + TabMoves focus to the previous focusable element if it is interactive.
Enter,SpaceActivates the avatar action if it is a button or link.
EscCloses any associated popovers or tooltips.

For detailed keyboard interactions, refer to our Keyboard Control Guide.

Visit WebAIM for general keyboard techniques.

Guidance for developers
  • If the avatar acts as a button or link, ensure it has the appropriate role and is keyboard-focusable.
  • Use aria-label or aria-labelledby to provide a meaningful description for screen readers.
  • If the avatar represents a user, ensure there is alternative text via alt on the img element or an aria-label.
  • Implement ARIA live regions for dynamic avatar updates, such as changes in profile images.
  • Ensure high contrast between avatar content and background to support low-vision users.
Guidance for designers
  • Ensure avatars are distinguishable from other elements and maintain a minimum size of 44x44 pixels, as recommended by WCAG 2.5.5.
  • Provide alternative visual indicators for avatars (e.g., initials, icons) when an image is unavailable.
  • Use sufficient contrast between avatar background and foreground elements.
  • Ensure avatars have clear focus states when interactive (e.g., a visible outline or border).
  • Maintain consistent spacing and alignment to enhance visual clarity.

Explore live examples in the ARIA Practices Guide.

Resources

  • Mozilla Resources for Developers: Information about the img role and accessible image usage.
  • W3C Decision Tree: A guide to choosing appropriate alt text for images.

Other recommendations

Find additional accessibility tips in our Accessibility Guide.

WCAG 2.2 Guidelines

  • Non-text Content: Ensure all badges conveying information have a text alternative. (Level A)
  • Info and Relationships: Maintain semantic structure for screen readers. (Level A)
  • Headings and Labels: Ensure badges have meaningful labels. (Level AA)
  • Labels or Instructions: Provide clear instructions for dismissible badges. (Level A)
  • Name, Role, Value: Define ARIA attributes correctly for badges. (Level A)