HTML-кнопки-переключатели, которые конвертируются: полное руководство

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

В этом руководстве показано, как правильно делать радиоприемники в 2025 году: быстро выбирать, легко сканировать, полностью доступно и измеримо. Мы начнем с чистой семантической базовой линии, а затем наложим современный CSS, чтобы радиостанции могли выглядеть как карточки или сегментированные элементы управления, не нарушая при этом работу клавиатуры или программы чтения с экрана.

Вы увидите практические шаблоны проверки, которые не раздражают, адаптивные макеты, позволяющие добиться больших целей на мобильных устройствах, а также рабочие фрагменты, которые можно вставить в любой стек. Мы также рассмотрим аналитику, идеи A/B и настройку Formspree, чтобы вы могли немедленно получать результаты.

Для кого это: дизайнеры, интерфейсные разработчики и маркетологи, которым важно и то, и другоедоступностьипреобразование. Никаких тяжелых фреймворков не требуется, только надежный HTML, целенаправленный CSS и небольшие прогрессивные улучшения.

К концу вы узнаете:

• Когда радиоприемники превосходят выборы, флажки или переключатели
• Как создать доступную радиогруппу (набор полей,легенда, маркировка, фокус)
• Как стилизовать пользовательские радиоприемники «карточки», не скрывая ввод
• Как выполнить проверку с помощью HTML Constraint API (и правильно отправить сообщение)
• Как подключить радиостанции к Formspree и измерить выделение

ТЛ;ДР

• Используйтерадиоприемникировноодинвыбор из четко определенного набора (в идеале2–6 вариантов), который должен бытьвидно сразу.
• Всегда заключайте радиостанции в<набор полей>+<легенда>, дайте имто же самоеимяи сделайте каждый варианткликабельно<метка>.
• Не скрывайте входные данные с помощьюотображение: нет; держи ихфокусируемый(например,непрозрачность:0; позиция:абсолютная; вставка:0), поэтомуTab/Стрелки/Пробелработа.
• Сделайте цели большими: как минимум44×44px, скольцо фокусировкиэто хорошо видно.
• Подтвердите с помощьюAPI ограничений HTML(требуется,reportValidity()), затем улучшайте сообщения, а не наоборот.
• Если у вас много вариантов или они вам незнакомы, добавьтевспомогательный текстпод каждой меткой и рассмотримпоиск или группировкавместо.
• На мобильном устройстве добавьтеодин столбец; на широких экранах,2–3 столбцачерез CSS-сетку.
• Мера: отслеживатьпоказы, выбор и отправкаи A/B-тестзаказ опционаикопировать.
• Для Formspree сохранитеродной POSTкак запасной вариант; добавитьпринеститолько как прогрессивное улучшение.

Когда использовать радиосвязь (дерево решений)

Вопрос 1. Пользователь выбирает только один вариант?

• Нет →Используйтефлажки(0–много) илипереключить(бинарный) или переосмыслить задачу.
• Да →Перейти к вопросу 2.

В2. Должны ли варианты быть видны с первого взгляда?

• Да →Используйтерадиоприемники(лучше всего подходит для сканирования и быстрого выбора).
• Нет (мало места/много вариантов)→ Рассмотримвыбрать(падать). Если выбор имеет решающее значение и сравнение приносит пользу, отдайте предпочтение радиоприемникам и измените дизайн компоновки.

Вопрос 3. Сколько вариантов?

• 2–6→ Радио идеально.
• 7–10→ Радиостанции по-прежнему могут работать с группировкой илидвух��олоночныйсетка; в противном случае используйте список выбора или список с возможностью поиска.
• >10→ Используйтевыбрать с помощью поискаилишагэто в первую очередь сужает набор.

Воп��ос 4. Являются ли варианты взаимоисключающими государствами?

• Да →Радио.
• Нет / комбинации имеют смысл →Флажки.

Вопрос 5. Будет ли этот выбор вызывать различные дополнительные вопросы?

• Да →Радио по-прежнему в порядке. Показать продолженияусловно, но оставьте скрытые поляпорядок вне вкладкии поток СР, пока не будет выявлен.
• Нет →Простая радиогруппа.

