Selects

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.

Select List

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.

Keyboard Operation

While dropdown is closed:

  • Tab = Select the next focusable element outside of the dropdown.
  • Shift + Tab = Select the previous focusable element outside of the dropdown.
  • Return/Enter/Space/Down Arrow = Open the dropdown with the first option selected.
  • Up Arrow = Open the dropdown with the last option selected.

While dropdown is open:

  • Down Arrow = Put the next option in focus.
  • Up Arrow = Put the previous option in focus.
  • Home = Scroll to the top and put the first option in focus.
  • End = Scroll to the bottom and put the last option in focus.
  • Return/Enter = Select the currently highlighted option and then close the dropdown.
  • Tab = Close the dropdown and select the next focusable element outside of it.
  • Shift + Tab = Close the dropdown and select the previous focusable element outside of it.
  • Esc = Select the first (default) option and close the dropdown.

Spin Box Select

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.

Keyboard Operation

While spin box is in focus:

  • Up Arrow = Increase the value.
  • Down Arrow = Decrease the value.
  • Home = Sets the value to its minimum, if any.
  • End = Sets the value to its maximum, if any.
  • Page Up (Optional) = Increase the value by a larger step than Up Arrow.
  • Page Down (Optional) = Decrease the value by a larger step than Down Arrow.

For the input field component:

  • Type characters within the input. Most implementations allow only certain characters as part of the value and prevent input of any other characters. For example, a clock would allow only integer values from 0 to 59, the colon ':', and the letters 'AM' and 'PM'.
  • Any non-allowed character input should not change the contents of the input field nor the value of the spin box.
  • Include standard keyboard operation for input, cursor movement, selection, and text manipulation.
  • Standard key assignments for editing functions are specific to the device operating system.
  • The most robust approach for providing text editing functions is to rely on browsers, which supply them for HTML inputs with type text and for elements with the contenteditable HTML attribute.
  • JavaScript should not interfere with browser-provided text editing functions by capturing key events for the keys used to perform them.

Date Select

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.

Keyboard Operation

While the datepicker calendar view is open:

  • Left = Move focus to the previous day. Will move to the last day of the previous month, if the current day is the first day of a month.
  • Right = Move focus to the next day. Will move to the first day of the following month, if the current day is the last day of a month.
  • Up = Move focus to the same day of the previous week. Will wrap to the appropriate day in the previous month.
  • Down = Move focus to the same day of the following week. Will wrap to the appropriate day in the following month.
  • PgUp = Move focus to the same date of the previous month. If that date does not exist, focus is placed on the last day of the month.
  • PgDn = Move focus to the same date of the following month. If that date does not exist, focus is placed on the last day of the month.
  • Alt+PgUp = Move focus to the same date of the previous year. If that date does not exist (e.g leap year), focus is placed on the last day of the month.
  • Alt+PgDn = Move focus to the same date of the following year. If that date does not exist (e.g leap year), focus is placed on the last day of the month.
  • Home = Move to the first day of the month.
  • End = Move to the last day of the month
  • Tab / Shift+Tab = If the datepicker is in modal mode, navigate between the calander grid and the close/previous/next selection buttons, otherwise move to the field following/preceding the input field associated with the datepicker
  • Enter / Space = Fill the input field with the selected date and then close the datepicker widget.
  • Escape = Close the datepicker without making a selection.

Do's and Don'ts

Types

Variants

Common Button Labels and Usage

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.

Button Label:
Corresponding Action:
Add to Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign In/Sign Out
View Details
Ok/Cancel
Learn More
Close
Takes users to Cart page, with item added
Used for search buttons
Takes users back to entry point for a task
Used to save an item
Navigates users to change an item
Deletes an item on the page, usually with a verification step
Used as progression
Used as forward and backward navigation (Next is primary, Previous is secondary)
Used to submit a task or info
Used for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used instead of “Select” in cases of product details or within learn content
For use in modal verification steps when more specific CTAs will not fit due to space
Used to link users to more learning content or contextual help
Used within modal windows

Select Lists

Standard Select List

<div class="dds__form-group"> <label for="exampleFormControlSelect3">Example select title</label> <select class="dds__form-control" id="exampleFormControlSelect3"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option disabled="">Option 5 (disabled example)</option> </select> </div>

Disabled Select List

<div class="dds__form-group"> <label for="exampleFormControlSelectDisabled">Example select title</label> <select class="dds__form-control" id="exampleFormControlSelectDisabled" disabled=""> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div>

No items found.

No items found.

No items found.

Redlines

Select List

Select list redlines

A minimum touch target of 34 pixels in height should be used to assist with touchscreen interaction.

The aria-current attribute is used when an element is visually styled to indicate it's the current item in the set. For example, the current date within a calendar. Do not use the aria-current attribute as a substitute for aria-selected in components.

Select List

Dropdown menus should not open when using the tab key to navigate, as keyboard users would then have to step through all submenu items to get to the next form component. Instead, consider using the parent of the dropdown, or a button within it, as a toggle.

