Differences

This shows you the differences between two versions of the page.

--- accessibility:forms:labels [2023/08/07 18:48] – created scl
+++ accessibility:forms:labels [2024/09/02 11:15] (current) – Add link to WebAIM examples sandbergja
@@ Line 1: / Line 1: @@
 ======Form Labels ======
-**Form fields must have an associated label.** There are no exceptions to this rule. 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.
+**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.