Forms – Single Select Box

• Single select box or drop-down list is used in forms to make users select any one option from the list of given options.
• A descriptive visual label MUST be placed above or to the left of the single select box.
• A single select box can be identified by a downward pointing arrow provided within the field.
  • The arrow image SHOULD NOT be defined through CSS background-image property.
  • The color contrast requirement of 3:1 ratio MUST be met with the adjacent color for downward pointing arrow.
• Color requirements MUST be met for the visual label or instructions if any as mentioned in the “Label placement and structure” component.
  Note: The color contrast requirement does not apply to the options when native HTML element is used to define the single select box in any state.
• The contrast requirement of 3:1 ratio MUST be met with the adjacent colors for custom borders.
• The contrast requirement of 3:1 ratio MUST be met with the adjacent colors for the custom focus indicator of the single select box.
  • In case of custom focus indicator wherein the background color of the option text is changed, then contrast requirement of 4.5:1 ratio MUST be met considering standard text size of option against the background color.
• A single select box MUST NOT automatically move away from the current page with an OnChange event as soon as an option is selected because it will break keyboard functionality.
  • Ideally, a “Go” or “Submit” or an equivalent button SHOULD be provided to submit the selected option in case a change of content or context will happen.
• In the case of single select box wherein selecting any option results in appearance of new form fields after the single select box, an OnChange event CAN be used without providing any instructions.
  • If the new form fields appear before the single select box, then an instruction SHOULD be provided for the screen reader users. For example, “Selecting an option from the “Country” dropdown will add additional fields above the dropdown”.

Native HTML is the preferred method of implementing a single select box.

• The single select box is defined using native HTML <select> element.
• A descriptive and programmatic label MUST be provided for the single select box. See “Label placement and structure” component for more information on labelling.
• In case of any additional instructions to be provided for single select box see “Label placement and structure” component for more information.
• Each option is defined using <option> element within the <select> element.
• The options can be grouped using <optgroup> element within the <select> element.
• For more information on additional requirements for form fields, see “Input Structure” component.

Example of a single select box:

<label for="tfa_11">Country</label>
<select aria-required="true" id="tfa_11" name="tfa_11" class="required">
   <option value="">Please select...</option>
   <option value="tfa_37" id="tfa_37" class="">Afghanistan</option>
   <option value="tfa_38" id="tfa_38" class="">Albania</option>
   <option value="tfa_39" id="tfa_39" class="">Algeria</option>
   <option value="tfa_40" id="tfa_40" class="">Andorra</option>
</select>

Example of a single select box with grouped options

<label for="grp">Groups</label>
<select id="grp">
   <optgroup label="Group A">
      <option>Option 1.1</option>
   </optgroup>
   <optgroup label="Group B">
      <option>Option 2.1</option>
      <option>Option 2.2</option>
   </optgroup>
   <optgroup label="Group C" disabled>
      <option>Option 3.1</option>
      <option>Option 3.2</option>
      <option>Option 3.3</option>
   </optgroup>
</select>

Though ARIA can be used as an alternative, it is advisable to use correct semantic HTML element since native elements have built-in keyboard accessibility, roles and states.

• The single select box MUST be defined using role="combobox" on the parent neutral container such as <div> element.
• To provide an accessible name for the single select box, aria-label attribute SHOULD be used in absence of visual label text.
  Alternatively, in case where visual text is present, an aria-labelledby attribute MUST be used by referencing the value of id attribute of the visible text.
• The aria-controls attribute MUST be provided to the parent neutral container such as <div> element containing the role="combobox". It references the value of id attribute provided for the parent neutral container such as <div> element containing the options.
• The aria-activedescendant attribute MUST be provided to the parent neutral container such as <div> element containing the role="combobox".
  • Using JavaScript, change the value of aria-activedescendant attribute to the id attribute value of the current focused option when Up and Down arrow keys are used to traverse through the available options.
• The aria-expanded attribute MUST be provided for the combobox to define its state. The default value of this attribute SHOULD be set to false as the combobox is in collapsed state. The value SHOULD be updated to true when the combobox is in expanded state.
• The parent neutral container such as <div> element having role="combobox" MUST be provided tabindex="0" attribute.
• The neutral container such as <div> element containing the list of options MUST be provided with role="listbox".
• Appropriate JavaScript event handlers SHOULD be used to make the combobox accessible by keyboard and mouse.
• Each of the individual neutral containers such as <div> element containing the options SHOULD be marked with role="option".
• The aria-haspopup="listbox" CAN be provided on the parent neutral container such as <div> element containing the role="combobox".
• The aria-selected="true" SHOULD be used when an option is visually selected in the combobox.

For example,

<span id="combo-lbl">Country</span>
<div aria-controls="listbox1" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="combo-lbl" id="combo1" role="combobox" tabindex="0">
    Please select...
</div>
<div role="listbox" id="listbox1" aria-labelledby="combo-lbl" tabindex="-1">
    <div role="option" id="combo1-0" class="combo-option option-current" aria-selected="true">Please select...</div>
    <div role="option" id="combo1-1" aria-selected="false"> Afghanistan</div>
    <div role="option" id="combo1-2" aria-selected="false"> Albania</div>
    <div role="option" id="combo1-3" aria-selected="false"> Algeria</div>
    <div role="option" id="combo1-4" aria-selected="false"> Andorra</div>
</div>

Note: aria-activedescendant="" can be used to indicate the selected item on some browsers where focus remains on the combobox in the DOM implementation. For browsers that do not keep focus on the comboxbox aria-activedescendant may not be necessary. If you are including it to provide cross-broswer support, validating your code will display an error for an empty value.

A well-defined single select box benefits majorly the below users.

• People with cognitive disabilities
• People using speech input
• People with limited dexterity
• People using screen readers
• People using keyboard only
• People using screen readers