Ready to build a website that does it all? 🏆 Get the free Webflow x Typeform ebook

here
Signup

Comprueba si tu typeform es accesible

En Typeform creemos que la accesibilidad es muy importante y, por ello, hemos desarrollado una herramienta de evaluación para que te resulte más sencillo crear typeforms accesibles. Sigue leyendo si quieres saber cómo puedes utilizar esta herramienta para detectar posibles problemas de accesibilidad.

Nuestra herramienta de evaluación de la accesibilidad analiza los siguientes aspectos:

- El contraste de color entre los botones y el fondo.

- El contraste de color entre el texto de los botones y el fondo de los botones.

- El contraste de color entre el texto de las preguntas y el fondo.

- El contraste de color entre el texto de las respuestas y el fondo.

- La existencia o no de un texto alternativo que describa las imágenes.

- Si los tipos de preguntas elegidos son totalmente accesibles o no.

Todos los tipos de preguntas que dependen totalmente de Typeform son accesibles, pero no podemos garantizar la accesibilidad de las preguntas que están integradas con herramientas externas. Esto significa que si, por ejemplo, tienes una pregunta de tipo "Calendly" en tu formulario, la herramienta de evaluación de la accesibilidad te mostrará un aviso indicando que no nos es posible garantizar que la integración con esa aplicación sea accesible.

La función "revisar accesibilidad" te permite comprobar si tu formulario cumple o no las pautas de accesibilidad WCAG 2.1 de nivel AA. Las pautas relativas al contraste de color que se contemplan en este estándar son las siguientes:

- El texto y/o las imágenes de texto deben tener una relación de contraste de, al menos, 4.5:1, con la siguiente excepción:

- El texto de gran tamaño y las imágenes de texto de gran tamaño (de, al menos, 18 puntos o 14 puntos en caso de estar en negrita) deben tener una relación de contraste de, al menos, 3:1.
Puedes obtener más información sobre estas pautas aquí.

- Para comprobar qué aspectos de tu typeform son ya accesibles y cuáles podrían serlo aún más, abre el formulario en cuestión y pulsa el botón "Revisar accesibilidad":

image7.png

Aparecerá en pantalla una lista en la que podrás consultar el estado actual de tu typeform en los tres ámbitos analizados:

image6.png

Si quieres obtener más información sobre cada una de estas categorías, puedes pulsar en las flechas correspondientes para ampliar el contenido:

image3.png

También puedes hacer clic sobre los problemas que se hayan detectado para descubrir cómo arreglarlos. En el ejemplo que te mostramos aquí, el typeform presenta algunos problemas de accesibilidad relativos a los colores utilizados en el tema. Si pinchamos en la descripción concreta del problema, accederemos directamente al apartado "Temas" (en la pestaña "Diseño" del menú lateral):

image4.png

Ahora, al seleccionar cualquier otro tema, el informe de accesibilidad se actualizará en tiempo real:

image8.png

En el ejemplo que te mostramos a continuación, hemos seleccionado el tema que se aplica en los typeforms por defecto (denominado "Default Theme" y diseñado en conformidad con los requisitos de accesibilidad) para asegurarnos de que todo es correcto y no aparecen errores:

image1.png

El siguiente paso es comprobar si tu typeform presenta algún problema relacionado con el texto alternativo. Si aparece algún problema en este apartado, es posible que sea porque se te ha olvidado añadir la descripción textual de alguna imagen en alguna pregunta de tu formulario.

image5.png

Para resolver este problema, puedes o bien añadir un texto alternativo a esa imagen que aún no lo tiene o bien marcar la casilla "Imagen decorativa" para desactivar el texto alternativo si la imagen cumple una función meramente decorativa y no es necesario que los lectores de pantalla lean esa descripción textual en voz alta.

Por último, se encuentra el apartado "Otros". Es posible que aquí aparezca un aviso si has incluido en tu formulario alguna pregunta asociada a una herramienta externa (como, por ejemplo, Calendly).

image2.png

¡Prueba nuestra herramienta de evaluación de la accesibilidad por ti mismo/a y descubre cómo de accesibles son tus formularios! Puedes obtener más información sobre cómo crear typeforms accesibles y cómo crear typeforms con vídeos accesibles aquí y aquí.

Consulta con nuestra comunidad