Form Fields | University IT

Must haves

Programmatically labeled via <label> with for/id, aria-label, or aria-labelledby
Persistently visually labeled - don’t rely on placeholder that disappears when text is entered.
Any field constraints are clearly communicated and programmatically associated with the field (either included in the label or associated with aria-describedby)
Groups of related fields are contained in a <fieldset> with an associated <legend>
If an error state can be triggered, and inline error messages are added, they are programmatically associated with the field using aria-describedby
If an error state can be triggered, focus moves to the first field in error (or if an error summary is added at the top of the form, move focus there).

Do	Don't
`<p>Fields marked with * are required</p>` `<label for=”fname”>* First Name</label>` `<input type=”text” id=”fname” required>` `<label for=”lname”>* Last Name</label>` `<input type=”text” id=”lname” required>` `<fieldset>` `<legend>Field(s) of Interest</legend>` `<input id="field1" type="checkbox">` `<label for="field1">Accounting</label>` `<input id="field2" type="checkbox">` `<label for="field2">Economic Analysis & Policy</label>` `</fieldset>`	`<input type=”text” placeholder=”First Name”>` `<input type=”text” placeholder=”Last Name”>` `<div>` `<div>Field(s) of Interest</div>` `<input type="checkbox">` `<label>Accounting</label>` `<input type="checkbox">` `<label>Economic Analysis & Policy</label>` `</div>` Here the text inputs are only labeled by `placeholder` text, which will disappear as soon as someone fills the field out. The checkboxes are not programmatically labeled because they are not associated with the `<label>` elements with `for` and `id` attributes. The checkboxes are not correctly grouped in a `<fieldset>` with `<legend>`.