Diseñar formularios accesibles paso a paso

Aprende a diseñar formularios accesibles con etiquetas claras, ayudas vinculadas y validación comprensible. Guía práctica paso a paso.

agosto 15, 2025
8 minutos
Accesibilidad Cognitiva, Normativa y Requisitos

Los formularios son uno de los puntos más críticos de la accesibilidad. Si una persona no puede entender el campo, encontrar la ayuda o enviarlo con teclado o lector de pantalla, se rompe la experiencia y también la conversión. En esta guía verás los errores más comunes al diseñar formularios y cómo resolverlos con prácticas sencillas que cumplen con WCAG 2.2, EN 301 549 y el Real Decreto 1112/2018 que te ayudarán a crear formularios accesibles.

1. ¿Por qué es importante un formulario accesible?

Permite completar y enviar la información con teclado y tecnologías de apoyo (lector de pantalla, conmutadores).
Reduce errores y abandanos gracias a etiquetas claras, ayudas visibles y mensajes de error comprensibles.
Mejora la conversión y cumple con la normativa de accesibilidad vigente (WCAG 2.2 | EN 301 549).

2. Normativas y estándares clave

Si trabajas en o para una Administración pública en España, debes cumplir el Real Decreto 1112/2018 (accesibilidad de sitios y apps del sector público) y usar formatos descargables accesibles. A nivel técnico, las guías de referencia son WCAG 2.1/2.2 y el estándar PDF/UA.

3. Errores comunes en formularios

3.1. Campos sin etiqueta o etiqueta poco clara

Sin etiqueta programática el lector de pantalla no anuncia el propósito del campo y las personas pueden perderse.

3.2. Ayudas y errores sin asociación

Si la ayuda o el error no están programáticamente vinculados, no se anuncian a quien usa lector de pantalla.

3.3. Falta de agrupación en radios y checkboxes

Las opciones relacionadas deben anunciar un contexto común.

3.4. Contraste bajo y foco invisible

Las personas pueden no ver dónde están escribiendo o qué van a activar.

3.5. Validación confusa o bloqueante

Las validaciones agresivas o genéricas frustran y detienen el envío sin explicar por qué.

4. Buenas prácticas para crear formularios accesibles paso a paso

Etiqueta visible + programática en todos los campos.
Indica requeridos con texto (no solo con *).
Coloca ayudas y ejemplos junto al campo y enlázalos con aria-describedby.
Ofrece más de una pista visual para estados (color + icono/texto).
Diseña foco visible y orden lógico de tabulación.
Permite corregir antes de enviar y muestra confirmación clara.
Evita CAPTCHA visuales; si son necesarios, ofrece alternativas accesibles (lógicas/audio) o soluciones tipo honeypot.

5. Patrones HTML accesibles

5.1. Campo con etiqueta, ayuda y error

<div class="form-field">
  <label for="email">Correo electrónico</label>
  <input id="email" name="email" type="email"
         aria-describedby="email-help email-error" required>
  <small id="email-help">Usaremos tu correo para enviarte la confirmación.</small>
  <p id="email-error" class="error" aria-live="polite"></p>
</div>

5.2. Grupo de radios con contexto

<fieldset>
  <legend>¿Cómo prefieres que te contactemos?</legend>
  <label><input type="radio" name="contacto" value="email"> Email</label>
  <label><input type="radio" name="contacto" value="telefono"> Teléfono</label>
</fieldset>

5.3. Mensajes de error resumidos + foco

<div id="errors-summary" role="alert" aria-live="assertive" tabindex="-1">
  <h2>Por favor, revisa estos campos:</h2>
  <ul>
    <li><a href="#email">Correo electrónico</a>: formato no válido</li>
  </ul>
</div>

5.4. Requeridos y formato

<label for="dni">DNI (8 dígitos y letra)</label>
<input id="dni" name="dni" required 
       pattern="[0-9]{8}[A-Za-z]" 
       aria-describedby="dni-help">
<small id="dni-help">Ejemplo: 12345678Z</small>

6. Checklist rápida antes de publicar

¿Todos los campos tienen label asociado?
¿La ayuda/errores están vinculados con aria-describedby?
¿El orden de tabulación es lógico y el foco se ve bien?
¿El contraste de texto, bordes y botones supera WCAG (al menos AA)?
¿El formulario se puede enviar con teclado y hay confirmación clara?
¿CAPTCHA (si existe) tiene alternativa accesible o estrategia anti-spam no intrusiva?

Conclusión

Hacer formularios accesibles no es complicado si aplicas desde el inicio estas pautas: etiquetas claras, ayudas vinculadas, foco visible, validación comprensible y contraste adecuado. Con ello mejoras la experiencia y cumples con WCAG 2.2 y la normativa vigente.

¿Quieres que revisemos tus formularios?

Te entregamos un informe con problemas detectados y soluciones prácticas para mejorar la conversión y la accesibilidad.

También te puede interesar

Artículos, guías y herramientas prácticas para ayudarte a aplicar la accesibilidad y la inclusión en tus proyectos, contenidos y servicios. Escribe, diseña y comunica con más claridad, impacto y responsabilidad.