Las capas de diálogo son similares a las capas estándar, donde muestran contenido adicional en una diapositiva. La diferencia es que las capas de diálogo se superponen a toda la ventana del navegador y atenúan el resto del contenido, lo que crea una experiencia de navegación familiar para todos, incluidos los usuarios de lectores de pantalla. Utilice los cuadros de diálogo modales cuando no desee que los alumnos interactúen con ninguna otra cosa del curso, incluidos los controles del reproductor moderno, mientras la capa esté abierta.

A partir de la actualización de mayo de 2022, puedes convertir capas diapositivas en cuadros de diálogo modales en Storyline 360. Sigue leyendo para obtener más información.

• Capa estándar o capa de diálogo: ¿cuál deberías usar?
• Añadir una capa de diálogo
• Mejore la accesibilidad de la capa de diálogo
• Personalice el color de fondo de la capa
• Comprenda la compatibilidad

Capa estándar o capa de diálogo: ¿cuál deberías usar?

No hay una respuesta correcta o incorrecta a la hora de elegir qué tipo de capa usar, ya que cada una de ellas ofrece beneficios a tu curso. Esta es la diferencia entre el funcionamiento de las capas estándar y las capas de diálogo con algunos consejos generales.

Mientras una capa estándar esté abierta, los alumnos pueden interactuar con cualquier cosa que esté fuera de ella. Las capas estándar son la mejor opción si necesita mostrar contenido adicional, escenarios ramificados o interacciones complejas.

Las capas de diálogo son elegantes e impresionantes, y son excelentes para recordar a los alumnos o ayudarlos a completar una tarea rápida, como leer un mensaje importante o introducir valores en un campo de entrada de datos. Al abrir una capa de diálogo, el foco permanece en el diálogo y su contenido, lo que garantiza que sea el protagonista del espectáculo. Las capas de diálogo atenúan el resto de la ventana del navegador y los alumnos no pueden interactuar con ninguna otra cosa del curso mientras está abierto, como se muestra a continuación. Para volver al contenido de la diapositiva, los alumnos deben interactuar con la capa de diálogo cerrándola o completando una tarea.

Añadir una capa de diálogo

A continuación, se explica cómo agregar una capa de diálogo a una diapositiva.

1. En la vista de diapositivas, crea una capa o selecciona una existente y, a continuación, haz clic en el icono del engranaje.
2. Cuando aparezca la ventana Propiedades de la capa de diapositivas, haga clic en la flecha desplegable situada junto al campo Presentar como y seleccione Diálogo. En este punto, la capa cambia instantáneamente a una capa de diálogo.
   • No se permite buscar capas de diálogo, ya que los alumnos no pueden interactuar con las funciones del reproductor mientras la capa de diálogo esté abierta.
   • El cuadro Impedir que el usuario haga clic en las otras capas se activa automáticamente y aparece atenuado.
   • Puede marcar o desmarcar la casilla Pausar la escala de tiempo de la capa base.

Mejorar la accesibilidad de las capas de diálogo

Los alumnos pueden navegar por las capas de diálogo completamente con un lector de pantalla o un teclado.

Orden de enfoque

El orden de enfoque controla el orden de lectura de los lectores de pantalla y el orden de las pestañas de los elementos interactivos, como botones, puntos de acceso y campos de entrada de datos. Así es como funciona con los cuadros de diálogo modales.

1. Cuando se abre una capa de diálogo, el foco permanece en el diálogo y su contenido.
2. Por defecto, el foco inicial pasa al primer elemento interactivo de la capa de diálogo.
3. Cuando se cierra una capa de diálogo, el foco vuelve al elemento que abrió la capa de diálogo.

Soporte para lectores de pantalla

Las personas que utilizan tecnologías de asistencia, como los lectores de pantalla, utilizan el formato semántico (código fuente) para percibir los sitios web y explorar su contenido con facilidad. El HTML semántico y las aplicaciones de Internet enriquecidas y accesibles (ARIA) informan a los usuarios de lectores de pantalla en qué parte de la página se encuentran y cómo interactuar con el contenido. Mejore la experiencia del lector de pantalla para las capas de diálogo definiendo los atributos de accesibilidad para un título y una descripción alternativos. Consulte las opciones de texto alternativo y cómo usarlas a continuación.

• La etiqueta proporciona texto para el atributo de aria-labelledby accesibilidad. Esto indica al lector de pantalla qué anunciar como título del diálogo modal.
• La descripción proporciona el texto del atributo de aria-describedby accesibilidad. Esto indica al lector de pantalla lo que debe anunciar para el diálogo modal.

En la ventana Propiedades de la capa de diapositivas, simplemente haga clic en las flechas desplegables situadas junto a los campos Etiqueta y Descripción y seleccione uno de los elementos de texto de la diapositiva que aparecen en cada lista desplegable. Si no necesita un título o una descripción alternativos, seleccione Ninguno en las listas desplegables. (Las opciones de etiqueta y descripción aparecen atenuadas en las capas estándar).

Consejo: ¿Se pregunta si todas las capas de diálogo deberían tener una etiqueta alternativa y una descripción? Por lo general, cada capa de diálogo debe tener un título alternativo y una descripción. Sin embargo, las descripciones a veces son opcionales, según el contenido de la capa de diálogo. Consulte este ejemplo de un diálogo modal y de cuándo utilizar las etiquetas ARIA.

Navegación por teclado

La siguiente tabla muestra las teclas para navegar por las capas de diálogo y el comportamiento de cada tecla.

Personalice el color de fondo de la capa

El diseño de fondo de una capa de diálogo afecta a la apariencia general del curso. Tenga en cuenta estos consejos al diseñar la capa de diálogo.

• Si la capa de diálogo no tiene un relleno de color de fondo o tiene un relleno de fondo que no es un color, Storyline 360 cubre el recorrido con una superposición semitransparente de color gris oscuro.
• Si la capa de diálogo ya tiene un fondo semitransparente de cualquier color, Storyline 360 cubre el recorrido con ese color semitransparente.
• Si la capa de diálogo tiene un fondo opaco de cualquier color, Storyline 360 cubre el recorrido con ese color y lo oculta por completo mientras la capa de diálogo esté abierta.

Comprenda la compatibilidad

Las capas de diálogo son exclusivas del reproductor moderno en la actualización de mayo de 2022 y, posteriormente, para Storyline 360. Los archivos de proyecto con capas de diálogo no se abren en versiones anteriores de Storyline 360. Para restablecer la compatibilidad, elimina la capa de diálogo o cámbiala por una capa estándar.