Web accessibility service pageWeb accessibility service page

12.3:H212102 Categorize long list of selection items.

Improper design

The OPTGROUP element was not used in the SELECT label to categorize selected items, making it longer to find selected item list.

Improper design:

<FORM>
  <LABEL>product</LABEL>
  <SELECT>
    <OPTION selected>cheese bread</OPTION>
    <OPTION>pineapple bread</OPTION>
    <OPTION>strawberry bread</OPTION>
    <OPTION>pudding bread</OPTION>
    <OPTION>butter pudding cake</OPTION>
    <OPTION>ice cream cake</OPTION>
    <OPTION>fruit cake</OPTION>
  </SELECT>
  </FORM> 
          

Proper demonstration

Set OPTGROUP element in the SELECT label to categorized the selected items helps users to find the item list faster.

Proper example:

<FORM>
  <LABEL>product</LABEL>
  <SELECT>
    <OPTGROUP label="bread">
      <OPTION selected>cheese bread</OPTION>
      <OPTION>pineapple bread</OPTION>
      <OPTION>strawberry bread</OPTION>
      <OPTION>pudding bread</OPTION>
    </OPTGROUP>
    <OPTGROUP label="cake">
      <OPTION>butter pudding cake</OPTION>
      <OPTION>ice cream cake</OPTION>
      <OPTION>fruit cake</OPTION>
    </OPTGROUP>
  </SELECT>
</FORM> 
          
End of Main Content