Always use a label. Use a hidden label, or a title or aria-label attribute when a visible text label is not needed.
Associate form labels with controls.
Never replace label with placeholder text.
Always specify the correct input type (e.g. date, email, tel, number)
Match for and id values that associate the label with its form control. Because id attribute values must be unique on each page, a form control can only have one associated label.
On required fields, use the required attribute. It causes screen readers to announce “required” and also triggers the browser to warn the user with a visual tooltip if the user leaves the field blank. Screen readers also announce the tooltip content, when it appears.
When performing form validation, apply the aria-invalid="true" attribute to a form control. It will cause screen readers to announce “invalid” when that control gets in focus.
Use aria-labelledby to overcome the 1:1 limitations of label.
Use aria-describedby (in addition to a label) to associate descriptive text to the form control.
Make sure the form is keyboard accessible: all input fields need to be focusable. The tab sequence needs to be logical and intuitive.
Do not rely on JavaScript alone for form submission, validation, and error recovery.
Alert the user of any validation errors in an apparent and accessible manner. Provide informative feedback messages.
Allow the user to easily access the form controls that need to be modified.
Allow resubmission and revalidation of the form information.
