Floating Label Accessibility

Best Practices

Every control must have a visible label whose for value matches the control ID. The label must remain visible when the control has focus or a value.

Placeholder text is optional guidance, not a substitute for the label. Invalid controls must use aria-invalid="true" and reference a visible error message.

Interaction Design

Keyboard

TAB moves focus to the form control. The floating label does not add another tab stop.

Screen Reader

A screen reader announces the label, control role, value, and applicable disabled or invalid state.

Pointer

Clicking or tapping the label moves focus to its associated control.

ARIA Reference

Further Reading

• Textbox
• Form Validation