27. Field label is not visible

3.3.2

Visible label incorrect example

Description: The input field does not have a visible label indicating the purpose of the input field.

Context: An input field should always have it’s label visible if it is visible. For fields where this isn’t desirable, an ARIA-label is preferred.

<label for="edit-submitted-email" style="transition: none 0s ease 0s;">Email Address</label>
<input class="email form-text form-email" placeholder="Sign up for our newsletter" type="email" id="edit-submitted-email" name="submitted[email]" size="60">

How to fix it: A visible label helps with predictability for all types of users.

<input class="email form-text form-email" aria-label="Newsletter email" placeholder="Sign up for our newsletter" type="email" id="edit-submitted-email" name="submitted[email]" size="60">

Techniques: G162