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

Text input

Text inputs are used for inputting single line text data.
  • Examples
  • Properties
  • Accessibility

Web Component

Accessibility

Keyboard Navigation

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

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

Visit WebAIM for keyboard techniques.

Guidance for developers
  • Simplify forms for better browser compatibility.
  • Use labels for inputs, matching for and id attributes.
  • Keep IDs unique and pair each form element with one label.
  • Mark required fields clearly (e.g., with an asterisk).
  • Use aria-describedby for error message accessibility.
  • if there's an error message tagged with id="my-error-message", then the corresponding input must include aria-describedby="my-error-message"
Guidance for designers
  • Ensure focus indicators are visible to aid navigation.
  • Keep input labels visible, even when fields are focused.
  • Use contrasting colors for text and backgrounds to enhance readability.
  • Design clear error states and feedback for accessibility.
  • Use spacing, typography, and visual cues effectively.
  • Maintain consistency in the design of input elements to provide a cohesive user experience.

For hands-on examples, consult the Accessibility (A11y) Style Guide.

Resources

  • ARIA Practices: Detailed ARIA guidance for accessible web content focusing on text inputs.
  • A11y Style Guide: Outlines essential principles for accessible inputs and textareas.
  • W3C Forms Tutorial: Provides guidance on creating accessible forms.
  • DigitalA11y Project: Showcases live examples of accessible inputs of various types.

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)