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> 

Answer 3

This may be off topic, but if you are already using jQuery then there is this select2 plugin for it that you can use, and it gives a clear feedback to the user which options are currently selected.

If you are using prototype.js then theres this chosen plugin that is pretty much similar to the above mentioned "select2", In fact the select2 was forked from chosen, and you can also use chosen with jQuery .

Pros:-

• A good decent feedback to the user on the options selected.
• For a very long list of options, provides a search/autocomplete functionality.

Cons:-

• If not already using jQuery then the need/overhead to include a library and then its plugin.
• May not work/create conflict with any other library.