Botones de radio HTML que convierten: la guía definitiva

Los botones de radio parecen simples. Un clic, una elección. Sin embargo, también son una de las formas más fáciles de comprometer la UX y la accesibilidad. Oculte la entrada nativa, omita elconjunto de camposyleyenda, o valide de manera demasiado agresiva y enviará un formulario que confunde a los usuarios del teclado, frustra a los lectores de pantalla y altera las conversiones.

Esta guía le muestra cómo hacer radios correctamente en 2025: rápida de elegir, fácil de escanear, totalmente accesible y mensurable. Comenzaremos con una línea de base semántica limpia, luego aplicaremos capas de CSS moderno para que las radios puedan verse como tarjetas o controles segmentados sin alterar el comportamiento del teclado o del lector de pantalla.

Verá patrones de validación prácticos que no molestan, diseños responsivos que mantienen los objetivos grandes en dispositivos móviles y fragmentos de producción que puede pegar en cualquier pila. También cubriremos análisis, ideas A/B y una configuración de Formspree para que puedas capturar resultados de inmediato.

Para quién es: diseñadores, desarrolladores front-end y especialistas en marketing que se preocupan por ambosaccesibilidadyconversión. No se requieren marcos pesados, solo HTML sólido, CSS enfocado y una pequeña mejora progresiva.

Al final, sabrás:

• Cuando las radios pulsan selecciona, marca o alterna
• Cómo crear un grupo de radio accesible (conjunto de campos,leyenda, etiquetado, enfoque)
• Cómo diseñar radios de “tarjeta” personalizadas sin ocultar la entrada
• Cómo validar con la API de restricción HTML (y enviar mensajes)
• Cómo conectar radios a Formspree y medir selecciones

TL;DR

• Usoradiosexactamenteunoelección dentro de un conjunto bien definido (idealmente2–6 opciones) que debería servisible de inmediato.
• Siempre envuelva las radios en+, dales ello mismonombrey haga de cada opción unse puede hacer clic.
• No ocultes entradas convisualización: ninguna; guárdalosenfocable(por ejemplo,opacidad:0; posición:absoluta; recuadro:0) entoncesTabulador/Flechas/Espaciotrabajar.
• Haga que los objetivos sean grandes: al menos44×44px, con unanillo de enfoqueeso es claramente visible.
• Validar con elAPI de restricción HTML(requerido,reportValidity()), luego mejore los mensajes, no al revés.
• Si tiene muchas opciones o no le resultan familiares, agreguetexto de ayudadebajo de cada etiqueta y considerebuscar o agruparen cambio.
• En dispositivos móviles, apilaruna columna; en pantallas anchas,2–3 columnasa través de cuadrícula CSS.
• Medida: víaimpresiones, selección y envíoy prueba A/Borden de opcionesycopiar.
• Para Formspree, mantengaPUBLICACIÓN nativacomo alternativa; añadirbuscarsólo como mejora progresiva.

Cuándo utilizar radios (árbol de decisión)

P1. ¿El usuario elige exactamente una opción?

• No →Usocasillas de verificación(0–muchos) o unalternar(binario) o repensar la tarea.
• Sí →Vaya a la Q2.

P2. ¿Es necesario que las opciones sean visibles de un vistazo?

• Sí →Usoradios(lo mejor para escanear y elegir rápidamente).
• No (hay poco espacio/hay muchas opciones)→ Considere unseleccione(menú desplegable). Si las opciones son críticas y se benefician de la comparación, prefiera las radios y rediseñe el diseño.

P3. ¿Cuantas opciones?

• 2–6→ Las radios son ideales.
• 7–10→ Es posible que las radios aún funcionen con agrupación o undos columnasred; de lo contrario, utilice una lista de selección o de búsqueda.
• >10→ Utilice unseleccionar con búsquedao unpasoeso reduce el conjunto primero.

P4. ¿Las opciones son estados mutuamente excluyentes?

• Sí →Radios.
• Ninguna combinación / tiene sentido →Casillas de verificación.

