Form controls
Form controls allow users to enter information into a page.
Accessibility
As you customize form controls from this library, be sure they continue to meet the following accessibility requirements:
- All form control tags should have an associated label. The labels for attribute value should match the related input
idattribute and should also be unique to the entire page. For example, the input withid=will always have a label with"delicious-ramen" for=. This way screen readers are able to perceive the relevant content."delicious-ramen" - Any additional information — such as required, optional, or example text — should be wrapped within the label tags. For example:
<label for=. This way screen readers know what additional information is related to each field."name">Favorite Pie <span>Optional</span></label> - Do not replace
<input>tag-based form controls with styled<div>tags, or use JavaScript to create 'fake' form controls. Screen readers have a difficult time reading form controls that are not written in semantic HTML. - If you adjust the color scheme of the buttons, ensure a minimum contrast ratio of 4.5:1 (for small text, 3:1 for large) for all states of the button. This includes default, hover, selected, and disabled.
- Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
- Display form controls in the same order in HTML as they do on screen. Do not use CSS to rearrange the form controls. Screen readers narrate forms in the order they appear in the HTML.
- Group each set of thematically related controls in a fieldset element. Use the legend element to offer a label within each one. The fieldset and legend elements make it easier for screen reader users to navigate the form.
- A single legend is always required for fieldset. A common use of fieldset and legend is a question with radio button options for answers. The question text and radio buttons are wrapped in a fieldset, with the question itself being inside the legend tag.
- You can embed multiple fieldsets and legends for more complex forms.
Error Handling
- Only show error validation messages or stylings after a user has interacted with a particular field.
- When a validation error is detected, aria-invalid="true" should be set to each invalid form element. This attribute causes screen readers to identify the control as being "invalid" or in need of attention.
- All required fields should have the aria-required attribute.
Text inputs
Text inputs allow people to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted). Text input boxes can span single or multiple lines.
Text Input
Text Area
Error Handling
All error messages should be tagged with role="alert".
Character Restriction
In order to mitigate customer data entry mistakes, we can use a lightweight JQuery plugin called Alphanum. It allows us to set character restrictions for text inputs that have specific requirements (only letters and/or numbers for example). There's also the ability to customize these restrictions.
$(input).alpha();
$(input).numeric();
$(input).alphanum();
Accessibility
If you customize the text inputs, ensure they continue to meet the the accessibility requirements that apply to all form controls.
- Avoid using placeholder text to label a form element. Most browsers’ default rendering of placeholder text does not provide a high enough contrast ratio.
- Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three (one for area code, one for local code, and one for number). Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful.
- If character restriction is applied, this needs to be disclosed to disabled customers using screen readers when entering characters excluded from the input.
Dropdown
A dropdown allows users to select one option from a list.
Accessibility
If you customize the dropdown, ensure it continues to meet the the accessibility requirements that apply to all form controls.
- Make sure your dropdown has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the dropdown read “Select a state” by default).
- Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them. Offer a “submit” button at the end of the form instead. Users often change their choices multiple times. Auto-submission is also less accessible.
Checkboxes
Checkboxes allow users to select one or more options from a visible list.
Accessibility
If you customize the text inputs, ensure they continue to meet the the accessibility requirements that apply to all form controls.
- Surround a related set of checkboxes with a
<fieldset>. The<legend>provides context for the grouping. Do not use fieldset and legend for a single check. - The custom checkboxes here are accessible to screen readers because the default checkboxes are moved off-screen with
position: absolute; left: -999em. - Each input should have a semantic
idattribute, and its corresponding label should have the same value in it’sforattribute. - The
titleattribute can replace<label>. - Users should be able to tap on or click on either the text label or the checkbox to select or deselect an option.
Toggle Switch
Toggle switches are a 1-click activation/deactivation control for a service or feature.
- Cheeseburger ModeThe palatable sensation we lovingly refer to as The Cheeseburger has a distinguished and illustrious history. Get one every day.
Accessibility
If you customize the text inputs, ensure they continue to meet the the accessibility requirements that apply to all form controls.
- All toggle switches should use
role="switch"attribute. - Each input should have a semantic
idattribute, and its corresponding label should have the same value in it’sforattribute. - The
titleattribute can replace<label>. - Users should be able to tap on or click on either the text label or the checkbox to select or deselect an option.
Radio buttons
Radio buttons allow users to see all available choices at once and select exactly one option.
Accessibility
If you customize the radio buttons, ensure they continue to meet the the accessibility requirements that apply to all form controls.
- Group related radio buttons together with
<fieldset>and describe the group with<legend>. - Each radio button should have a
<label>. Associate the two by matching the<label>’s for attribute to the<input>’sidattribute. - The
titleattribute can replace<label>. - Users should be able to tap on or click on either the text "label" or the radio button to select or deselect an option.