Связать label и checkbox без 'for=id': решение для IE

Быстрый ответ

Для связывания checkbox и его label без применения for и id следует разместить флажок внутри самого тега label, как показано ниже:

<label><input type="checkbox"> Отметьте здесь</label>

Теперь, при нажатии на текст метки, вы сможете менять состояние чекбокса.

Повышение удобства использования с помощью CSS

Связывание метки и чекбокса — это только первый шаг. Для улучшения пользовательского взаимодействия можно применить CSS:

• Сделайте метки более привлекательными, добавив курсор руки:

  CSS

  Скопировать код

  label {
    cursor: pointer; /* курсор в форме руки при наведении */
  }

• Отображайте метки активированных чекбоксов жирным шрифтом, используя соседние селекторы в CSS:

  CSS

  Скопировать код

  input[type="checkbox"]:checked + label {
    font-weight: bold; /* делаем текст активных меток жирным */
  }

• Скрывайте чекбоксы, оставляя метки в поле зрения, что будет полезно при создании кастомизированных чекбоксов:

  CSS

  Скопировать код

  input[type="checkbox"] {
    position: absolute;
    left: -9999px; /* чекбокс теперь невидим */
  }

Создание индивидуального дизайна чекбоксов

Если вам не подходят стандартные чекбоксы и потребуется создать собственный дизайн:

• Вместо стандартного вида используйте псевдоэлементы или изображения.

• Свяжите скрытый чекбокс со стилизованными метками:

  HTML

  Скопировать код

  <label>
    <input type="checkbox" style="position: absolute; left: -9999px;">
    <span class="custom-checkbox"></span> Отметьте здесь
  </label>

  CSS

  Скопировать код

  .custom-checkbox {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('checkbox-unchecked.svg') no-repeat; /* внешний вид неактивного пользовательского чекбокса */
    cursor: pointer;
  }
  input[type="checkbox"]:checked + .custom-checkbox {
    background: url('checkbox-checked.svg') no-repeat; /* изображение активного чекбокса */
  }

Работа с атрибутом name

Атрибут name не влияет на связывание чекбокса с меткой, однако он необходим для группировки чекбоксов. Одно и то же имя name объединяет набор элементов в группу:

<form>
  <label><input type="checkbox" name="interests" value="coding"> Программирование</label>
  <label><input type="checkbox" name="interests" value="design"> Дизайн</label>
</form>

При таком подходе на сервер будет отправлен массив, отражающий выбор пользователя.

Содействие доступности

Неявная связь будет эффективна при стандартном использовании, однако для обеспечения доступности лучше использовать for:

• Это поможет программам для чтения с экрана лучше понять связь между элементами.
• Некоторые вспомогательные технологии зависят от явной связи для корректной работы.

Устранение проблем совместимости браузеров

В различных браузерах user controls могут отображаться по-разному. Поэтому:

• Проверяйте внешний вид сайта в разных браузерах, включая IE, Firefox, Chrome и Safari.
• Стремитесь обеспечить одинаковый пользовательский опыт для пользователей, работающих как с мышью, так и с клавиатурой.

Инструменты вроде Can I use... помогут проверить работоспособность CSS-свойств и элементов HTML.

Визуализация

Можно представить, что чекбокс — это сундук с сокровищами (🧰), а метка — это карта (🗺️), которая к нему приведет.

Без использования "for=id":

🗺️ ➡️ 🏝️ ... ❓ 🧰 (Метка и чекбокс остались на острове, но путь между ними не определен)

При вложении метки в чекбокс:

🗺️🤝🧰 (Карта и сундук с сокровищами всегда вместе, что подчеркивает их связь)

Так же как карта намекает на свою цель, включение метки в чекбокс создает ясную связь.

Тестирование функционала

Пригодность решения определяется его эффективностью. Необходимо:

• Создать прототип формы.
• Проверить ее функционирование на разных устройствах и в разных браузерах.
• Использовать JsFiddle или аналогичные сервисы для оценки решения и получения обратной связи.

Тщательное тестирование поможет избежать проблем с удобством использования после запуска.

Полезные материалы

1. <label>: Элемент Label – HTML: Язык гипертекстовой разметки | MDN — подробное руководство от MDN по использованию элемента <label>.
2. Метки элементов управления | Инициатива по веб-доступности (WAI) | W3C — рекомендации по явному связыванию элементов форм и меток.
3. html – Стоит ли помещать элементы ввода внутрь элемента label? – Stack Overflow — обсуждение на Stack Overflow преимуществ и недостатков вложения элементов ввода в тег label.
4. H44: Использование элементов label для ассоциации текстовых меток с элементами форм | Техники для WCAG 2.0 — методика W3C по связыванию текстовых меток с элементами форм.
5. WebAIM: Создание доступных форм – Доступные элементы управления форм — руководство по созданию доступных форм, в том числе с чекбоксами.
6. Понимание критерия успеха 3.3.2: Метки или инструкции | WAI | W3C — разъяснение W3C необходимости меток и инструкций для пользовательского ввода.