Вопрос 6. Знакомое или описательное?

• Знакомые этикетки(например, «Маленький/Средний/Большой») → достаточно коротких надписей.
• Незнакомое или высокие ставки(например, «Техническое SEO против контентного SEO») → добавитьмикрокопия(однострочное описание) под каждой этикеткой.

Вопрос 7. Мобильные устройства?

• Да (всегда)→ Использоватьстек в один столбецс большим интервалом и текстом размером 16–18 пикселей. Продвигайтесамый популярныйвариант вверху.

Практические примеры

• Ваша форма: «Какой сервис?» → Радио лучше, чем выбор, потому что пользователям приходится сравнивать варианты одновременно. Держите 3 карточки (создание ссылок, SEO, веб-разработка) с коротким подтекстом.
• Скорость доставки: 3–4 взаимоисключающие скорости → Радио (с разницей цен в подтексте).
• Частота новостной рассылки: Ежедневно/Еженедельно/Ежемесячно → Радио.
• Интересы (можно выбрать несколько)→ Не радио; используйте флажки.

Анатомия правильной радиогруппы

Копирование и вставка семантической базовой линии (пока нет сложного CSS)

Какая услуга вам нужна?

Выберите один вариант, который лучше всего соответствует вашей цели.



<метка>

Построение ссылок


<метка>

Поисковая оптимизация


<метка>

Веб-дизайн/разработка




Пожалуйста, выберите услугу, чтобы продолжить.



Продолжить

Почему каждая часть важна

• <набор полей>+<легенда>дает группе имя для программ чтения с экрана и задает контекст для всех.
• То жеимяделает входы взаимоисключающими.
• Кликабельно<метка>вокруг каждого входадает вам огромную область касания и щелчка (44 пикселя+).
• требуетсяна первом радиопозволяет браузеру проверять группу самостоятельно.
• Вспомогательный текст(сервисная подсказка) итекст ошибки(service-error) являются отдельными, поэтому вы можете показывать/скрывать ошибки, не перемещая объекты.
• Никакие роли ARIA не нужны.Родные радио уже выставляют правильную семантику.

Минимальный CSS для удобства использования (собственный вид, большие цели, четкий фокус)

/* Расположение и интервалы */
метка .поля {
дисплей: гибкий;
выровнять-элементы: по центру;
разрыв: 0,6бэр;
заполнение: .65rem .8rem;      /* большая цель касания */
граница-радиус: .6rem;
курсор: указатель;
}

/* Фокус клавиатуры: выделить всю метку, когда ввод сфокусирован */
.field label:has(input:focus-visible) {
контур: 3 пикселя, сплошной #3b82f6;
смещение контура: 2 пикселя;
}

/* Выбранное состояние (необязательно, собственная точка все еще отображается) */
.field label:has(input:checked) {
фон: #f1f5ff;
}

