======Form Labels ======

**Form fields must have an associated label.** There are no exceptions to this rule.

The best way to associate a label is with the HTML label element, such as in these [[https://webaim.org/techniques/forms/controls|examples from WebAIM]].

The label may be hidden using the ''sr-only'' (in Bootstrap 3-4) or ''visually-hidden'' (Bootstrap 5+) classes if the purpose of the field is absolutely clear to sighted users. However, keep cognitive disabilities in mind, and do not assume that users will remember a form label or instructions that appeared elsewhere on the page. It is always best to include a visible label for each form field, preferably just above the input or to the immediate left.

While it is possible to use ''aria-labelledby'' to indicate that a form’s label already exists elsewhere on the page, this pattern is prone to break when other developers move, rename, or hide adjacent elements in the future. It is always best to use a ''<label>'' tag.

Placeholders are not acceptable substitutes for ''<label>'' tags. [[https://adamsilver.io/blog/float-labels-are-problematic/|Floating labels are not a recommended design pattern]], even though Google and Microsoft both use them extensively.

You may wrap inputs in the ''<label>'' tag, but you should still use an explicit ''for'' attribute matching the input's ID due to inconsistent support in dictation software, particularly Dragon Naturally Speaking.

If there are additional instructions for a field, place them in a visible element above the input, and use ''aria-describedby'' to associate the element with the input’s ID. It’s fine to style these instructions as smaller text, as long as color contrast requirements are met. [[https://www.deque.com/blog/anatomy-of-accessible-forms-best-practices/|See “Provide Instructions” in Deque’s article on best practices for forms]]. 

Instructions and formatting hints should appear above the input, not below; otherwise screen reader users will not encounter them until after they have filled out the field. Dropdowns will obscure anything just below the input.

Title attributes are not read aloud by any screen reader, and should not be used to provide information about the form field. Some browsers no longer provide the small yellow tooltip that was once characteristic of title attributes; mobile browsers do not support these at all. A proper tooltip component must be used if tooltips are the only way to provide information. However, note that **persistent visible instructions are always better** than disappearing information for cognitive accessibility reasons, and that touchscreen users might find tooltips difficult to to activate, especially if the hit target is small.