P5. ¿La elección generará diferentes preguntas de seguimiento?

• Sí →Las radios siguen bien. Mostrar seguimientoscondicionalmente, pero mantén los campos ocultosfuera del orden de tabulacióny SR fluye hasta que se revela.
• No →Grupo de radio sencillo.

P6. ¿Familiar versus descriptivo?

• Etiquetas familiares(p. ej., “Pequeño/Mediano/Grande”) → las etiquetas cortas son suficientes.
• Desconocido o de alto riesgo(por ejemplo, “SEO técnico versus SEO de contenido”) → ​​agregarmicrocopia(descripción de una línea) debajo de cada etiqueta.

P7. ¿El móvil primero?

• Sí (siempre)→ Usopila de una columnacon espacios generosos y texto de 16 a 18 píxeles. Promocionar elmás elegidoopción hacia la cima.

Ejemplos prácticos

• Tu formulario: "¿Qué servicio?" → Las radios ganan a una selección porque los usuarios deben comparar las opciones una al lado de la otra. Mantenga 3 tarjetas (Construcción de enlaces, SEO, Desarrollo web) con un subtexto breve.
• Velocidad de envío: 3–4 velocidades mutuamente excluyentes → Radios (con deltas de precios en el subtexto).
• Frecuencia del boletín: Diario/Semanal/Mensual → Radios.
• Intereses (puede elegir varios)→ No radios; utilizar casillas de verificación.

Anatomía de un grupo de radio adecuado

Copiar y pegar línea de base semántica (aún no hay CSS sofisticado)

¿Qué servicio necesitas?

Elija la opción que mejor se adapte a su objetivo.





Construcción de enlaces




Optimización de motores de búsqueda




Diseño / Desarrollo Web




Por favor elija un servicio para continuar.



Continuar

Por qué es importante cada parte

• +le da al grupo un nombre para los lectores de pantalla y establece un contexto para todos.
• Lo mismonombrehace que las entradas sean mutuamente excluyentes.
• Se puede hacer clicalrededor de cada entradale brinda un área enorme de toque/clic (44px+).
• requeridoen la primera radiopermite que el navegador valide el grupo de forma nativa.
• Texto de ayuda(sugerencia de servicio) ytexto de error(service-error) están separados para que pueda mostrar/ocultar errores sin mover cosas.
• No se necesitan roles ARIA.Las radios nativas ya exponen la semántica correcta.

CSS mínimo para usabilidad (apariencia nativa, objetivos grandes, enfoque claro)

/* Diseño y espaciado */
.etiqueta de campo {
pantalla: flexible;
alinear elementos: centro;
brecha: .6rem;
relleno: .65rem .8rem;      /* objetivo de gran toque */
radio de borde: .6rem;
cursor: puntero;
}

/* Enfoque del teclado: resalta toda la etiqueta cuando la entrada está enfocada */
.etiqueta de campo: tiene (entrada: foco-visible) {
contorno: 3px sólido #3b82f6;
desplazamiento de contorno: 2px;
}

/* Estado seleccionado (opcional, el punto nativo aún se muestra) */
.etiqueta de campo: tiene (entrada: marcada) {
antecedentes: #f1f5ff;
}

