Accesibilidad de Información de sitio web/aplicación

Funciones de accesibilidad de Información de sitio web/aplicación

Los proyectos de Web/App Insights tienen muchas funciones integradas para que la accesibilidad sea fácil. Estas son algunas de las funciones de accesibilidad que puede encontrar en la plataforma:

• Todos los elementos Creativos son tabulables y se puede hacer clic con el teclado. Admitimos TAB, ESC e Intro (y volver, para usuarios de Mac), pero no admitimos las teclas de flecha u otros.
• Para los diseños Ventana emergente superpuesta y Diálogo interactivo interactivo, los usuarios no pueden realizar la pestaña fuera del Diseño hasta que se cierre. Además, no permite el tabulador en la página subyacente.
• Para los diseños Ventana emergente superpuesta y Diálogo interactivo, el enfoque se aplica directamente al Diseño una vez que se muestra.
• Si se utilizan destinos incrustados, los usuarios pueden hacer clic con el botón derecho en el destino incrustado y añadir un título de iFrame.
• Si se utilizan ventanas incrustadas en las opciones avanzadas de Intercept, los usuarios pueden añadir un título de iframe.

A continuación, cubriremos las características de accesibilidad únicas para las necesidades de cada diseño de Diseño.

Diseño de diálogo reactivo

• Texto alternativo fácil de definir: si se utiliza un icono personalizado dentro del diálogo, permitimos a los usuarios especificar Texto alternativo para indicar el texto que el lector de pantalla debe leer cuando el foco está en el icono.
  Consejo Q: Si selecciona Incluir un icono para descartar el intercept, el texto alt del botón X que aparece en la parte superior derecha del Diseño es “cerrar”. Este texto alternativo también está localizado.
• Etiquetas ARIA para controles de botón: Por defecto, los lectores de pantalla leerán el texto que especifique para la etiqueta de botón. Sin embargo, en algunos casos, es posible que desee que el lector de pantalla lea un contexto adicional, como “Haga clic en este botón para abrir una nueva ventana de encuesta”. En este caso, puede especificar la etiqueta ARIA para los controles de botón.
• Los contrastes de color de los elementos dentro del propio diseño: si bien Qualtrics no puede proporcionar una guía de contraste directa, los usuarios tienen el control total para elegir y elegir el color adecuado para los elementos creativos.

Diseño del botón de retroalimentación

• Títulos Iframe: Capacidad de especificar un título de iframe en la sección Animación.
• Botón personalizado Alt-Text: Capacidad de especificar texto alternativo para una imagen si se utiliza un botón personalizado.

Diseños de la ventana emergente superpuesta, el botón deslizante, la barra de información y los diseños HTML personalizados

• Los contrastes de color de los elementos dentro del propio diseño: si bien Qualtrics no puede proporcionar una guía de contraste directa, los usuarios tienen el control total para elegir y elegir el color adecuado para los elementos creativos.

SDK de la aplicación móvil

• Accesible para lectores de pantalla móviles:
  • Facilita que los lectores de pantalla naveguen y salgan del diálogo.
  • Permite leer el texto dentro de los botones y también el tipo de elemento (por ejemplo, botón).

Creación de un diseño de diálogo interactivo accesible

En esta sección se explica cómo editar un diseño de diálogo interactivo para que los lectores de pantalla puedan acceder a él.

1. Vaya a la página Proyectos y, a continuación, cree un proyecto de Sitio web/App Insights.
2. Haga clic en Crear nuevo.
   
3. Seleccionar Cuadro de diálogo adaptativo como tipo de intercept.
   
4. Asigne un nombre a su intercept.
   
5. Elija una encuesta para enlazar o ingrese una dirección URL personalizada a la que dirigirse.
6. Haga clic en Siguiente.
7. Seleccione Botones.
   
8. Inserte el texto adecuado para cada uno de los botones en la sección Texto. Este texto se mostrará visualmente a los usuarios y los lectores de pantalla lo leerán en voz alta.
9. Haga clic en Logos e imágenes.
   
