Tab

Tabbing into a text field moves focus into the field and selects the existing text.

Shift + Tab

Moves focus to the previous focusable element.

Printable characters

Inserts text at the caret position.

Left / Right Arrow

Moves caret one character left/right.

Home / End

Moves caret to start/end of field value.

Backspace / Delete

Removes character before/after caret.

Ctrl / Cmd + A

Selects all text.

Enter

Submits the enclosing form or triggers the form’s default action (implementation/context dependent).

Text

Use over the field to indicate to the user that text is editable within the field.

Pointer

Any clickable control that is part of the text field (e.g., clear/reveal/help icon) uses the pointer cursor.

Non-text content

A

Non-text elements, such as icons used inside text fields (e.g., validation, clear, or affordance icons), must provide a text alternative that communicates their purpose. All text fields need an accessible name so screen readers can announce their function.

Info and relationships, Identify purpose

1.3.1, 1.3.6

A, AAA

Text fields and their labels, descriptions, and error messages should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized.

Contrast

AA

The visual presentation of text has a contrast ratio of at least 4.5:1.

Resize text

AA

Text fields can be resized up to 200% without loss of content or functionality and without assistive technology.

Visual presentation

AAA

The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.

Non-text contrast

AA

The visual presentation of illustrations, icons, and component states have a contrast ratio of at least 3:1. Not applicable for empty fields.

Text spacing

AA

Line height of text is at least 1.5x the font size.

Requirement

Criterion

Level

Keyboard

2.1.1, 2.1.3

A, AAA

All functionality of the component is operable through a keyboard without specific timing for keystrokes.

Keyboard traps

A

Focus can be moved away from the component using only a keyboard.

Seizures and physical reactions

2.3.1, 2.3.2, 2.3.3

A, AAA, AAA

There is no flashing content or unnecessary motion or animation in this component.

Focus order

A

Navigation sequences receive focus in an order that preserves meaning and operability.

Focus visible

AA

Keyboard states use an indicator that is visible with at least 3:1 contrast.