Флажки HTML5: какой элемент должен иметь атрибут aria-describedby

В настоящее время я пишу пользовательский интерфейс для страницы поиска в локальном приложении. Этот поиск должен иметь флажки, чтобы ограничить область поискового запроса. Чтобы сделать эту функциональность доступной, я хочу использовать атрибуты «wai-aria».

Пока моя разметка выглядит так:

<div class="input-group">
  <div class="checkbox-inline">
    <input type="checkbox" id="check-bd-1">
    <label for="check-bd-1">Band 1</label>
  </div>

  <div class="checkbox-inline">
    <input type="checkbox" id="check-bd-2"></input>
    <label for="check-bd-2">Band 2</label>
  </div>

  (... and so on...)

  <p id="help-check-band" class="form-control-static">Helptext...</p>
</div>

Я хочу использовать атрибут "aria-describedby" для ссылки на текст справки, обозначенный "help-check-band". Этот текст подходит для каждого входа этой группы.

Мой вопрос: где я должен поместить атрибут «aria-describedby»? Нужно ли ставить его на каждый <input> элемент, или достаточно поместить его в самый верхний div (с классом "input-group")?


person Mathias Vonende    schedule 20.02.2015    source источник


Ответы (1)


Согласно Mozilla Dev-Network оба пути кажутся возможными. «aria-describedby» может использоваться контейнером и элементами ввода. Поскольку атрибуты input-элемента напрямую соответствуют функциональным возможностям, этот способ подходит для данного случая.

person Mathias Vonende    schedule 23.02.2015