{"id":222,"date":"2026-09-14T14:41:09","date_gmt":"2026-09-14T14:41:09","guid":{"rendered":"https:\/\/agenciaia.tuespecialistaweb.com\/?p=222"},"modified":"2026-09-14T14:43:17","modified_gmt":"2026-09-14T14:43:17","slug":"formularios-accesibles","status":"publish","type":"post","link":"https:\/\/agenciaia.tuespecialistaweb.com\/?p=222","title":{"rendered":"Formularios accesibles: etiquetas, errores y navegaci\u00f3n con teclado"},"content":{"rendered":"
\"Cuatro<\/figure>\n

Los formularios accesibles permiten comprender qu\u00e9 se pide, introducir la informaci\u00f3n y conocer el resultado utilizando distintas formas de interacci\u00f3n. No se consiguen \u00fanicamente aumentando la letra o eligiendo colores contrastados. Tambi\u00e9n importa c\u00f3mo est\u00e1n identificados los campos y qu\u00e9 ocurre cuando aparece una dificultad.<\/p>\n

Una revisi\u00f3n pr\u00e1ctica debe recorrer el formulario desde el primer control hasta la confirmaci\u00f3n. Conviene probar tanto un env\u00edo correcto como uno con errores, porque muchos problemas solo aparecen al intentar corregir un dato.<\/p>\n

Asocia cada campo con una etiqueta clara<\/h2>\n

El nombre del campo debe explicar qu\u00e9 informaci\u00f3n se espera. Adem\u00e1s de verse, necesita estar asociado correctamente al control para que las tecnolog\u00edas de asistencia puedan identificarlo. La gu\u00eda de etiquetas de W3C<\/a> explica las formas de establecer esa relaci\u00f3n.<\/p>\n

No dependas exclusivamente de un ejemplo que desaparece al escribir. La persona deber\u00eda poder recordar qu\u00e9 est\u00e1 completando sin borrar su respuesta. Cuando una pregunta necesite aclaraci\u00f3n, coloca la ayuda junto al campo y comprueba que tambi\u00e9n pueda relacionarse con \u00e9l.<\/p>\n

Recorre los controles con teclado<\/h2>\n

Avanza por el formulario y observa si el orden resulta l\u00f3gico y si se distingue el elemento que est\u00e1 seleccionado. Comprueba campos, listas, casillas, enlaces de ayuda y bot\u00f3n de env\u00edo. Ninguna acci\u00f3n imprescindible deber\u00eda depender de apuntar con el rat\u00f3n.<\/p>\n

Haz esta prueba con el formulario real, incluidas las funciones a\u00f1adidas por extensiones. Un selector personalizado o un sistema de verificaci\u00f3n puede comportarse de forma distinta a los campos normales y convertirse en el punto donde se interrumpe el recorrido.<\/p>\n

Explica qu\u00e9 ha fallado y c\u00f3mo corregirlo<\/h2>\n

Un borde rojo aislado no basta para comunicar un error. El mensaje debe identificar el campo y orientar la correcci\u00f3n. \u00abRevisa este dato\u00bb aporta menos que una explicaci\u00f3n del formato esperado cuando ese es el problema.<\/p>\n

W3C recomienda mensajes claros y una relaci\u00f3n reconocible entre errores y controles en su gu\u00eda de notificaciones<\/a>. Tambi\u00e9n hay que comprobar que los cambios din\u00e1micos se comuniquen a quienes utilizan tecnolog\u00edas de asistencia.<\/p>\n

No rechaces formatos v\u00e1lidos por comodidad<\/h2>\n

Revisa las reglas de validaci\u00f3n con los casos de uso del negocio. Los nombres no siempre tienen la longitud que imaginaste, y los tel\u00e9fonos pueden incluir prefijos y separadores. Una restricci\u00f3n demasiado estrecha puede impedir enviar informaci\u00f3n correcta.<\/p>\n

La documentaci\u00f3n de validaci\u00f3n de W3C<\/a> aconseja admitir formatos razonables y recuerda que validar en el navegador no sustituye las comprobaciones del servidor. El objetivo es ayudar a introducir datos v\u00e1lidos, no obligar a adivinar una regla oculta.<\/p>\n

Documenta una prueba completa<\/h2>\n

Puedes registrar el recorrido con cuatro comprobaciones:<\/p>\n

    \n
  1. Identificar todos los campos y sus instrucciones.<\/li>\n
  2. Completar la tarea mediante teclado.<\/li>\n
  3. Provocar un error y corregirlo sin perderse.<\/li>\n
  4. Reconocer si el env\u00edo termin\u00f3 correctamente.<\/li>\n<\/ol>\n

    Combina estas pruebas con revisi\u00f3n t\u00e9cnica y, cuando sea posible, con personas que utilicen tecnolog\u00edas de asistencia. Esta lista inicial no equivale a una auditor\u00eda completa de accesibilidad.<\/p>\n

    En FEBEN podemos incorporar estas comprobaciones al dise\u00f1o web<\/a>, para que el contacto con tu negocio no dependa de una \u00fanica manera de ver o utilizar la pantalla.<\/p>\n

    \n

    Para seguir trabajando esta idea<\/h2>\n