/* Texto de error */
.error {color: #b91c1c; margen superior: .5rem; tamaño de fuente: .9rem; }

Consejo::tiene()le brinda ese "anillo de enfoque en toda la tarjeta" sin ocultar la entrada real. Si un navegador antiguo no lo admite, los usuarios aún obtienen el anillo de enfoque nativo en la propia radio.

Validación suave y accesible (primero usa el navegador)

Deje que el navegador maneje la parte "debe elegir uno" y luego muestre su error en línea si es necesario.

formulario const = document.getElementById('formulario de cotización');
grupo const = document.getElementById('grupo-servicio');
error constante = document.getEementById('error-servicio');

form.addEventListener('submit', (e) => {
// Activa la interfaz de usuario de validación nativa (funciona porque la primera radio tiene `required`)
if (!form.reportValidity()) {
// Opcional: muestra un error en línea amigable también
error.hidden = false;
group.setAttribute('aria-invalid', 'true');
e.preventDefault();
else {
error.hidden = true
group.removeAttribute('aria-inválido' }
  }
Comportamiento que debe esperar (y probar):

Teclado:

• Presione una vez para ingresar al grupo; utilizarTeclas de flechamoverse;Espacioselecciona.Lectores de pantalla:
• La leyenda se lee como la etiqueta del grupo; cada opción se anuncia con el estado "seleccionado/no seleccionado".Toque:
• Al tocar la etiqueta se alterna la radio (gracias al ajuste de etiquetas).Radios de “tarjeta” con estilo personalizado (sin interrumpir la accesibilidad)

Copiar y pegar HTML

Copy-paste HTML

Elige un plan

Elija una opción. Puedes cambiar en cualquier momento.





Inicio
Bueno para sitios pequeños




Crecimiento
Más popular




Pro
Funciones avanzadas



Seleccione uno para continuar.

CSS mínimo y robusto

:raíz{
--marca:#0b5cff; --anillo: rgba(11,92,255,.35);
--borde:#e5e7eb; --bg:#fff; --silenciado:#6b7280;
--radio:14px;
}

/* Cuadrícula */
.grupo-tarjeta{
pantalla:cuadrícula; espacio: 16px;
columnas-plantilla-cuadrícula: repetir(3, minmax(0,1fr));
}
@media (ancho máximo: 900 px){ .card-group{ grid-template-columns:1fr 1fr; } }
@media (ancho máximo: 640 px) { .card-group { grid-template-columns:1fr; } }

/* Etiqueta de tarjeta */
.tarjeta{
posición: relativa;
pantalla:cuadrícula; colocar elementos:centro; alineación de texto:centro;
espacio: 6px; relleno: 18px;
borde: 1px var sólido (--borde); radio-borde:var(--radio);
fondo:var(--bg);
cursor:puntero; selección de usuario: ninguna;
transición: sombra de cuadro .15s, color de borde .15s, transformación .02s;
}
.card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.06); }

/* Mantenga la entrada nativa enfocable: no display:none */
.entrada de tarjeta{
posición:absoluta; recuadro: 0; opacidad: 0;
}

/* Anillo de enfoque del teclado en toda la tarjeta */
.card:has(entrada:focus-visible){
sombra de cuadro: 0 0 0 3px var (--anillo);
color del borde: var(--marca);
}

/* Estado seleccionado */
.card:ha(entrada:marcado){
color del borde: var(--marca);
sombra de cuadro: 0 0 0 3px var (--anillo);
}

/* Contenido */
.título de la tarjeta{ peso de fuente:700; color:#111; }
.card-sub{ tamaño de fuente:14px; color:var(--silenciado); }

/* Texto de error */
.error{color:#b91c1c; margen superior: .5rem; tamaño de fuente: .9rem; }

Notas de comportamiento (por qué funciona este patrón)

• Novisualización: ningunaen la entrada → los usuarios del teclado pueden presionar Tab;Teclas de flechaselección de movimiento;Espacioselecciona.
• Se puede hacer clic en toda la tarjeta porque la entrada está dentro deletiqueta.
• :tiene()déjanos peinarcentrarseycomprobadoestados en la tarjeta principal sin hacks ARIA.
• La cuadrícula responsiva proporciona1–3 columnasautomáticamente; Los objetivos táctiles se mantienen grandes.

Opcional: validación suave (nativa primero)

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

form.addEventListener('submit', (e) => {
if (!form.reportValidity()) { // usa el `requerido` en la primera radio
err.hidden = false;
e.preventDefault();
} else {
err.hidden = true;
}
});

Estrategias de validación que no molestan

Una gran validación es invisible hasta que se necesita. A continuación se presenta un enfoque específico para la radio que es rápido, accesible y tranquilizador para los usuarios.

Principios

• Nativo primero.Deje que HTML maneje "se debe seleccionar uno".
• Aplazar errores.No grites a los usuarios antes de que intenten continuar.
• Señale el problema.Anuncie errores, cambie el enfoque de manera inteligente y mantenga el texto breve.
• Claro sobre el cambio.Tan pronto como se haga una elección válida, elimine el error.

Línea de base (solo nativo)

Solo HTML puede hacer cumplir la regla conrequeridoen una radio del grupo.

¿Qué servicio necesitas?

Elija una opción.




Construcción de enlaces



Optimización de motores de búsqueda



Diseño / Desarrollo Web

Esto ya le brinda: flechas del teclado, espacio para seleccionar y validación a nivel del navegador.

Errores en línea amigables (mejora progresiva)

Desactive la ventana emergente del navegador y administre los mensajes en línea para que coincidan con su diseño.

HTML (agregar una región de error)

Elija una opción.


Continuar

CSS (estilo simple)

.error {color:#b91c1c; margen superior: .5rem; tamaño de fuente: .9rem; }

JS (aplazar errores, anunciar correctamente)

forma constante = document.getElementById('cita');
grupo constante = document.getElementById('svc');
const err = document.getElementById('svc-err');
radios const = form.querySelectorAll('input[nombre="servicio"]');

dejar intentado = falso; // muestra errores sólo después de que el usuario intenta continuar

función tieneSelección() {
return [...radios].some(r => r.checked);
}

function showError(msg='Elija una opción.') {
err.textContent = mensaje;
error.oculto = falso;
group.setAttribute('aria-invalid', 'true');
// Agrega el error a describe por para que los SR lo anuncien a continuación
group.setAttribute('aria-describedby', 'svc-hint svc-err');
}

función clearError() {
err.oculto = verdadero;
group.removeAttribute('aria-invalid');
group.setAttribute('aria-descrito por', 'svc-hint');
}

form.addEventListener('submit', (e) => {
intenté = true;
if (!hasSelection()) {
e.preventDefault();
showError();
// Muestre el grupo a la vista y coloque el foco en la primera radio
radios[0].focus();
group.scrollIntoView({ conductual: 'smooth', block: 'center' });
más {
borrarError();
  }
// No regañes temprano; claro una vez que eligen algo

radios.forEach(r => {
r.addEventListener('cambiar', () => {
if (intento) clearError();
});
});
Por qué funciona esto

No hay burbujas de información sobre herramientas del navegador; los usuarios ven errores

• en líneaal lado del grupo.Los lectores de pantalla escuchan el
• leyenda, entonces elerror, gracias aaria-descrita por.Sólo aparecen errores
• despuésun intento de envío (o al regresar para corregirlo).Validación suave por paso (formularios de varios pasos)

Si ingresa con el botón “Siguiente”, valide solo ese paso.

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

if (!hasSelection()) {
showError();
} else {
clearError();
// avanza al siguiente paso...
}
});
Mensajes personalizados con la API de restricción (opcional)

Si prefiere mantener el modelo de validez del navegador, configure un mensaje personalizado en el

primeroradio en el grupo.const primeraRadio = radios[0];

form.addEventListener('submit', (e) => {
if (!hasSelection()) {
firstRadio.setCustomValidity('Por favor, elija una opción.');
// Activa la interfaz de usuario nativa; o llama a form.reportValidity()
e.preventDefault();
form.reportValidity();
} else {
primeraRadio.setCustomValidity('');
}
  }
Úselo cuando desee la "burbuja" nativa más su propio texto; de lo contrario, siga el método en línea anterior para una interfaz de usuario consistente.

Resumen de errores (para formularios largos)

Si su formulario es largo, agregue un

resumen superiorque se vincula con el área del problema.

Hay un problema: Elija un servicio.

suma const = document.getElementById('resumen de errores');
suma.oculta = falso;
suma.querySelector('a').focus(); // Los SR anuncian la alerta
}
Reservas del lado del servidor y de la red

La validación del lado del cliente mejora la UX, pero

siemprevalide también en el servidor (o mediante su servicio de envío). Si el envío falla, devuelva la página con: validate on the server (or by your submission service) too. If submission fails, return the page with:

• El anteriorla selección persistió, y
• Elmismo error en líneaal lado del grupo.

Integración de Formspree (mejora progresiva)

Haga que las radios funcionen incluso si JavaScript falla y luego mejore para obtener un agradecimiento más fluido y mejores análisis.

HTML nativo (siempre funciona)

id="cita"
action="https://formspree.io/f/your_form_id"
método="POST"
>

¿Qué servicio necesitas?

Elija una opción.




Construcción de enlaces
Obtenga vínculos de retroceso de alta calidad.




Optimización de motores de búsqueda
Aumentar la clasificación y el tráfico.




Diseño / Desarrollo Web
Sitios rápidos y orientados a dispositivos móviles.




Nombre completo




Correo electrónico









Obtenga mi propuesta gratuita

Algo salió mal. Por favor, inténtalo de nuevo.

¡Gracias! Nos pondremos en contacto en breve.

Qué te da esto:

• Funciona con JS desactivado (bueno para SEO, confiabilidad).
• El navegador maneja “se debe seleccionar uno” (requeridoen la primera radio).
• Formspree recibeservicio,nombre,correo electrónico, y_sujeto.

Mejora de JS (buena experiencia de usuario, mejor seguimiento)

Interceptar el envío, validar, enviar conbuscary mostrar un agradecimiento en línea (o redirigir).

(función(){
const form = document.getElementById('quote');
const okMsg = document.getElementById('form-success');
const errMsg = document.getElementById('form-error');
const submitBtn = form.querySelector('button[type="submit"]');

// Opcional: capturar UTM + contexto de página
función appendMeta(fd){
const url = new URL(location.href); fd.append(k, v);
});
fd.append('page_url', ubicación.href);
if (document.referrer) fd.append('referrer', document.referrer);
form.addEventListener('submit', async (e) => {
// Mantener respaldo nativo 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 = verdadero;

const original = enviarBtn.textContent;
enviarBtn.textContent = 'Enviando…';
okMsg.hidden = verdadero;
cuerpo: fd,

'aplicación/json' }
});
if(res.ok){
form.reset();

okMsg.hidden = false;
      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',{método:'formspree', servicio: fd.get('service')});

// Opcional: redirigir después del éxito
// setTimeout(()=> ubicación.href = '/gracias/', 1200);
} más {
errMsg.hidden = falso;
}
} atrapar {
errMsg.hidden = falso;
} finalmente {
submitBtn.disabled = falso;
enviarBtn.textContent = original;
}
});
})();

Notas

• EstablecerAceptar: aplicación/jsonEntonces Formspree devuelve JSON y puedes decidir el éxito/fracaso limpiamente.
• Usoformulario.reportValidity()por lo que el navegador aplica la selección de radio y el formato del correo electrónico antes de enviarlo.
• Mantener al nativoacción/métodoentonces el formulario todavía funciona sin JS.

Control de spam sin perjudicar las conversiones

• Miel(incluido arriba) atrapa muchos robots sin fricción.
• Momento: agregar un ocultoiniciado_encuando se carga la página; ignorar los envíos más rápido que, digamos, 2 segundos.
• Señales de contenido: si ve valores basura repetidos, filtrelos en sus reglas de Formspree o en el posprocesamiento.

document.getElementById('started_at').value = Fecha.now();

// en el controlador de envío antes de enviar:
const iniciado = Número(fd.get('started_at'));
if (Date.now() - iniciado < 2000) retorno; // parece un robot

Líneas de asunto que reflejan la elección de radio (bandeja de entrada limpia)

Puedes personalizar_sujetode la radio seleccionada:

servicio constante = fd.get('servicio'); // por ejemplo, "seo"
fd.set('_subject', `Nuevo cliente potencial ${servicio} desde el formulario de contacto`);

Errores comunes que se deben evitar

• Ocultar radios convisualización: ninguna.Usoopacidad: 0; posición:absoluta; recuadro:0dentro de la etiqueta para que los teclados sigan funcionando.
• Olvidandoconjunto de campos/leyenda.Los lectores de pantalla dependen de ellos para obtener contexto.
• Sobrevalidación temprana.Mostrar errores después de enviar/Siguiente, luego borrarlos tan pronto como el usuario corrija el grupo.
• No capturar el contexto.AñadirURL de página,referentey campos UTM, lo agradecerás más tarde.

Internacionalización e Inclusividad

Idioma, etiquetas y tono

• Utilice la páginaidioma(y cambiar páginas por configuración regional): …
• Mantenga las etiquetas breves ydescriptivo, evite la jerga específica de una cultura.
• Prefieroneutrofrases ("Elija un plan") en lugar de suposiciones ("¿Cuál es su presupuesto?").
• Localizarerroresytexto de ayudacon un diccionario simple codificado pordocumento.documentElement.lang.

constante i18n = {
es: { elegir: 'Elija una opción'. },
es: { elegir: 'Elige una opción, por favor.' },
ar: { elija: 'يُرجى اختيار خيار واحد.' }
};
const t = (k) => (i18n[document.documentElement.lang] || i18n.en)[k];
errorEl.textContent = t('elegir');

Etiquetas largas y opciones de varias líneas

• Dejar etiquetasenvolver; nunca trunca palabras cruciales.
• Mantenga grande el área de impacto incluso cuando el texto se ajuste: use relleno enetiqueta, no solo la entrada.

.card { tamaño en línea: 100%; relleno: 16px; }
.card .card-title { peso de fuente: 700; altura de línea: 1,25; }
.card .card-sub { tamaño de fuente: 14px; altura de línea: 1,4; }

Soporte de derecha a izquierda (RTL)

Usar CSSpropiedades lógicasy:dir()por lo que no necesitas estilos separados.

/* Espaciado que cambia automáticamente a RTL */
.card { padding-inline: 16px; bloque de relleno: 16px; }

/* Anillo de enfoque que respeta la dirección */
.card:has(entrada:focus-visible) {
esquema: 3px solid var(--ring);
desplazamiento de contorno: 2px;
}

/* Opcional: ajustes específicos de dirección */
:dir(rtl) .card-group { dirección: rtl; }

Accesibilidad más allá de ARIA

• Garantizarcontraste ≥ 4,5:1para etiquetas y estados de enfoque.
• Tocar objetivos ≥44×44 píxeles(relleno en lugar de tamaño de fuente).
• No comunique el estado únicamente mediante el color; utilizarbordes, iconos o texto.

Lista de verificación de pruebas (apto para impresión)

• Semántica: Las radios están adentroconjunto de camposcon un visibleleyenda.
• Teclado: Tab ingresa al grupo;flechasmover;Espacioselecciona.
• Lectores de pantalla: Leyenda anunciada; cada opción dice seleccionado/no seleccionado.
• Enfoque: Anillo visible en eltarjeta entera(y en la entrada nativa).
• Área de impacto: Se puede hacer clic en toda la etiqueta; funciona en el móvil.
• Validación: No hay errores hasta enviar/Siguiente; Los errores se aclaran al realizar el cambio.
• Copiar: Las opciones son cortas; El texto de ayuda aclara las diferencias.
• Diseño: 1 columna sobre teléfonos; 2 o 3 en el escritorio; sin recortes de desbordamiento.
• i18n: Errores/etiquetas localizadas; el texto largo se ajusta con elegancia; RTL está bien.
• Análisis: Eventos para impresión, selección, envío.
• Rendimiento: Sin bibliotecas de interfaz de usuario pesadas; CSS mínimo; sin cambio de diseño.

Rendimiento y mantenibilidad

• favorentradas nativas+ CSS ligero; Evite reemplazar radios con divs.
• Mantenga CSS modular (propiedades personalizadas para colores, radio, anillo).
• Evitarvisualización: ningunasobre insumos; utilizaropacidad: 0; posición:absoluta; recuadro:0por lo que la accesibilidad permanece intacta.
• Aplazar JS no críticos; mantenga las mejoras por debajo de ~2 a 5 KB cuando sea posible.
• Usoconsultas de contenedores(cuando esté disponible) en lugar de puntos de interrupción de medios complejos para formularios incrustados.

@container (ancho mínimo: 680px) {
.card-group { columnas-plantilla-cuadrícula: 1fr 1fr 1fr; }
}

Análisis y experimentación

Seguimiento de intención y puntos de fricción:

// Se dispara cuando el grupo de radio se vuelve visible
gtag?.('evento','form_step_view', { paso: 1, formulario: 'contacto' });

// Disparar al seleccionar
document.querySelectorAll('input[name="service"]').forEach(r => {
r.addEventListener('change', () => {
gtag?.('event','radio_select', { group: 'service', value: r.value });
});
});

// Activar al enviar correctamente
gtag?.('evento','generate_lead', { formulario: 'contacto', servicio: formulario.servicio.valor });

Prueba A/B:

• Orden de opciones(el más elegido primero)
• Copia de CTA(“Obtener mi propuesta gratuita” frente a “Obtener mi cotización”)
• Texto de ayudapresencia

Antipatrones (no hagas esto)

• Ocultar entradas convisualización: ninguna(rompe el teclado y los SR).
• Desaparecidoconjunto de campos/leyenda.
• Pequeñas áreas de impacto (solo se puede hacer clic en el pequeño punto).
• Estado de selección de solo color; enfoque invisible.
• Validandoantesel usuario intenta continuar.
• Empacar de 10 a 20 opciones en radios; utilice una selección de búsqueda en su lugar.

Lista de verificación final

• conjunto de campos+leyendapresente
• Lo mismonombre, únicovalors
• Las etiquetas envuelven las entradas; Se puede hacer clic en toda la tarjeta
• Anillo de enfoque claramente visible
• requeridoen primera radio; errores leves en línea
• Cuadrícula de 1 a 3 columnas, objetivos táctiles grandes y receptivos
• Cadenas localizadas; RTL seguro mediante propiedades lógicas
• Análisis al ver/seleccionar/enviar
• La validación del lado del servidor refleja las reglas del cliente

Recursos

Especificaciones y patrones de creación

• Estándar HTML –: semántica nativa, agrupación pornombre, formar comportamiento.
• Prácticas de autoría WAI-ARIA 1.2 – Grupo de radio: comportamiento esperado del teclado (Tab en grupo,Flechapara mover,Espaciopara seleccionar), patrones de etiquetado.
• WCAG 2.2elementos esenciales para radios:
  • 2.1.1Teclado(todo operable mediante teclado)
  • 2.4.7Enfoque visible(enfoque claramente visible)
  • 2.5.5Tamaño objetivo(se recomienda ≥44×44px)
  • 1.4.3Contraste (mínimo)

Guías de referencia

• MDN: Entrada de radio,etiqueta,conjunto de campos/leyenda, validación de formulario (API de validación de restricciones).
• Sistema de diseño GOV.UK – Radios: guía excelente y probada en batalla sobre redacción y errores.
• Componentes inclusivos (Heydon Pickering): patrones prácticos y críticas.

Consulte nuestro blog reciente enCómo buscar oportunidades de publicaciones de invitados en Ahrefs (guía paso a paso)

Pruebas y herramientas

• hacha DevTools(extensión del navegador): comprobaciones automáticas de todos los días.
• Información sobre accesibilidad– pruebas rápidas guiadas.
• Faro– señales de actuación + accesibilidad.
• Comprobador de contraste WebAIM– verificar el contraste de color.
• Lectores de pantallapara comprobar el comportamiento real:
  • NVDA(Windows),MANDÍBULAS(Windows),Voz en off(macOS/iOS),Respuesta de conversación(Androide).
• Pase de teclado manual: Tab en el grupo → Las flechas se mueven → Espacio selecciona → el anillo de enfoque permanece obvio.

Echa un vistazo a nuestrorevisión de Nociones de Marketing

Preguntas frecuentes (breves y prácticas)