Доступные радиокнопки и флажки

Радиокнопки и флажки — одни из самых простых элементов HTML и одни из самых часто ломаемых в магазинах, потому что дизайнеры хотят собственные образцы цвета, переключатели и «чипы» фильтров. На этой странице показано, как сохранить их доступными. Она входит в серию доступных UI-паттернов.

Когда что использовать

В APG группа радиокнопок описана как набор отмечаемых кнопок, где «одновременно может быть отмечено не больше одной кнопки», а флажки — как двухсостоянные (отмечен или нет) или трёхсостоянные, с дополнительным состоянием «частично отмечен» — например «Выбрать все», когда выбрана только часть элементов.

Применимые критерии WCAG

• 1.3.1 Информация и взаимосвязи (A): группа и её вопрос должны быть в коде, а не только в раскладке.
• 3.3.2 Подписи или инструкции (A): у каждого варианта есть подпись; у группы есть вопрос.
• 4.1.2 Имя, роль, значение (A): роль, имя и состояние «отмечено» доступны.
• 2.1.1 Клавиатура (A) и 2.4.7 Видимый фокус (AA).
• 1.4.11 Контраст нетекстового контента (AA): квадрат или круг и состояние «отмечено» требуют контраста 3:1.
• 2.5.8 Размер цели (минимальный) (AA): кликабельная подпись увеличивает цель.
• 3.2.2 При вводе данных (A): выбор варианта не должен неожиданно менять контекст, например перезагружать страницу на другую страну.

Пример кода

<fieldset>
  <legend>Способ доставки</legend>

  <input type="radio" id="ship-courier" name="shipping" value="courier" checked>
  <label for="ship-courier">Курьер, 1–2 дня, 6,90 €</label>

  <input type="radio" id="ship-locker" name="shipping" value="locker">
  <label for="ship-locker">Постамат, 2–3 дня, 3,90 €</label>
</fieldset>

<fieldset>
  <legend>Цвет</legend>
  <!-- Swatches: the real input stays, only its look changes -->
  <input type="radio" id="c-navy" name="colour" value="navy" class="swatch-input">
  <label for="c-navy" class="swatch" style="--swatch:#1f2a44">Тёмно-синий</label>
</fieldset>

<input type="checkbox" id="terms" name="terms" required>
<label for="terms">Я принимаю <a href="/ru/terms">условия</a></label>

Замечания:

• fieldset и legend — это техника W3C H71. В ней сказано, что они важнее всего для радиокнопок и флажков с общим именем поля и не обязательны, когда отдельные подписи уже делают вопрос ясным.
• Для образцов цвета оставляйте в подписи текст «Тёмно-синий» (при необходимости визуально скрытый), чтобы цвет не передавался только цветом.
• Визуально скрывайте нативный input приёмом с обрезкой (clip), но никогда через display: none или visibility: hidden: они убирают его для клавиатуры и экранных дикторов. Сделайте так, чтобы контур фокуса был виден на подписи, когда фокус на input.
• Если вы делаете собственный элемент без нативного input, шаблон APG использует role="radiogroup" с дочерними role="radio" или role="checkbox", aria-checked (true, false и для флажков mixed), подпись для группы и полную поддержку клавиатуры, которую пишете вы. Нативный input намного проще.

Работа с клавиатуры

Из шаблонов группы радиокнопок и флажка в APG:

В панели инструментов, как отмечает APG, стрелки перемещают фокус, не меняя отмеченный вариант, а пробел его отмечает.

Частые ошибки в интернет-магазинах

• Образцы цвета и размера, сделанные из div или span с обработчиками щелчка — нет роли, нет клавиатуры, нет состояния.
• Нативный input скрыт через display: none за красиво оформленной подписью.
• Фильтры-флажки, перезагружающие страницу при каждом щелчке без предупреждения и переносящие фокус в начало.
• Группы без вопроса: радиокнопки «Да / Нет», вопрос которых — только визуальный заголовок.
• Отмеченное состояние показано лишь тонкой сменой цвета границы с низким контрастом или только цветом на образцах.
• Текст «Я принимаю условия» не связан с флажком, так что щелчок по тексту ничего не делает, а экранный диктор зачитывает «флажок, не отмечен» без имени.
• Крошечные цели флажков в списках фильтров на мобильном.

Что находит автоматика и что остаётся для ручной проверки

Все они — карточки в нашей библиотеке правил. Ручная проверка нужна для работы с клавиатуры (стрелки в группах, пробел), видимого фокуса на собственных образцах, контраста квадрата и состояния «отмечено» (1.4.11), наличия у каждой группы ясного вопроса и того, не меняет ли выбор варианта контекст. С нетекстовым контрастом поможет инструмент проверки контраста.

Проверьте страницу товара бесплатной проверкой одной страницы. Это автоматическая проверка, а не полный аудит.

Частые вопросы

Когда использовать радиокнопки, а когда флажки?

Радиокнопки — когда из группы можно выбрать ровно один вариант, например способ доставки. Флажки — когда каждый вариант может быть включён или выключен сам по себе, например фильтры или «Я принимаю условия».

Нужны ли радиокнопкам fieldset и legend?

Обычно да. Техника W3C H71 говорит, что fieldset и legend важнее всего для радиокнопок и флажков, у которых один общий вопрос, потому что отдельные подписи не сообщают, в чём вопрос. Не требуется, если подписей самих по себе достаточно.

Как пользователи клавиатуры работают с группой радиокнопок?

Tab входит в группу и выходит из неё, клавиши со стрелками перемещают между вариантами и выбирают их, а пробел выбирает вариант в фокусе. Так ведут себя нативные радиокнопки и шаблон группы радиокнопок из APG.

Можно ли использовать флажки с собственным оформлением?

Да, если настоящий input остаётся на странице и меняется только его внешний вид. Если скрыть input через display none и нарисовать вместо него div, элемент пропадёт для клавиатуры и экранных дикторов.

Может ли автоматическая проверка проверить радиокнопки и флажки?

Она находит поля без подписи, собственные флажки без имени и поля с несколькими подписями. Есть ли у группы ясный вопрос и работает ли собственный элемент с клавиатуры, она сказать не может.

Источники

• W3C WAI, APG Radio Group pattern: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
• W3C WAI, APG Checkbox pattern: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
• W3C, Technique H71 fieldset and legend: https://www.w3.org/WAI/WCAG22/Techniques/html/H71