Form accessibility

Labels

All form inputs should have an associated label tag with the for attribute pointing to the ID of the input. The for attribute links the label tag with the input tag. When the label is clicked, the browser will automatically apply focus to the associated input.

Example:


<label for="first-name">First Name</label>
<input id="first-name" name="first-name" type="text" class="form-control">

<div class="form-group form-check">
    <input id="acc-check" name="acc-check" type="checkbox" class="form-check-input" value="1">
    <label for="acc-check" class="form-check-label">Click this label text to toggle the checkbox</label>
</div>

<div class="form-group">
    <div class="form-check">
        <input id="acc-radio-1" name="acc-radio" type="radio" class="form-check-input" value="1">
        <label for="acc-radio-1" class="form-check-label">Click this label text to select the radio</label>
    </div>
    <div class="form-check">
        <input id="acc-radio-2" name="acc-radio" type="radio" class="form-check-input" value="2">
        <label for="acc-radio-2" class="form-check-label">Or click this label text to select the radio</label>
    </div>
</div>

Required fields

For accessibility, both the required and aria-required="true" attributes should be applied to all required form fields. This is necessary as the newer HTML5 required attribute may not be compatible with older screen readers and accessibility devices.

Labels for required fields

To visually label the required input fields, add <span class="label-required">(required)</span> to the associating <label> tag. Although there are numerous ways to visually mark a field as being required, this method has been chosen due to its accessibility. Using asterisks or psuedo classes may not work with screen readers.

Example of a required field:


<label for="req-first-name">First Name <span class="label-required">(required)</span></label>
<input id="req-first-name" name="first-name" type="text" class="form-control" aria-required="true" required>

When all inputs are required

When all inputs in your form are required, to reduce visual clutter, you may remove the “(required)” string from all <label>s and provide a general message at the top of the form. Example below:


<form class="form-width-md">
    <p>All fields are required.</p>
    <div class="form-group">
        <label for="req-first-name">First Name</label>
        <input id="req-first-name" name="first-name" type="text" class="form-control" aria-required="true" required>
    </div>
    <div class="form-group">
        <label for="req-first-name">First Name</label>
        <input id="req-first-name" name="first-name" type="text" class="form-control" aria-required="true" required>
    </div>
    <div class="form-group">
        <button class="cui btn-md primary">Submit</button>
    </div>
</form>

Helper text

Helper text can be structured and styled with <p class="form-text">.

Helper text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.


<label for="help-ex">Example input with helper text</label>
<input id="help-ex" name="help-ex" type="text" class="form-control" aria-describedby="t-help-ex">
<p id="t-help-ex" class="form-text">This is an example of some helper text that should give more information to the user on how to fill in the form field.</p>

Placeholder text

For better usability, placeholder attribute should not be used in form controls. When placeholder text is used, it is harder to scan fields that are complete versus fields that still need to be populated. Users may mistake the placeholder text as pre-populated values and skip filling in the field.

Additionally, the guidance that placeholders may provide will become lost once the user inputs something into the field. Guidance or helper text should be written separately outside of the input. See the helper text section for more details.

See this article from Neilson Normal Group for more examples of how placeholder text in form fields may be harmful to the user experience.

Information This site is moving

Note