Доступность Html множественного выбора элементов

В нашем веб-приложении у нас есть форма поиска, которая содержит поле, для которого пользователь может выбрать один или несколько ответов из списка возможных параметров. В настоящее время мы используем элемент "select" html с атрибутом "multiple", как показано в следующем примере:

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>

Ответы

Ответ 1

Вместо этого используйте флажки. Все флажки с тем же именем - одна группа (в данном случае 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>

Ответ 2

Флажки - это, безусловно, предпочтительный вариант, , но это не все, что вам нужно сделать.

Да, вам нужно связать ярлык с каждым элементом, но если у вас есть общий ярлык, например "С кем вы дружите?" вам нужно связать это с группой флажков в целом. Это делается с помощью fieldset и 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>

Ответ 3

Это может быть не в тему, но если вы уже используете jQuery, то есть этот select2 плагин, который вы можете и дает пользователю отчет о том, какие параметры в данный момент выбраны.

Если вы используете prototype.js, тогда этот chosen плагин, который в значительной степени похож на вышеупомянутый "select2", In факт выбора select2 был выбран из выбранного, и вы также можете использовать выбранный с помощью jQuery.

Плюсы: -

Хорошая достойная обратная связь с пользователем по выбранным параметрам.
Для очень длинного списка параметров предусмотрена функция поиска/автозаполнения.

Минусы: -

Если вы еще не используете jQuery, то потребность/служебные данные должны включать библиотеку, а затем ее плагин.
Может не работать/создавать конфликт с какой-либо другой библиотекой.