Guía para hacer tus formularios accesibles
Los formularios son los elementos más utilizados por los usuarios al interactuar con una página web.
Cada vez que alguien publica algo en Twitter o Facebook se está cubriendo un formulario. Cada vez que alguien realiza una transferencia en su banca online se cubre un formulario. Cada vez que alguien envía un correo electrónico, a través de Gmail, Outlook, o cualquier otro proveedor, también se está cubriendo un formulario.
Sin embargo, los formularios siguen siendo uno de los elementos que más problemas de accesibilidad presentan para los usuarios, siendo la segunda mayor dificultad, según datos de la Comisión Europea, para los usuarios en las webs públicas.
En este post os vamos a explicar brevemente cómo hacer vuestros formularios accesibles. Para que vuestros usuarios puedan comunicarse con vosotros, comprar vuestros productos o, si eres la Agencia Tributaria, permitir que los ciudadanos cumplan con sus obligaciones.
Esto es lo que debes hacer para que tus formularios sean accesibles.
Etiquetas:
En un estudio llevado a cabo por WebAIM en el año 2019, sobre las páginas web más importantes del mundo, revelaba que casi el 60% de los formularios no tenía etiquetas asociadas.
Cuando un formulario no tiene etiquetas asociadas los usuarios que necesitan tecnología de asistencia (ej. lectores de pantalla) para navegar por el formulario, no escucharán nada al navegar por el formulario y no sabrán qué deben de escribir en cada campo, o qué ocurre si marcan una casilla o si pulsan un botón.
Las etiquetas también deben de ser visibles también a los usuarios que no utilizan tecnologías de asistencia, estar próximas a los elementos (campos, botones…) y deben ser claras, informativas, precisas y significativas.
Hablando de etiquetas visibles, se pueden utilizar iconos como etiquetas y sin texto visible, sólo si el significado del icono es evidente y sigue habiendo la necesaria etiqueta asociada para los usuarios que sí utilizan tecnología de asistencia.
Algo que no se debe hacer nunca es utilizar el texto dentro de los campos (placeholder) como etiqueta, pues ese texto desaparece al escribir dentro de las casillas y además no tiene un contraste mínimo para aquellos usuarios con poca visión. Dificultando el cubrir el formulario e imposibilitando el revisar si se ha cubierto correctamente antes de enviarlo.
Teclado:
Los formularios deben de poder navegarse y cumplimentarse utilizando sólo el teclado.
Todos los campos, botones y controles del formulario deben de poder recibir el foco del teclado ya que el teclado, y no el ratón, es el dispositivo más accesible. Además, el orden de navegación por los distintos elementos del formulario debe ser lógico e intuitivo.
Validación:
El formulario debe de ser auto explicativo, tanto visualmente como informativamente, para prevenir errores. Para ello se han de utilizar las etiquetas, proporcionar las instrucciones necesarias, evitar distracciones y permitir la revisión del contenido antes de que el usuario realice el envío.
Los usuarios deben recibir información de inmediato tras el envío del formulario, tanto si ha habido un error, en uno o varios campos, como la confirmación de que el envío ha sido un éxito.
Si el formulario contiene errores la información correcta deberá ser preservada, los mensajes de error deberán mostrarse en contexto de los errores y deberá ofrecer suficiente información como para que el usuario sea capaz de subsanar los errores.
Los errores en el envío pueden mostrarse en un resumen en el que se ubicará el foco del teclado. Cada campo que contiene un error tendrá asociado su mensaje de error indicando que el usuario deberá solucionarlo. En caso de que se cargue una nueva página el título de la página deberá mostrar el estatus del envío.
Los errores en el envío también pueden mostrarse enviando el foco del teclado al primer elemento que contiene error, ofreciendo las instrucciones para resolver el error, o realizar una validación en tiempo real. En la validación en tiempo real hay que tener cuidado con los anuncios en tiempo real que se dan al usuario, pues pueden interferir con los anuncios que ya recibe el usuario de lector de pantalla al pasar de un elemento del formulario a otro.
Es primordial que cualquier información importante, como es la validación de un envío, no se muestre sólo utilizando color, pues las personas con daltonismo, visión reducida o que literalmente no ven, no recibirán la información. Es por esta razón que toda la información debe de acompañarse de otra alternativa visible que no dependa del color para ofrecer su significado con una alternativa en texto asociada para los usuarios de lector de pantalla.
Formulario adaptable:
En pantallas pequeñas, como las de los móviles, los formularios deben adaptarse al tamaño de la ventana ocupando el ancho disponible evitando salirse de ella. Es indispensable que los usuarios no tengan que hacer scroll lateral. Una buena idea es ubicar las etiquetas visibles sobre los campos del formulario en lugar de al lado.
Formulario progresivo (paso a paso):
Son aquellos formularios en los que la información se recoge en diferentes fases y en los que las respuestas de la fase anterior determinan las opciones disponibles en la fase siguiente.
Para hacer accesible estos formularios se debe:
- Garantizar que los cambios, por las elecciones realizadas, no afectan la experiencia de los usuarios de tecnologías de asistencia.
- Permitir que los usuarios puedan navegar hacia atrás para realizar cambios.
- Considerar limitar el acceso a realizar un sólo paso de cada vez ya que más de una puede ser confuso.
- Numerar los pasos para que los usuarios sepan el número total de pasos y en qué paso se encuentran.
- Gestionar el foco para que siempre esté ubicado en el lugar lógico durante el proceso y no desaparezca nunca de la pantalla.
- Considerar el proporcionar un resumen de las elecciones para no tener que navegar de adelante a atrás y antes de enviar el formulario.
Cambios de Contexto:
Al usuario le resulta confuso y desconcertante que, de manera inesperada, una de sus acciones origine, por ejemplo, un cambio de ubicación del foco de teclado o la apertura una ventana modal.
El formulario debería solicitar al usuario si quiere realizar el cambio de contexto antes de asumir que el usuario quiere que suceda el cambio y lo ejecute de manera automática. Sólo por el hecho de que el usuario ha movido el foco a un campo del formulario o ha cambiado el valor de un elemento del formulario. Estos cambios inesperados no son agradables, en especial para los usuarios de lector de pantalla, que deberán averiguar qué es lo que ha sucedido.
Elementos personalizados:
Nuestra recomendación, si puedes utilizar elementos nativos en HTML, no recurras a elementos personalizados. Los elementos nativos en HTML son inherentemente accesibles. Con ellos no necesitas utilizar JavaScript para hacer que el elemento funcione correctamente con el teclado o el lector de pantalla. Y no solo eso, los usuarios ya están familiarizados con los elementos nativos en HTML.
Si todavía quieres crear elementos personalizados en tu formulario, intenta que se parezcan lo máximo posible a los elementos nativos en HTML, incluyendo los comportamientos del teclado. Asegúrate de que los elementos tienen los nombres, roles y valores apropiados (ya os enseñaremos como utilizar ARIA de manera eficiente para esto) y que los cambios de estado son comunicados a los usuarios de lectores de pantalla, pues los lectores de pantalla no entienden qué son los widgets personalizados ni cómo se deben comportar.
Ahora ya sabéis qué hace falta para hacer accesibles tus formularios. Pero si quieres estar realmente seguro de que tus formularios son accesibles, en cumplimiento de las directrices de accesibilidad y sus criterios de éxito, no dudes en ponerte en manos de profesionales como los de Glocal Quality Solutions. Estaremos encantados de resolver vuestras dudas y ayudaros a conseguir unos formularios 100% accesibles.
Glocal Quality Solutions: «Ayudamos a nuestros clientes a construir un mundo mejor».