Advanced form labeling (accessible forms)

Keeping in mind accessibility when creating forms is very important. Here are some tips to advanced labeling of the form fields.

Accessible form validation

• https://medium.com/@lsnrae/accessible-form-validation-9fa637ddb0fc
• Accessible form demo: https://codepen.io/lsnrae/pen/pdBRNo

Multiple fields

With one label

• https://webaim.org/techniques/forms/advanced#multiple

<th id="namelabel" scope="col">Name</th>
<input type="text" name="name1" aria-labelledby="namelabel">
<input type="text" name="name2" aria-labelledby="namelabel">

With multiple labels

<input type="text" name="office1" aria-labelledby="cyndi officenum">

aria-describedby (hint, tooltip)

<label for="resetpass">Reset Password:</label>
<input type="password" id="resetpass" aria-describedby="pwnote"><br>
<span id="pwnote">New password must be 8-15 characters and include letters and numbers.</span>

Fieldset and legend

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

When reading the above form, a screen reader will speak “Fruit juice size small” for the first widget, “Fruit juice size medium” for the second, and “Fruit juice size large” for the third.

MDN

Handling error messages

Place error message into the label field.

<p>
  <label for="fname">First Name:<span class="reqField">*</span><span class="element-invisible" id="fnameErrorHidden">You must enter your first name.</span></label><br>
  <input id="fname" type="text" name="textfield">
  <span class="errorMsg" id="fnameError">&nbsp;You must enter your first name.</span>
</p>

Futher reading

• More user-friendly form inputs
• Placeholder research

Share

Thanks for reading. If you liked it, consider sharing it with friends via:

https://www.damianwajer.com/blog/advanced-form-labels-accessible-forms/

Let's be in touch!

Don't miss other useful posts. Level up your skills with useful UX, web development, and productivity tips via e-mail.

Don't you want to subscribe via e-mail?

See other ways to keep in touch.