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

Button

Buttons are used to trigger actions in forms, modals, and more.
  • Examples
  • Properties
  • Accessibility

Web Component

Accessibility

Keyboard Navigation

KeyFunction
TabMoves focus to the next focusable element
Shift + TabMoves focus to the previous focusable element
Enter,SpaceActivates the button

For comprehensive details on keyboard support for buttons, refer to our Keyboard Control Guide.

Visit WebAIM for keyboard techniques.

Guidance for developers
  • A button tag operates without requiring any special configurations. It's advisable to utilize button whenever possible, although alternative elements can be used if supplemented with role="button" and JavaScript to emulate button functionality.
  • Similar to hyperlinks, you can incorporate class="visuallyhidden" along with descriptive text to provide additional context regarding the button's purpose.
  • Ensure consistency between visual labels and programmatic labels.
  • Conceal SVG icons from screen readers when attached to buttons that possess textual labels.
  • Emphasize button states significance, not solely focusing on button styling. Solely toggling classes to visually manage component states may not effectively communicate these states to users of assistive technologies.
  • In instances where buttons lack text, it's imperative to append aria-label with a descriptive explanation of the button.
Guidance for designers
  • Ensure that the visual appearance and functional behavior of buttons are consistent across states and contexts.
  • Ensure sufficient color contrast between the button background and text to improve readability, especially for users with visual impairments. Additionally, avoid relying solely on color as the only means of conveying information or indicating button states.
  • Design distinct visual indicators for focus and hover states to assist users in navigating interactive elements, particularly for keyboard and mouse users.
  • Touch Targets: Design buttons with an adequate size and spacing.
  • Use spacing, typography, and visual cues effectively.

Find live examples in the A11y style guide.

Roles and attributes

Below are some key considerations to ensure that our components are fully accessible in various scenarios within your interfaces. These points outline the necessary roles and attributes to keep in mind.

Attribute ElementUsage
aria-labeldivSpecifies a textual value used to label an interactive element. This attribute is mandatory for buttons lacking textual content.
aria-labelledbydivThe attribute aria-labelledby designates the element or elements responsible for labeling the applied element. It is essential for buttons lacking text content.

Resources

  • W3 Button Example: Contains comprehensive details regarding the accessibility behavior of the button.
  • A11y Style Guide: Gives core recommendations for accessible buttons.
  • Mozilla Resources for Developers: Find examples of accessible buttons.

Other recommendations

Explore additional accessibility tips in the general Accessibility Guide.

WCAG 2.2 Guidelines

  • Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
  • Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
  • Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
  • Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)