Form accessibility
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | jquery.validate.js | jquery.validate.min.js | coc.forms.js | coc.forms.min.js
Functional grouping: Forms
Labels
All form inputs should have an associated <label> tag with the for attribute the same value as the id attribute 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
<!-- Text input -->
<label for="{{ Input id }}">{{ Label }}</label>
<input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control">
<!-- Checkbox -->
<div class="form-group form-check">
<input id="{{ Input id }}" name="{{ Input name }}" type="checkbox" class="form-check-input" value="{{ Value }}">
<label for="{{ Input id }}" class="form-check-label">{{ Label }}</label>
</div>
<!-- Radio -->
<div class="form-group">
<div class="form-check">
<input id="{{ Input id }}" name="{{ Input name }}" type="radio" class="form-check-input" value="{{ Value }}">
<label for="{{ Input id }}" class="form-check-label">{{ Label }}</label>
</div>
<div class="form-check">
<input id="{{ Input id }}" name="{{ Input name }}" type="radio" class="form-check-input" value="{{ Value }}">
<label for="{{ Input id }}" class="form-check-label">{{ Label }}</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 end of the associating <label> tag. Although there are numerous ways to visually mark a field as being required, this method has been chosen due to accessibility considerations. Other methods used around the web may involve the use of asterisks or psuedo classes however these methods may not work with screen readers.
Example
<label for="{{ Input id }}">{{ Label }} <span class="label-required">(required)</span></label>
<input id="{{ Input id }}" name="{{ Input 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) text from the <label>s and provide a general message at the top of the form.
With this method, each input still needs the required and aria-required="true" attributes applied to them.
Example
<form class="form-width-md">
<p class="label-required">All fields are required.</p>
<div class="form-group">
<label for="{{ Input id }}">{{ Label }}</label>
<input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control" aria-required="true" required>
</div>
<div class="form-group">
<label for="{{ Input id }}">{{ Label }}</label>
<input id="{{ Input id }}" name="{{ Input 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
Some inputs may require additional instruction, examples, or helper text to all help the user fill them in. 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 text when the user focuses or enters the control.
Example
<label for="{{ Input id }}">{{ Label }}</label>
<input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control" aria-describedby="{{ Helper text id }}">
<p id="{{ Helper text id }}" class="form-text">{{ Helper text }}</p>
Placeholder text
For better usability, the placeholder attribute should not be used for form inputs. When placeholder text is used, it is harder to scan fields that are complete versus fields that still need to be filled in. Users may mistake the placeholder text as pre-populated values and skip filling in the field.
Additionally, the guidance that placeholders may provide becomes lost once the user starts to input something into the field. Guidance or helper text should be displayed separately outside of the input so it remains visible as the user is filling in the field. 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.