Textbox Accessibility

Best Practices

Every textbox must have an associated visible label. Use a <label> element with a for attribute matching the input's id .

Placeholder text is not a substitute for a label. It disappears on input and has insufficient contrast. In cases where a visible label is not possible (e.g., search, phone input), use aria-label to provide an accessible name.

Icons inside textboxes are decorative and must use aria-hidden="true" . Icon buttons (e.g., clear button) must have an aria-label describing their action.

For validation errors, apply aria-invalid="true" to the input and associate an error message using aria-describedby .

Interaction Design

This section provides detailed instructions for how different input types should navigate and operate the pattern.

Keyboard

Pressing TAB key must move focus to the textbox input.

Likewise, pressing SHIFT-TAB key must move focus backwards.

When focused, arrow keys must navigate through the text. Backspace and delete keys must work as expected.

If an icon button is present, TAB key must move focus to the button. Pressing ENTER or SPACEBAR key must activate the button.

Screen Reader

A screen reader must announce the textbox label, its role (text field or text area), and current value.

When aria-invalid="true" is set, the screen reader must announce the invalid state. If aria-describedby references an error message, it must be announced.

Disabled and readonly states must be announced when the input receives focus.

Pointer

Clicking or tapping the textbox must place focus in the input. Clicking an icon button must activate the button.

ARIA Reference

Further Reading

• Input Meter
• Form Validation
• Input Validation