/* Текст ошибки */
.error { цвет: #b91c1c; маржа-верх: .5rem; размер шрифта: .9rem; }

Совет::хас()дает вам «кольцо фокусировки на всей карте», не скрывая реального ввода. Если старый браузер его не поддерживает, пользователи по-прежнему получают родное кольцо фокусировки на самом радио.

Мягкая и доступная проверка (сначала используется браузер)

Позвольте браузеру обработать часть «вы долж��ы выбрать один», а затем, если необходимо, отобразите встроенную ошибку.

const form = document.getElementById('quote-form');
const group = document.getElementById('service-group');
const error = document.getEementById('service-error');

form.addEventListener('submit', (e) => {
// Запускаем встроенный пользовательский интерфейс проверки (работает, потому что первое радио требует `required`)
if (!form.reportValidity()) {
// Необязательно: также отображаем дружественную встроенную ошибку
error.hidden = false;
group.setAttribute('aria-invalid', 'true');
e.preventDefault();
error.hidden = true
group.removeAttribute('aria-invalid');
Поведение, которое вы должны ожидать (и проверять):
Клавиатура:
Нажмите один раз, чтобы войти в группу; использовать

Клавиши со стрелками

• двигаться;Космосвыбирает.Программы чтения с экрана:Легенда читается как метка группы; каждая опция объявляется со статусом «выбран/не выбран».Касание:
• Нажатие на метку переключает радио (благодаря переносу меток).Радиоприемники в индивидуальном стиле (без нарушения доступности)
• Копировать и вставить HTML Tapping the label toggles the radio (thanks to label wrapping).

Custom-Styled “Card” Radios (without breaking accessibility)

Copy-paste HTML

<набор полей>
Выбрать план

Выберите один вариант. Вы можете измениться в любое время.





Стартер
Подходит для небольших сайтов




Рост
Самые популярные




Профессионал
Расширенные функции



Выберите один, чтобы продолжить.

Минимальный, надежный CSS

:корень{
--бренд:#0b5cff; --кольцо: rgba(11,92,255,.35);
--border:#e5e7eb; --bg:#fff; --muted:#6b7280;
--радиус: 14 пикселей;
}

/* Сетка */
.card-группа{
дисплей: сетка; разрыв: 16 пикселей;
столбцы-шаблона сетки: повторение (3, minmax (0,1fr));
}
@media (max-width:900px){ .card-group{grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .card-group{grid-template-columns:1fr; } }

/* Метка карты */
.карта{
положение: родственник;
дисплей: сетка; место-элементы: центр; выравнивание текста: по центру;
разрыв: 6 пикселей; отступ: 18 пикселей;
граница: 1 пиксель сплошной var (--border); граница-радиус: вар (--радиус);
фон: вар (--bg);
курсор: указатель; выбор пользователя: нет;
переход: box-shadow .15с, border-color .15с, преобразование .02с;
}
.card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.06); }

/* Сохраняем фокус на встроенном вводе: no display:none */
.карточный ввод{
позиция: абсолютная; вставка: 0; непрозрачность: 0;
}

/* Кольцо фокусировки клавиатуры на всей карте */
.card:has(input:focus-visible){
box-shadow:0 0 0 3px var(--ring);
цвет границы: var (--бренд);
}

/* Выбранное состояние */
.card:has(input:checked){
цвет границы: var (--бренд);
box-shadow:0 0 0 3px var(--ring);
}

/* Содержимое */
.card-title{font-weight:700; цвет: № 111; }
.card-sub{размер шрифта: 14 пикселей; цвет: вар (-- приглушен); }

/* Текст ошибки */
.error{ цвет:#b91c1c; маржа-верх:.5rem; размер шрифта: .9rem; }

Замечания по поведению (почему этот шаблон работает)

• Нетотображение: нетпри вводе → пользователи клавиатуры могут использовать Tab;Клавиши со стрелкамивыбор перемещения;Космосвыбирает.
• Вся карточка кликабельна, потому что ввод находится внутриэтикетка.
• :хас()давайте стилизуемфокусипровереносостояния на родительской карте без взломов ARIA.
• Адаптивная сетка дает1–3 столбцаавтоматически; цели касания остаются большими.

Необязательно: щадящая проверка (сначала нативная)

const form = document.getElementById('plan');
const err = document.getElementById('plan-error');

form.addEventListener('submit', (e) => {
if (!form.reportValidity()) { // использует `required` на первом радио
err.hidden = false;
e.preventDefault();
} else {
err.hidden = true;
}
});

Стратегии проверки, которые не раздражают

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

Принципы

• Родной в первую очередь.Пусть HTML-дескриптор «необходимо выбрать один».
• Отложить ошибки.Не кричите на пользователей, пока они не попытаются продолжить.
• Укажите на проблему.Сообщайте об ошибках, разумно перемещайте фокус и делайте текст коротким.
• Ясно об изменении.Как только будет сделан правильный выбор, устраните ошибку.

Базовый уровень (только встроенный)

Только HTML может обеспечить соблюдение этого правила с помощьютребуетсяна одном радио в группе.

Какая услуга вам нужна?

Выберите один вариант.


<метка>

Построение ссылок

<метка>

Поисковая оптимизация

<метка>

Веб-дизайн/разработка

Это уже дает вам: стрелки на клавиатуре, пробел для выбора и проверку на уровне браузера.

Дружественные встроенные ошибки (прогрессивное улучшение)

Отключите всплывающее окно браузера и обрабатывайте сообщения онлайн, чтобы они соответствовали вашему дизайну.

HTML (добавьте область ошибки)

Выберите один вариант.


Продолжить

CSS (простой стиль)

.error { цвет:#b91c1c; маржа-верх:.5rem; размер шрифта: .9rem; }

JS (отложить ошибки, объявить правильно)

const form = document.getElementById('quote');
const group = document.getElementById('svc');
const err = document.getElementById('svc-err');
const radios = form.querySelectorAll('input[name="service"]');

пусть попыталась = ложь; // показывать ошибки только после того, как пользователь попытается продолжить

функция hasSelection() {
return [...radios].some(r => r.checked);
}

function showError(msg='Пожалуйста, выберите один вариант.') {
err.textContent = сообщение;
ошибка.скрытый = ложь;
group.setAttribute('aria-invalid', 'true');
// Добавляем ошибку к описанию, чтобы SR объявили об этом следующим
group.setAttribute('aria-describedby', 'svc-hint svc-err');
}

функция ClearError() {
ошибка.скрытый = правда;
group.removeAttribute('aria-invalid');
group.setAttribute('aria-describedby', 'svc-hint');
}

form.addEventListener('submit', (e) => {
попытка = true;
if (!hasSelection()) {
e.preventDefault();
showError();
// Выводим группу в поле зрения и помещаем фокус на первое радио
radios[0].focus();
group.scrollIntoView({ поведение: 'smooth', блок: 'center' });
} еще {
очиститьОшибку ()
});
// Не ворчите раньше времени; ясно, как только они что-то выберут

radios.forEach(r => {
r.addEventListener('change', () => {
if (попытка)clearError();
});
});
Почему это работает

Нет всплывающих подсказок браузера; пользователи видят ошибки

• встроенныйрядом с группой.Программы чтения с экрана слышат
• легенда, тоошибка, благодаряария-описана.Ошибки только появляются
• послепопытка отправки (или при возврате к исправлению).Бережная поэтапная проверка (многоэтапные формы)

Если вы выполняете вход с помощью кнопки «Далее», подтвердите только этот шаг.

document.getElementById('nextBtn').addEventListener('click', () => {

if (!hasSelection()) {
showError();
} else {
clearError();
// переход к следующему шагу...
}
});
Пользовательские сообщения с помощью Constraint API (необязательно)

Если вы предпочитаете сохранить модель достоверности браузера, установите собственное сообщение в

первыйрадио в группе.const firstRadio = радио[0];

form.addEventListener('submit', (e) => {
if (!hasSelection()) {
firstRadio.setCustomValidity('Пожалуйс��а, выберите один вариант.');
// Запускаем собственный пользовательский интерфейс; или вызываем form.reportValidity()
e.preventDefault();
form.reportValidity();
} else {
firstRadio.setCustomValidity('');
}
  }
Используйте это, если вам нужен собственный «пузырь» плюс собственный текст, в противном случае придерживайтесь встроенного метода, описанного выше, для единообразного пользовательского интерфейса.

Сводка ошибок (для длинных форм)

Если ваша форма длинная, добавьте

верхнее резюмеэто связано с проблемной областью.

Возникла проблема: Выберите услугу.

const sum = document.getElementById('error-summary');
сумма.скрытый = ложь;
sum.querySelector('a').focus(); // SR объявляют тревогу
}
Резервные варианты на стороне сервера и в сети

Проверка на стороне клиента улучшает UX, но

всегдатакже проверьте на сервере (или в вашей службе отправки). Если отправка не удалась, верните страницу с: validate on the server (or by your submission service) too. If submission fails, return the page with:

• Предыдущийвыбор сохраняетсяи
• The та же самая встроенная ошибкарядом с группой.

Интеграция Formspree (прогрессивное улучшение)

Заставьте радио ��аботать даже в случае сбоя JavaScript, а затем улучшите его для более плавного выражения благодарности и улучшения аналитики.

Собственный HTML (всегда работает)

<форма
id="цитата"
action="https://formspree.io/f/your_form_id"
метод="POST"
>
<набор полей>
Какая услуга вам нужна?

Выберите один вариант.




Создание ссылок
Зарабатывайте качественные обратные ссылки.




Поисковая оптимизация
Повысьте рейтинг и трафик.




Веб-дизайн/разработка
Быстрые сайты, ориентированные на мобильные устройства.



<метка>
Полное имя



<метка>
Электронная почта









Получить мое бесплатное предложение

Что-то пошло не так. Пожалуйста, попробуйте еще раз.

Спасибо! Мы свяжемся с вами в ближайшее время.

Что это вам дает:

• Работает с выключенным JS (хорошо для SEO, надежность).
• Браузер обрабатывает «необходимо выбрать один» (требуетсяна первом радио).
• Formspree получаетсервис,имя,электронная почтаи_субъект.

Улучшение JS (приятный UX, лучшее отслеживание)

Перехватить отправку, проверить и отправить с помощьюпринестии покажите встроенное спасибо (или перенаправление).

<скрипт>
(function(){
const form = document.getElementById('quote');
const okMsg = document.getElementById('form-success');
const errMsg = document.getElementById('form-error');
const submitBtn = form.querySelector('button[type="submit"]');

// Необязательно: захват UTM + контекст страницы
function addMeta(fd){
const url = new URL(location.href); fd.append(k, v));
fd.append('page_url', location.href);
if (document.referrer) fd.append('referrer', document.referrer);
form.addEventListener('submit', async (e) => {
// Сохраняем собственный резервный вариант || e.preventDefault();
// Use native validity (includes radio required)
if (!form.reportValidity()) return;
const fd = new FormData(form);

// Don’t send honeypot if filled (treat as spam)
if (fd.get('company')) return; // silently drop bots
appendMeta(fd);

submitBtn.disabled = true;
const original = submitBtn.textContent = 'Отправка…';

okMsg.hidden = true;
const res = await fetch(form.action, {
метод: 'POST',
body: fd,

'Принять': 'application/json' }
if(res.ok){
form.reset()
    okMsg.hidden = true; errMsg.hidden = true;

    try{
      const res = await fetch(form.action, {
        method: 'POST',
        body: fd,
        headers: { 'Accept': 'application/json' }
      });

      if(res.ok){
        form.reset();
        okMsg.hidden = false;

        // Optional: fire analytics
if (window.gtag) gtag('event','generate_lead',{method:'formspree', service: fd.get('service')});

// Необязательно: перенаправление после успеха
// setTimeout(()=> location.href = '/спасибо/', 1200);
} еще {
errMsg.hidden = ложь;
}
} поймать {
errMsg.hidden = ложь;
} наконец {
submitBtn.disabled = ложь;
submitBtn.textContent = оригинал;
}
});
})();

Примечания

• УстановитьПринять: application/jsonпоэтому Formspree возвращает JSON, и вы можете четко определить успех/неуспех.
• Используйтеform.reportValidity()поэтому браузер принудительно выбирает радио и формат электронной почты перед отправкой.
• Сохранить роднойдействие/методпоэтому форма по-прежнему работает без JS.

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

• Приманка(включен выше) ловит множество ботов с нулевым трением.
• Время: добавить скрытоеначалось_вкогда страница загружается; игнорировать сообщения быстрее, чем, скажем, 2 секунды.
• Сигналы контента: если вы видите повторяющиеся ненужные значения, отфильтруйте их в правилах Formspree или постобработке.

<скрипт>
document.getElementById('started_at').value = Date.now();

// в обработчике отправки перед отправкой:
const start = Number(fd.get('started_at'));
if (Date.now() - началось <2000) return; // выглядит как бот

Тема письма, отражающая выбор радио (чистый почтовый ящик)

Вы можете адаптировать_субъектс выбранного радио:

const service = fd.get('service'); // например, "поисковая оптимизация"
fd.set('_subject', `Новый лид ${service} из контактной формы`);

Распространенные ошибки, которых следует избегать

• Скрытие радиоприемников с помощьюотображение: нет.Используйтенепрозрачность: 0; позиция: абсолютная; вставка:0внутри этикетки, чтобы клавиатура продолжала работать.
• Забывнабор полей/легенда.Программы чтения с экрана полагаются на них для определения контекста.
• Чрезмерная проверка на ранней стадии.Показывать ошибки после отправки/Далее, а затем очищать, как только пользователь исправит группу.
• Не улавливаю контекст.ДобавитьURL_страницы,реферери UTM-поля, вы поблагодарите себя позже.

Интернационализация и инклюзивность

Язык, ярлыки и тон

• Используйтестраницы язык(и переключать страницы для каждой локали): …
• Делайте ярлыки короткими иописательный, избегайте жаргона, специфичного для конкретной культуры.
• Предпочитаюнейтральныйформулировка («Выберите план») вместо предположений («Какой у вас бюджет?»).
• Локализоватьошибкиивспомогательный текстс простым словарем с ключомdocument.documentElement.lang.

константа i18n = {
ru: { Choose: 'Пожалуйста, выберите один вариант.' },
es: { Choose: 'Выберите вариант, пожалуйста.' },
ar: { select: 'يُرجى اختيار خيار واحد.' }
};
const t = (k) => (i18n[document.documentElement.lang] || i18n.en)[k];
errorEl.textContent = t('выбрать');

Длинные метки и многострочные опции

• Пусть меткиобертка; никогда не сокращайте важные слова.
• Сохраняйте область попадания большой даже при переносе текста: используйте отступыэтикетка, а не только ввод.

.card { встроенный размер: 100%; отступ: 16 пикселей; }
.card .card-title { шрифт-вес: 700; высота строки: 1,25; }
.card .card-sub {размер шрифта: 14 пикселей; высота строки: 1,4; }

Поддержка письма справа налево (RTL)

Используйте CSSлогические свойстваи:дир()поэтому вам не нужны отдельные стили.

/* Интервал, который автоматически переключается на RTL */
.card {padding-inline: 16px; отступ-блок: 16 пикселей; }

/* Кольцо фокусировки, учитывающее направление */
.card:has(input:focus-visible) {
контур: 3 пикселя сплошной var(--ring);
смещение контура: 2 пикселя;
}

/* Необязательно: настройки для конкретного направления */
:dir(rtl) .card-group { направление: rtl; }

Доступность за пределами ARIA

• Убедитесь, чтоконтраст ≥ 4,5:1для меток и состояний фокуса.
• Коснитесь цели ≥44×44 пикселей(отступы, а не размер шрифта).
• Не сообщайте о состоянии только по цвету; использоватьграницы, значки или текст.

Контрольный список тестирования (для печати)

• Семантика: Радио внутринабор полейс видимымлегенда.
• Клавиатура: Tab входит в группу;стрелкидвигаться;Космосвыбирает.
• Программы чтения с экрана: объявлена ​​легенда; каждая опция говорит о том, что выбрано/не выбрано.
• Фокус: Видимое кольцо нався карта(и на родном входе).
• Область попадания: Вся этикетка кликабельна; работает на мобильном телефоне.
• Проверка: ошибок нет до отправки/Далее; ошибки исчезают при изменении.
• Копировать: Опции короткие; вспомогательный текст поясняет различия.
• Макет: 1 колонка по телефонам; 2–3 на рабочем столе; нет обрезки переполнения.
• i18n: Ошибки/метки локализованы; д��инный текст изящно переносится; РТЛ ОК.
• Аналитика: События для показа, выберите, отправьте.
• Производительность: Никаких тяжелых библиотек пользовательского интерфейса; минимальный CSS; никакого смещения планировки.

Производительность и ремонтопригодность

• Благосклонностьвстроенные входы+ легкий CSS; избегайте замены радио на div.
• Сохраняйте модульность CSS (настраиваемые свойства для цветов, радиуса, кольца).
• Избегайтеотображение: нетна входах; использоватьнепрозрачность: 0; позиция: абсолютная; вставка:0поэтому доступность остается неизменной.
• Отложить некритичный JS; по возможности сохраняйте размер улучшений менее 2–5 КБ.
• Используйтеконтейнерные запросы(если доступно) вместо сложных точек останова мультимедиа для встроенных форм.

@container (минимальная ширина: 680 пикселей) {
.card-group {grid-template-columns: 1fr 1fr 1fr; }
}

Аналит��ка и экспериментирование

Отслеживайте намерения и точки разногласий:

// Срабатывает, когда радиогруппа становится видимой
gtag?.('event','form_step_view', {шаг: 1, форма: 'контакт' });

// Огонь при выборе
document.querySelectorAll('input[name="service"]').forEach(r => {
r.addEventListener('change', () => {
gtag?.('event','radio_select', { group: 'service', value: r.value });
});
});

// Срабатывает при успешной отправке
gtag?.('event','generate_lead', {form: 'contact', service: form.service.value });

A/B-тест:

• Ордер опциона(самый популярный)
• Копия призыва к действию(«Получите мое бесплатное предложение» или «Пол��чите мою цену»)
• Вспомогательный текстприсутствие

Антипаттерны (не делайте этого)

• Скрытие входных данных с помощьюотображение: нет(ломает клавиатуру и SR).
• Отсутствуетнабор полей/легенда.
• Крошечные области попадания (кликабельна только маленькая точка).
• Состояние выбора только цвета; невидимый фокус.
• Проверкадопользователь пытается продолжить.
• Упаковка 10–20 опций в рации; вместо этого используйте выбор с возможностью поиска.

Итоговый контрольный список

• набор полей+легенданастоящий
• То жеимя, уникальныйзначениес
• Метки оборачивают входные данные; вся карточка кликабельна
• Кольцо фокусировки хорошо видно
• требуетсяпо первому радио; нежные встроенные ошибки
• Адаптивная сетка из 1–3 столбцов, большие сенсорные объекты
• Локализованные строки; RTL безопасно через логические свойства
• Аналитика при просмотре/выборе/отправке
• Проверка на стороне сервера отражает правила клиента

Ресурсы

Спецификации и авторские шаблоны

• Стандарт HTML –: собственная семантика, группировка поимя, формировать поведение.
• Авторские практики WAI-ARIA 1.2 – Радиогруппа: ожидаемое поведение клавиатуры (вкладка Tab для перехода в группу,Стрелкадля перемещения,Пробелдля выбора), шаблоны маркировки.
• ВКАГ 2.2самое необходимое для радио:
  • 2.1.1Клавиатура(все работает с клавиатуры)
  • 2.4.7Фокус видимый(четко видимый фокус)
  • 2.5.5Целевой размер(рекомендуется ≥44×44 пикселей)
  • 1.4.3Контраст (Минимум)

Справочные руководства

• МДН: Радиовход,этикетка,набор полей/легенда, проверка формы (API проверки ограничений).
• Система проектирования GOV.UK – Радиоприемники: отличное, проверенное в боях руководство по формулировкам и ошибкам.
• Инклюзивные компоненты (Хейдон Пикеринг): практические примеры и критика.

Посетите наш недавний блог наКак найти возможности размещения гостевых публикаций на Ahrefs (пошаговое ру��оводство)

Тестирование и оснащение

• топор DevTools(расширение для браузера) – автоматические проверки a11y.
• Информация о доступности– быстрые тесты с подсказками.
• Маяк– сигналы производительности + доступности.
• Средство проверки контрастности WebAIM– проверьте цветовой контраст.
• Программы чтения с экранадля выборочной проверки реального поведения:
  • НВДА(Окна),ЧЕЛЮСТИ(Окна),Голос за кадром(macOS/iOS),Обратный разговор(Андроид).
• Ручной проход с клавиатуры: Tab внутри группы → Стрелки перемещаются → Пробел выбирает → кольцо фокусировки остается на виду.

Ознакомьтесь с нашимобзор Notions Marketing

Часто задаваемые вопросы (кратко и практично)