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

Time picker

Time picker allows users to enter a time through text input or choose a time from a picker.
  • Examples
  • Properties
  • Accessibility

Examples

Step

Minutes and seconds can be shown in steps of 1, 5, 10, 15, 20, or 30 minutes or seconds. Use the property minutes-step to define the step for the minutes (defaults to 15 minutes) and the property seconds-step to define the step for the minutes (defaults to 10 seconds).

Time

An example of a time picker not attached to any element.

Step

Minutes and seconds can be shown in steps of 1, 5, 10, 15, 20, or 30 minutes or seconds. Use the property minutes-step to define the step for the minutes (defaults to 15 minutes) and the property seconds-step to define the step for the minutes (defaults to 10 seconds).

chi-time-picker

chi-time

Accessibility

Keyboard Navigation

KeyFunction
TabFocus moves to the hour/minute select and opens the dropdown with hour/minute options.
Shift + TabMoves focus to the previous focusable element.
Up Arrow, Down ArrowMoves focus between the options in the dropdown. If focus is on the last/first option, moves focus to the first/last option respectively.
Space,EnterSelects the option and closes the dropdown.
EscCloses the dropdown and returns focus to the hour/minute select trigger.

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

Visit WebAIM for keyboard techniques.

Guidance for developers
  • Keyboard Navigation: Support navigation through hours, minutes, and optionally seconds using arrow keys, and allow selection with the "Enter" key.
  • Use label Elements: Provide descriptive labels for each select component involved in time picking. Ensure the for attribute of the label matches the id of the associated input or select box to support screen readers.
  • Use appropriate ARIA roles and attributes to enhance accessibility. For example, role="listbox" for the select element and role="option" for each option within hour, minute, and second dropdowns.
  • Error Handling and Feedback: Provide clear and immediate feedback for actions such as selection errors. Use ARIA live regions to announce updates or errors dynamically.
  • Test compatibility with various screen readers (like JAWS, NVDA, or VoiceOver) to ensure the time picker component is announced correctly. Options should be clearly read out when navigated.
  • Implement visible focus styles to help keyboard users determine which element has focus.
Guidance for designers
  • Ensure all interactive elements in the time picker, like hour and minute selections and navigation buttons, meet the minimum target size of 44x44 pixels, as recommended by WCAG 2.5.5.
  • Design elements with adequate spacing to prevent accidental activations.
  • Design the time picker with high contrast between text and background colors, ensuring a minimum contrast ratio of 4.5:1 for text.
  • Employ distinct visual styles for error states using icons, text styles, and colors to clearly denote and explain errors like invalid dates or format issues.
  • Implement noticeable focus indicators on interactive elements, using enhanced borders, outlines, or shadows to clearly mark the active element during keyboard navigation.
  • Use spacing, typography, and visual cues effectively.
  • Maintain consistency in the design of the time picker to provide a cohesive user experience.

Resources

  • Mozilla Resources for Developers: Information about the HTML input-type=time.
  • MagentaA11y: How to test a time picker dialog.

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)