Html multiple select element accessibility

Question

In our web application we have a search form which contains a field for which a user can select one or more answers from a list of possible options. We currently use the "select" html element with the "multiple" attribute set as in the example below:

select {
  width: 150px;
}

<select multiple>
  <option value="A">Alice</option>
  <option value="B">Bob</option>
  <option value="F">Fred</option>
  <option value="K">Kevin</option>
  <option value="M">Mary</option>
  <option value="S">Susan</option>
</select>

Feedback from user testing has shown that this solution is confusing for users. Multiple selection/deselection is performed by holding down the Ctrl key (on windows), however many users were unaware of this.

The element also does not seem to allow for easy use when using just a keyboard - this is obviously an accessibility issue.

Is there a "best practice", accessible way of displaying an input with multiple options to a user?

Answer 1

Use checkboxes instead. All checkboxes with the same name are one group (in this case names).

.row {
  display:block;
}

<fieldset>
  <legend>Select the Names</legend>
  <div class="row">
    <input type="checkbox" id="names_A" name="names[]" value="A" />
    <label for="names_A">Alice</label>
  </div>
  <div class="row">
    <input type="checkbox" id="names_B" name="names[]" value="B" />
    <label for="names_B">Bob</label>
  </div>
  <div class="row">
    <input type="checkbox" id="names_F" name="names[]" value="F" />
    <label for="names_F">Fred</label>
  </div>
  <div class="row">
    <input type="checkbox" id="names_K" name="names[]" value="K" />
    <label for="names_K">Kevin</label>
  </div>
  <div class="row">
    <input type="checkbox" id="names_M" name="names[]" value="M" />
    <label for="names_M">Mary</label>
  </div>
  <div class="row">
    <input type="checkbox" id="names_S" name="names[]" value="S" />
    <label for="names_S">Susan</label>
  </div>
</fieldset>

Explanation:
Every checkbox with the same name and the following brackets ([]) is on the same group (in the example names[]). If you enable one or more checkboxes the value of each selected checkbox will be submited. You get the array with all values with $names = $_POST['names'];. If you select Alice and Kevin you get an array with the following content.

Array ( [0] => A [1] => K )

The code to get the result array (on the post target site):

<?php
$names = $_POST['names']);
print_r($names);

If you don't select any checkbox of the group names the $_POST['names'] is undefined.

Answer 2

Checkboxes is definitely the preferred option here, but it's not all you need to do.

Yes, you need to associate the label with each item, but if you have an overall label such as "Who are you friends with?" you need to associate that with the group of checkboxes overall. This is done with a fieldset and legend.

<fieldset>
   <legend>Who are you friends with?</legend>
   <input type="checkbox" id="alice"><label for="alice">Alice</label><br/>
   <input type="checkbox" id="bob"><label for="bob">Bob</label>
</fieldset>