Accesibilidad

Al terminar esta página vas a saber qué hace TrazoForms por la accesibilidad, y qué encontraron pruebas reales — no solo la intención de diseño. Todo formulario publicado apunta a WCAG 2.1 nivel AA sin configuración extra; no hace falta activar nada.

Etiquetas y descripciones

Todo campo tiene una etiqueta asociada, incluso cuando eliges ocultarla: una etiqueta oculta solo se oculta visualmente, y los lectores de pantalla la siguen anunciando.
El texto de ayuda y los mensajes de error están conectados a su campo con aria-describedby, así se leen junto con él.
Los botones de radio y las casillas van agrupados en un <fieldset>/<legend>, incluido Consentimiento con varias casillas, así los lectores de pantalla anuncian a qué pregunta pertenece cada opción.
Los campos de nombre, dirección y confirmación de correo dan a cada parte su propia etiqueta.

Errores

Cada error aparece junto a su campo, en palabras, anunciado en vivo (aria-live) apenas aparece.
Un resumen de errores arriba del formulario lista cada error con un enlace a su campo, anunciado como alerta. Encendido por defecto.
Los errores nunca se muestran solo por color: siempre hay texto, y el resumen también lleva un ícono.
El formulario funciona sin JavaScript, incluidas la validación y el mensaje de confirmación. Volver a mostrar el formulario después de un error del servidor conserva lo que ya se había escrito, y nunca vuelve a marcar como aceptada una casilla de consentimiento por un error que no tiene nada que ver, en otro campo.

Campos obligatorios

Cualquiera sea la marca que elijas (un asterisco, tu propio texto o sin marca visible), los lectores de pantalla siempre anuncian que un campo es obligatorio — la validación usa el atributo HTML required real, no solo uno aria-, así que el navegador y la tecnología de asistencia coinciden.

Movimiento y foco

Las animaciones se apagan solas si el sistema operativo de quien visita pide movimiento reducido.
Los marcadores de radio y casillas se ocultan visualmente pero siguen en el árbol de accesibilidad y son enfocables con teclado, con un aro de foco visible de 2px — más ancho que el 1,5px propio del admin de WordPress, que era fácil de perder de vista.

Colores y avance

Las once paletas se verifican contra los mínimos de contraste de WCAG 2.1, en modo claro y oscuro, para texto, texto de ayuda, bordes, botones y mensajes de error y de éxito.
En los formularios de varias páginas (Pro), el avance también se da como texto real («Paso 2 de 3»), no solo como un indicador visual.
El contador de caracteres dice cuántos quedan; su cambio de color es solo un refuerzo.

Cómo se probó de verdad

axe-core 4.13, contra las nueve plantillas y una variante multipágina, en modo claro y oscuro, con las reglas WCAG 2.0/2.1/2.2 A y AA más las de buenas prácticas: cero violaciones.
Lighthouse, contra formularios reales en un WordPress de desarrollo: en móvil, 98 de rendimiento, 100 de accesibilidad, 96 de buenas prácticas y 91 de SEO; en escritorio, 100 de rendimiento y 96 de accesibilidad. Lo que le restó puntos a la accesibilidad de escritorio fue el propio marcado de navegación del tema activo, no el plugin.
Maquetación móvil a 375px de ancho, en las nueve plantillas: sin desborde horizontal, todo objetivo táctil por encima del mínimo de 24×24px, y los campos de texto a 16px para que iOS no haga zoom al enfocarlos.
Una prueba real con lector de pantalla, confirmada como satisfactoria por el propio equipo del plugin.

Limitación conocida

axe-core marca el botón «Elegir archivos» del campo de Subida de archivo como una segunda etiqueta que compite con la etiqueta propia del campo, ya que la etiqueta del campo ya contiene toda la información necesaria. No se cambió, porque hacerlo arriesga esconder el nombre accesible propio del botón. Si esto te afecta, prueba tu formulario específico con tu propio lector de pantalla.

Tu parte

Algunas cosas dependen de cómo escribas el formulario:

Escribe etiquetas que se entiendan por sí solas. «Nombre» es más claro que «Escríbelo aquí».
No pongas instrucciones esenciales en el placeholder: desaparece en cuanto la persona empieza a escribir. Usa el texto de ayuda.
Si agregas imágenes en un bloque HTML, dales texto alternativo.
Si eliges un fondo de marco fijo, revisa que el texto siga siendo legible en modo oscuro.

Siguiente paso

Continúa con Idiomas y traducción para ver de dónde salen las traducciones de TrazoForms.