Cómo crear typeforms accesibles

La experiencia que Typeform ofrece a los usuarios que completan sus formularios a pantalla completa cumple los criterios de conformidad de nivel AA de las pautas WCAG 2.1 por defecto. Si no sabes muy bien qué significa todo eso exactamente a efectos prácticos, es muy sencillo: cumplir con estas pautas permite a las personas que utilizan tecnologías asistivas responder a tus typeforms.

¿Qué son las pautas WCAG 2.1?

Las pautas de accesibilidad para el contenido web (o WCAG por sus siglas en inglés) se crearon con la finalidad de hacer el contenido web más accesible para las personas con discapacidad. Estas pautas no pueden satisfacer las necesidades específicas de todas las personas con discapacidad, pero sí mejoran significativamente la accesibilidad de los contenidos web desde ordenadores de sobremesa y dispositivos móviles.

Sigue leyendo si quieres conocer nuestros trucos y consejos para crear y compartir typeforms accesibles.

Cómo compartir typeforms accesibles

Para asegurarte de que ofreces una experiencia accesible a las personas que van a responder a tu typeform, pulsa el botón "Copiar link" (que te mostramos en la siguiente imagen) para compartirlo:

Los typeforms cuya primera pregunta se carga y envía por correo electrónico, así como los que están incrustados en páginas web o en forma de chat, no cumplen todavía estas pautas de accesibilidad, pero es algo en lo que seguimos trabajando.

Utiliza un tema que sea accesible

El tema que se utiliza por defecto en nuestros typeforms cumple los requisitos de accesibilidad, puesto que tanto las preguntas, como las opciones de respuesta, botones y fondos tienen un contraste de color de, al menos, 3.0:1.

Los códigos de color que se utilizan en el tema predeterminado de Typeform son los siguientes:

- Preguntas: #000000

- Opciones de respuesta: #0142AC

- Botones: #0142AC

- Fondo: #FFFFFF

Puedes buscar otros temas que también sean accesibles en la galería. Como, por ejemplo, el tema "Taxi".

Si quieres editar un tema o crear uno desde cero, puedes recurrir a esta herramienta para comprobar el contraste. De esta forma, podrás asegurarte de que tu nuevo tema también cumple los criterios de accesibilidad.

Añade un texto alternativo para los lectores de pantalla

Añadir una breve descripción a tus imágenes será de gran ayuda para las personas con discapacidad visual. Aunque estos textos no aparecen de forma visible en tus typeforms, los lectores de pantalla sí podrán acceder a ellos y leérselos a los usuarios en voz alta.

Puedes utilizar el campo "Texto alternativo" (en el apartado "Opciones" de la pestaña "Pregunta") para añadir una descripción, de una longitud máxima de 125 caracteres, a las imágenes que insertes en tu typeform.

Consejo: si añades una imagen de la galería de Unsplash o un icono de Noun Project, la descripción de la imagen aparecerá automáticamente (en inglés) en el campo correspondiente a la función "Texto alternativo".

A continuación puedes ver una pregunta de tipo "elección de imágenes" en la que hemos añadido un texto alternativo para cada una de las opciones de respuesta mediante los campos de la función "Texto alternativo opciones" (en el apartado "Opciones" de la pestaña "Pregunta"):

Y aquí puedes ver una pregunta en la que hemos añadido una imagen de fondo y el correspondiente texto alternativo:

Utiliza hiperenlaces descriptivos en lugar de enlaces sin contexto

Cuando añadas un enlace a una URL externa, hazlo mediante un hiperenlace que sea descriptivo en lugar de utilizar un enlace que no tenga sentido fuera de contexto y no facilite ningún tipo de información diferenciadora. Indicar claramente cuál es el destino del enlace que has añadido, dentro del propio texto, también será de gran ayuda para aquellos usuarios que tengan alguna discapacidad.

Utiliza vídeos accesibles

Cuando añadas vídeos a tus typeforms, asegúrate de que el subtitulado descriptivo (o closed captions; CC, en inglés) esté activado. Puedes obtener más información sobre los vídeos accesibles aquí.