Avoiding very long option names facilitates understandability and perceivability for screen reader users. Long names inhibit perception by increasing the impact of interrupted speech because users typically have to re-read the entire option.

Avoid options that start with the same word or phrase because scrolling through the list to find a specific option requires screen reader users to listen to that word or phrase repeated before hearing what is unique. In such scenarios, it's better to use two select lists (one for selecting the first part and another for selecting the sub-option).

Roles

The menu role should be used when a dropdown (list of menu items) is presented.

The option role should be used for every child of the parent listbox.

Elements with the role listbox have an implicit aria-orientation value of vertical.

Attributes

The aria-haspopup="listbox" attribute indicates that activating the select list button displays a listbox.

The aria-haspopup="true" attribute allows the screen reader to vocalize that a Select List is a drop-down menu. This is set by JavaScript when the listbox is displayed, otherwise it's not present.

The aria-expanded attribute, with a true/false value, allows screen readers to vocalize menu states (open or closed).

The aria-labelledby="ID_REF" attribute refers to the element containing the listbox label.

The aria-activedescendant="ID_REF" attribute is an alternative method for managing focus set by JavaScript when it displays and sets focus on the listbox (otherwise it's not present). This refers to the option in the listbox that has keyboard focus. When navigation keys are pressed, JavaScript changes the value. Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the ul element.

The aria-selected="true" attribute is applied to the option that is visually styled as selected. The option with this attribute is the same as the one referenced by aria-activedescendant in the case of a single-select listbox.

The aria-selected="false" attribute is applied to all options that may still be selected.

Do not use the aria-selected attribute on options that can't be selected (such as disabled options).

Change the visual state of the option in focus (for example, inverting colors). This provides visual guidance when navigating the menu.

Multi-Select Lists

The aria-multiselectable attribute indicates whether the user may select more than one option from the dropdown.

Checkboxes are more accessible than using shortcut keys for selecting multiple options within a single dropdown.

When Tab key moves focus into the list, if none of the options are selected, then focus is set on the first option. Otherwise, focus is set on the first selected option.

Toggle Select

Buttons support the optional attribute aria-pressed. If the attribute is not present, the button is a simple command button.

Buttons with a non-empty aria-pressed attribute are toggle buttons.

Toggle buttons require a full press-and-release cycle to change their value. Activating it once changes the value of aria-pressed to true, and activating it another time changes the value of aria-pressed to false.

The label on a toggle should not change when its state changes. For example, when the pressed state for a Mute button is true, the label remains "Mute" so a screen reader would say something like "Mute toggle button pressed". Alternatively, if the label must change (ex: from "Mute" to "Unmute"), then the aria-pressed attribute would not be needed.

Spin Box Select

The input field is usually the only focusable component of a spin box because the increment and decrement functions are keyboard accessible via arrow keys. When a spin box select receives focus, ensure focus is placed on the input element if one is present, and on the spin box select itself otherwise.

The focusable element serving as the spin box has role spinbutton.

Users should be able to modify the value, without exceeding its range, through the use of the up and down arrow buttons on the keyboard.

You may create a spin box select with children or owned elements, but must limit those elements to an input and/or two buttons.

To be keyboard accessible, manage focus of descendants for all instances of this role.

Do not include contained button elements in the primary navigation ring (e.g., the Tab ring in HTML) because they are superfluous for people using keyboard devices.

The spin box has the aria-valuenow property set to a decimal value representing the current value of the spin box.

The spin box has the aria-valuemin property set to a decimal value representing the minimum allowed value of the spin box, if it has a known minimum value.

The spin box has the aria-valuemax property set to a decimal value representing the maximum allowed value of the spin button, if it has a known maximum value.

If the minimum and maximum values are missing or not a number, then the implicit values of these attributes are as follows:

  • The implicit value of aria-valuemin is that there is no minimum value.
  • The implicit value of aria-valuemax is that there is no maximum value.
  • The implicit value of aria-valuenow is 0.

If the value of aria-valuenow is not user-friendly (i.e. the day of the week is represented by a number), then the aria-valuetext property is set on the spin box to a string that makes it understandable, such as "Monday".

If the spin box has a visible label, it is referenced by aria-labelledby on the spinbutton element. Otherwise, the spin box has a label provided by aria-label.

The spin box has aria-invalid set to true if the value is outside the allowed range. Note that most implementations prevent input of invalid values, but in some scenarios, blocking all invalid input may not be practical.

Date Select

A date token is used to indicate the current date within a calendar.

It's not necessary to specify a value of aria-readonly for the collection of links that comprise a date select calendar.

Don’t hide the datepicker button from screen readers using aria-hidden=”true”. Some users use a combination of sight and screen reader, so hiding the datepicker button and calendar view for screen readers would harm their UX.

Use aria-label to ensure that buttons and icons in the calendar view are correctly read by screen readers. For example, the first day of a month should not be “1” but rather something like “1 January, Thursday”.

Related Resources