Component Library

Text entry fields are not labeled, or use <placeholder> text instead of labels.

Placeholder text provides instructions or an example of the required data format inside form fields that have not yet been edited by the user. Placeholder text is usually displayed with lower color contrast than text provided by users, and it disappears from form fields when users start entering text.

While placeholder text provides valuable guidance for many users, placeholder text is not a replacement for labels. Assistive technologies, such as screen readers, do not treat placeholder text as labels, nor is it broadly supported across assistive technologies, and not displayed in older web browsers.

Hidden labels can be used to hide information visually but keep it available to assistive technology if necessary, and can be used to avoid visual redundancy of displaying both labels and placeholder text.

While <placeholder> text provides valuable guidance for many users, browser support is inconsistent. Placeholder text is meant to be supplemental to form field labels, not a replacement for them.

Add a label instead of placeholder to form controls, even if using the same text, as the label is more important to users of assistive technology than the <placeholder> text that may not be exposed to all user agents.

Ensure placeholder text has sufficient contrast.

https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-text