Form elements that are used to select one or more values from predefined data sets.
The values within a select list should be sorted in an easily scannable order (e.g. alphabetically or by popularity).
Most selects start with no selection other than a neutral default so that users are more aware of the decision.
By default, the first option in a select list is selected, and this is a neutral instruction such as "Choose one".
The <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in the list.
While dropdown is closed:
While dropdown is open:
Spin boxes are comprised of three components, including an editable input field that displays the current value, an increment button, and a decrement button.
It's advisable to use spin box select when working with known ranges (especially in the case of large ranges) as opposed to distinct options. For example, when selecting a range from 0 to 59 for setting the minutes values on a clock, it would perform better as a spin box rather than a lengthy select list.
If the range is large, a spin box may support changing the value in both small and large increments. In the clock example, the user may be able to move by 1 minute with Up Arrow and Down Arrow, and by 10 minutes with Page Up and Page Down.
While spin box is in focus:
For the input field component:
The date select consists of an input field and a datepicker component.
The datepicker should never be required for selecting a date. There should always be an input field for direct entry.
Ensure that the required format for the date is specified in the label.
It should be possible to select a date via keyboard. For example, by using tab to put the datepicker in focus and using arrow keys to pick the right date.
While the datepicker calendar view is open:
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
You may also refer to this article about creating accessible forms from WebAIM.
The A11Y Style Guide has excellent examples of markup for select lists.
Please follow the best practices for a listbox from WAI-ARIA authoring practices 1.1.
Please also refer to these recommendations for a listbox from WAI-ARIA 1.1.
You may refer to this example of a collapsible dropdown listbox from WAI-ARIA practices 1.1.
You may also refer to these tutorials for grouping items in select elements from Web Accessibility Tutorials.
The A11Y Style Guide has excellent examples of markup for select lists with grouping/tiers.
Please follow the best practices for a tree view from WAI-ARIA authoring practices 1.1.
Please also refer to these recommendations for trees from WAI-ARIA 1.1.
Please refer to the accessibility guidelines for checkboxes.
Please follow the best practices for a spinbutton from WAI-ARIA authoring practices 1.1.
Please also refer to these recommendations for a spinbutton from WAI-ARIA 1.1.
You may refer to this example of a date picker spin button from WAI-ARIA practices 1.1.
You may refer to this example of a date picker dialog from WAI-ARIA practices 1.1.