Text Fields

Success Criteria:

Description Label describes input
Role Identifies itself as a text input
Relationships for="input-id" is required in the label
State required, disabled
Focus Visibly focusable with tab key / swipe
Action Standard text editing keys

Keyboard & Screenreader Support

Standard single line text editing keys Keys used for cursor movement and text manipulation, such as Delete and Shift + Right Arrow. An HTML input with type="text" is used for the textbox so the browser will provide platform-specific editing keys.

Native Element

Description

  • Label inner text should describe the radio input.
  • aria-describedby="description-id" for additional descriptions

Role

  • Indicates it is a text input

Relationships

  • for="input-id" connects the input to its label

State

  • required
  • disabled

Focus

  • Visibly focusable with the tab key / swipe

Actions

  • Standard single line text editing keys