Presentación del curso en vídeo

0:00 Formularios accesibles

Hola, te damos la bienvenida a Formularios accesibles, el segundo curso del nivel 3 de la Certificación ADDAW. Un formulario es el lugar donde una web deja de informar y empieza a prestar servicio. Aprenderás a hacerlo accesible, del campo suelto al proceso completo. Es un curso para desarrollo, diseño y auditoría.

0:21 Etiquetas, grupos y ayudas

Empezamos por la base. Cada campo necesita su etiqueta visible, asociada en el código. Y el texto de ejemplo no sirve como etiqueta: desaparece en cuanto empiezas a escribir. Las preguntas con varias opciones se agrupan con fieldset y legend. Y los formatos, como el del IBAN, se muestran antes del campo y se asocian con aria-describedby.

0:43 Lo que oye un lector de pantalla

Después cambiarás de papel: escucharás el formulario como lo hace un lector de pantalla. Oirás el rol, el nombre, los estados y la descripción de cada campo: «Correo electrónico, edición, obligatorio. Te enviaremos el justificante.» El nombre sale de una sola fuente, en un orden fijo. Y lo que se ve debe ser lo que se dice, porque con control por voz la persona pronuncia el texto del botón.

1:11 Errores que se entienden

Un error marcado solo en rojo es una pared. Si no distingues ese color, no sabes qué ha fallado. Aprenderás a escribir el error en texto, junto al campo, con una sugerencia para corregirlo. Cuando hay varios, un resumen enlazado recibe el foco. Y antes de pagar o firmar, la persona debe poder revisar lo que envía.

1:32 Rellenar menos, equivocarse menos

Rellenar un formulario cuesta. Sobre todo con dificultades de memoria, o desde un móvil. Con el atributo autocomplete y sus valores oficiales, el navegador rellena los datos personales. Y el criterio 3.3.7 prohíbe pedir dos veces el mismo dato. Por ejemplo, la dirección de facturación, cuando ya diste la de envío.

1:56 Que el formulario se vea

También importa, y mucho, lo que se ve. Los bordes de los campos y sus estados necesitan un contraste mínimo de 3 a 1. El foco debe verse siempre, y no quedar tapado por barras fijas. Y el formulario debe funcionar con zoom al 400 por ciento y en el modo de contraste de Windows.

2:15 Casillas, interruptores y archivos

Luego pasarás a los controles especiales. Darás estilo propio a casillas y botones de opción, sin perder el control nativo. Usarás el rol switch en los interruptores de efecto inmediato. Y harás que adjuntar un documento funcione con un botón, no solo arrastrando el archivo.

2:32 Acceso, CAPTCHA, selects y fechas

Algunos componentes concentran muchas barreras. Vamos con los más delicados. Iniciar sesión no debe exigir pruebas de memoria: hay que permitir pegar y usar gestores de contraseñas. Los CAPTCHA invisibles sustituyen a los acertijos. Y el select nativo y las fechas que se pueden escribir ganan casi siempre a los componentes hechos a medida.

2:55 Procesos en varios pasos

Muchos trámites tienen varios pasos. Indicarás el paso, por ejemplo «paso 2 de 4», en el título y en pantalla. Avisarás antes de que caduque la sesión, y darás al menos 20 segundos para ampliarla. Y elegir una opción en una lista nunca cambiará de página sin avisar.

3:14 Por qué importa

Piensa en una persona ciega que pide una ayuda en su ayuntamiento. Si el formulario falla, no puede hacerlo sola. El Real Decreto 1112 de 2018 obliga al sector público. Y la Ley 11 de 2023 alcanza al comercio electrónico y la banca desde el 28 de junio de 2025. Además, un formulario accesible reduce el abandono de todo el mundo.

3:42 Al terminar el curso

Al terminar sabrás construir formularios que todo el mundo puede completar. Los comprobarás con teclado, lector de pantalla y zoom, y corregirás sus fallos más comunes. Te llevarás un caso práctico resuelto y una lista de comprobación para tu trabajo diario. Abre un formulario que conozcas, el que sea, y empecemos.