For WCAG AA standard when marking up a <label> element near <select> element, does the <label> element need to be visible?

Question

Yes, the label element needs to be visible. There is no pixel recommendation regarding its placement, but it is crucial that it is visually associated with the control (like the select element here). After all, probably over 99% of visitors will use common graphic browsers, and many visitors will have cognitive or other difficulties in understanding the structure of a form.

You should use the WCAG 2.0 recommendation and associated documents, rather than some accessibility checker, as the basic reference. In particular, the “Understanding WCAG 2.0” document says, at H44: Using label elements to associate text labels with form controls: “This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2, the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field.”

Criterion 3.3.2 says: “Labels or instructions are provided when content requires user input.” Obviously, they are not “provided” if they are not visible to a person who uses vision-based browsing (that is, most of us).

The WCAG 2.0 document also say that due to problems in some browsers, an “explicit” label element (i.e., a label element with a for attribute) is preferable to “implicit” (label element that contains the control it is associated with it). It’s also more logical: a control is not part of its label.