10. Modifique la sección Texto alternativo para proporcionar una descripción escrita del gráfico. Los visitantes que utilizan lectores de pantalla tendrán el texto alternativo leído para que sepan cuál es la imagen si tienen problemas de visión.
11. Si está visualizando su encuesta directamente en el diálogo, vaya a Tamaño y estilo.
12. Casilla de selección para Visualizar encuesta directamente en el diálogo.
13. En el cuadro de título de Iframe, introduzca el texto que desean leer los lectores de pantalla cuando se encuentren por primera vez en su encuesta.

Creación de un diseño de botón de opinión accesible

1. Vaya a la página Proyectos y, a continuación, cree un proyecto de Sitio web/App Insights.
2. Haga clic en Crear nuevo.
   
3. Seleccionar Botón de opinión como tipo de intercept.
   
4. Asigne un nombre a su intercept.
   
5. Elija una encuesta para enlazar o ingrese una dirección URL personalizada a la que dirigirse.
6. Haga clic en Siguiente.
7. Vaya a Look & Feel.
   
8. Inserte el texto adecuado para los botones en la sección Texto de botón. Este texto se mostrará visualmente a los usuarios y los lectores de pantalla lo leerán en voz alta.
9. Si utiliza un botón personalizado, seleccione Usar mi propio botón y cargue la imagen adecuada desde su ordenador.
10. Una vez cargada la imagen, cambie el texto Alt para proporcionar una descripción escrita del botón. Los visitantes que utilizan lectores de pantalla tendrán el texto alternativo leído para que sepan cuál es la imagen si tienen problemas de visión.
    
11. Haga clic en Mostrar encuesta.
    
12. Especifique un título de iFrame en la sección Título de iFrame. Si ha añadido un destino incrustado a su intercept, esta opción añadirá un título al iFrame que los lectores de pantalla pueden interpretar.

Añadir texto alternativo y roles a pulsadores de destino

Si su Objetivo tiene la forma de una imagen de botón que ha cargado, añadir texto alternativo y un atributo de rol ayuda al lector de pantalla a entender qué se supone que debe decir y hacer el botón.

1. Abra su Diseño en la pestaña Diseños.
2. Haga doble clic en el elemento Destino que contiene la imagen.
   
3. Haga clic en Fuente.
4. Dentro de la<img> etiqueta, agregue un atributo<img alt="text here" /> alt a la etiqueta y establezca el valor igual al texto de la imagen.

   <img alt="Sign Up Now" ... />

   Consejo Q: El software de lectura de pantalla leerá en voz alta lo que está contenido en el atributo alt cuando llegue a la imagen.

   

5. Rodea la<img> etiqueta con una<span> etiqueta.
   
6. Añada un atributo role=”button” a la<span> etiqueta.

   <span role="button"><img .../></span>

   Consejo Q: El atributo de rol le dice al visitante que utiliza un lector de pantalla que este elemento es un botón que se puede activar.

   

Destinos estándar (texto de enlace)

1. Abra su Diseño en la pestaña Diseños.
2. Haga doble clic en el elemento Destino que contiene el texto.
   
3. Haga clic en Fuente.
4. Añada un atributo role=”button” a la<span> etiqueta.

   <span role="button" ... >Contenido del cuadro de texto</span>

   

Añadir texto alternativo y roles a botones de cierre

Botón Cerrar como imagen

1. Abra su Diseño en la pestaña Diseños.
2. Haga doble clic en el elemento Cerrar que contiene la imagen.
   
3. Haga clic en Fuente.
4. Añada el atributo alt=”close” a la<img> etiqueta.

   <img alt="close" ... />

   Consejo Q: El software de lectura de pantalla leerá en voz alta lo que está contenido en el atributo alt cuando llegue a la imagen.

   

5. Rodea la<img> etiqueta con una<span> etiqueta.
   
6. Añada un atributo role=”button” a la<span> etiqueta.

   <span role="button"><img .../></span>

   Consejo Q: El atributo de rol le dice al visitante que utiliza un lector de pantalla que este elemento es un botón que se puede activar.

   

Botón Cerrar como texto

1. Abra su Diseño en la pestaña Diseños.
2. Haga doble clic en el elemento Cerrar que contiene el texto.
   
3. Haga clic en Fuente.
4. Añada un atributo role=”button” a la<span> etiqueta.

   <span role="button" ...>Contenido del cuadro de texto</span>

   Consejo Q: El atributo de rol le dice al visitante que utiliza un lector de pantalla que este elemento es un botón que se puede activar.

   

Preguntas frecuentes