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

Alert

Alert messages provide contextual feedback for user actions.
  • Examples
  • Properties
  • Accessibility

Examples

Bubble

Bubble alerts are designed for displaying inline messages and notifications within forms, panels, cards, and other content areas. They are Chi's default Alert type.

Toast

Toasts are unobtrusive alerts used to display brief, auto-expiring information.

Web Component

Accessibility

Keyboard Navigation

KeyFunction
TabMoves focus to the next focusable element. If focus is on the alert, moves to the next interactive element.
Shift + TabMoves focus to the previous focusable element.
Enter,SpaceActivates interactive elements within the alert, such as dismiss buttons or links.
EscCloses the alert if it is dismissible.

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

Visit WebAIM for general keyboard techniques.

Guidance for developers
  • Ensure that alerts use appropriate ARIA roles such as role="alert" for important messages.
  • Provide a clear and meaningful message in the alert content.
  • If an alert is dismissible, ensure the close button is keyboard accessible and has a descriptive aria-label.
  • Use aria-live="polite" or aria-live="assertive" to notify assistive technologies of dynamic alerts.
  • Avoid using alerts for non-essential notifications that could disrupt user experience.
Guidance for designers
  • Alerts should be visually distinct from other content using color, iconography, and typography.
  • Ensure a high contrast ratio between the text and background colors.
  • Dismiss buttons should be clearly visible and easy to interact with.
  • Consider the appropriate level of urgency when choosing alert styles (info, success, warning, danger).
  • Avoid using color alone to convey meaning—include an icon or textual explanation.

Explore live examples in the ARIA Practices Guide.

Resources

  • Mozilla Resources for Developers: Best practices for implementing the role="alert".
  • WebAIM ARIA Guide: Techniques for using ARIA effectively.

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)