Accesibilidad en Articulate Storyline: motivos para utilizar el reproductor moderno

En Articulate Storyline 360 existe la posibilidad de utilizar dos estilos de «reproductor» para todo nuestro proyecto de contenido eLearning: reproductor clásico y reproductor moderno. Entre ambos hay importantes diferencias que afectan a la accesibilidad de nuestros contenidos eLearning.

En este artículo vamos a concluir que para que tus contenidos con Articulate Storyline sean accesibles siempre debemos escoger la opción del reproductor moderno. Te explicaré cuáles son los principales motivos, así como algunas pautas para que lo puedas configurar de forma adecuada. ¡Comencemos! 🚀

El «reproductor» en Storyline y la accesibilidad

En Articulate Storyline el «reproductor» se refiere al marco que rodea los contenidos eLearning que realizamos . Este marco incluye controles como pueden ser los botones de anterior/siguiente, el menú, la barra de búsqueda, glosario, etc.

Además, contamos con diversas opciones para personalizar el reproductor a nuestro gusto. Incluso podemos ocultarlo por completo para establecer un sistema de navegación propio. Pero de un modo u otro, es necesario elegir entre dos tipos diferentes: clásico o moderno.

Cinta de opciones en las propiedades del reproductor de Storyline. Aparecen marcado el estilo de reproductor con las opciones moderno y clásico.

Habitualmente los motivos para decidirse por un tipo u otro suelen ser estéticos. Sin embargo, menos conocidos son los aspectos de accesibilidad en los que influye esta decisión. Y es que, el estilo que escojamos influye en cuestiones tan diversas como la reproducción de video, la codificación de todos los controles por defecto, o la capacidad de personalizar la interfaz.

No importa si habitualmente ocultas los controles por defecto y utilizas un menú personalizado. Como veremos, muchas de estas opciones y características del reproductor también afectan a la accesibilidad global.

En este artículo voy a revisar los 8 principales motivos que creo que deberán convencerte para escoger el reproductor moderno en tu próximo proyecto de eLearning accesible con Storyline:

  1. Permite utilizar dos colores en el foco de teclado.
  2. Mejora los controles de video y los hace más accesibles.
  3. Mejora el control del tamaño de los subtítulos.
  4. Su menú de navegación es más accesible.
  5. Puedes utilizar texto alternativo en el logo.
  6. Zoom del navegador más accesible.
  7. La barra lateral se puede esconder.
  8. Mejora la configuración de la barra de búsqueda arrastable.

Motivos que hacen más accesible al reproductor moderno en Stoyline

1. Permite utilizar dos colores en el foco de teclado

El indicador de foco es la marca visual que nos permite distinguir cuál es el elemento interactivo que está enfocado en cada momento cuando utilizamos el teclado para navegar. Por ejemplo, señala botones, enlaces y controles varios de la interfaz. Es fundamental para personas que tienen dificultades en la movilidad o con baja visión. También totalmente imprescindible si se nos ha averiado el ratón.

Tres elementos interactivos accesibles en Storyline con forma de globo. Un recuadro negro y amarillo rodea el primero de ellos.
Pulsando TABULACIÓN se mueve este foco al siguiente elemento. Se activan pulsando INTRO.

Para cumplir adecuadamente con las normas de accesibilidad, como es el criterio WCAG 2.4.11 (nivel AA), es necesario que haya una diferencia suficiente entre el estado enfocado y desenfocado.

El reproductor clásico de Stoyline lo soluciona mediante una línea gruesa alrededor del elemento del elemento enfocado. Sin embargo, este color es único e invariable para todo el proyecto. Y esto supone un problema porque habitualmente nuestros diseños incluyen elementos interactivos tanto sobre fondos oscuros como claros.

4 botones interactivos con fondo oscuro y uno de ellos enmarcado con línea amarilla. Por otro lado, botón interactivo con fondo blanco enmarcado del mismo modo.
A la izquierda se aprecia con claridad el foco sobre el elemento interactivo «Física o motriz porque tiene un fondo oscuro», mientras que a la derecha, la misma apariencia de foco apenas contrasta con el fondo blanco.

El reproductor moderno, sin embargo, recurre a un sistema de dos colores. De este modo, nos aseguramos de que cualquier elemento interactivo será distinguible al ser enfocado desde teclado, como se puede apreciar en la siguiente imagen:

4 botones interactivos con fondo oscuro y uno de ellos enmarcado con dos líneas (amarilla y negra). Por otro lado, botón interactivo con fondo blanco enmarcado igual.
Ahora el elemento de la derecha sobre fondo claro también se distingue con claridad, al aportar una segunda línea negra.

Puedes encontrar su configuración en las Propiedades del Reproductor, dentro del las opciones de Colores y Efectos. Los colores escogidos por defecto suelen funcionar bien, pero si quieres cambiarlos debes recordar que deben tener entre ambos un contraste mínimo de 3:1. Lo puedes comprobar con herramientas como WebAIM Contrast Checker.

Pantalla de configuración de Storyline de colores del foco de accesibilidad. Indica que la ratio de contraste entre ambos debe ser de 3:1 o superior.

2. Mejora los controles de video y los hace más accesibles

Si utilizamos vídeos incrustados en nuestros contenidos accesibles en Storyline, no hay nada que pensar. Es totalmente imprescindible escoger el reproductor moderno. Independientemente de que utilicemos o no navegación propia, todos los videos incrustados utilizarán un reproductor correspondiente con el elegido en el proyecto. Y el reproductor de video clásico tiene graves problemas de accesibilidad, como son la ausencia de contraste suficiente o de nombres accesibles.

En este reproductor de video clásico de Storyline no se aprecia con claridad el foco sobre la línea de tiempo.
El reproductor de vídeo clásico de Storyline deja bastante que desear en todos los aspectos

Por el contrario, el reproductor de video moderno incluye multitud de mejoras. La primera de ellas es apreciable visualmente, ya que sus controles son más legibles y con mejoras en el contraste para cumplir con WCAG 1.4.3 (nivel AA). Pero, además, incluye otras características muy importantes:

  • Control de volumen independiente del global de las diapositivas, con atajos de teclado.
  • Control de velocidad de reproducción.
  • Modo imagen en imagen para permitir interaccionar a la vez con la diapositiva.
  • Modo pantalla completa.
  • Nombres accesibles para los controles más importantes.
Reproductor moderno de Articulate Storyline. Los controles de volumen y subtítulos están incluidos dentro del reproductor y su derecha aparecen los nuevos mencionados.

3. Mejora el control del tamaño de los subtítulos

Aumentar el tamaño de los subtítulos (closed captions) de nuestros videos cuando utilizamos el reproductor clásico es simplemente una pesadilla. Si modificamos el tamaño de la fuente del reproductor, ¡También cambia el tamaño de todos los controles! 😱

Reproductor de video clásico en Storyline en el que se ha aumentado el tamaño de la fuente al máximo.
Reproductor clásico: Al configurar el tamaño máximo los controles «anterior» y «siguiente» están despropporcionados.

En cambio, si utilizamos el reproductor moderno tenemos la posibilidad de escoger dos tipos y tamaños de fuente diferentes. Una para los subtítulos y otra para el resto de elementos del reproductor. En esta captura se puede apreciar la diferencia entre ambas:

Reproductor de video clásico en Storyline en el que se ha aumentado el tamaño de fuente de los subtítulos mientras que se ha mantenido la del reproductor a un tamaño menor

Al igual que la configuración de color de foco, la de las fuentes también se encuentra en Propiedades del Reproductor, dentro del las opciones de Colores y Efectos.

Configuración de tipo y tamaño de Fuentes. El ejemplo tiene Lato a 120% para el reproductor y Atkinson Hyperlegible a 170% para los subtítulos.
Mi recomendación es elevar siempre algo el tamaño de los subtítulos.

4. Menú de navegación más accesible

Con el reproductor clásico la única forma de saber que una diapositiva había sido ya visitada era a través de un tono de color diferente en estos elementos de menú:

Menú de navegación en Storyline con reproductor clásico. Señalo cuáles son elementos visitados, el actual y no visitados.

Pero esto es una mala práctica. No se respeta, entre otros, el criterio de conformidad 1.4.1 Uso del color (nivel A) de las WCAG, que indica que el color no puede ser utilizado como única vía para trasmitir información.

Por otro lado, el menú de navegación incluido en el reproductor moderno incluye marcadores de estado cuya información no se basa exclusivamente en el color:

Menú de navegación en Storyline con reproductor moderno. Señalo elos elementos visitados, que aparecen con una marca de verificación a su derecha.
Los elementos ya visitados en el menú del reproductor moderno aparecen con una marca visible a su derecha.

Además, también están adecuadamente programados para lectores de pantalla. Con el menú del reproductor moderno cualquier persona que accede exclusivamente de forma auditiva sabrá si ha visitado ya la diapositiva y/o si el contenido se encuentra bloqueado.

Para hacer el menú aún más accesible, también hay que configurar bien el «color de acento«, ya que es el que utiliza Storyline para la marca que determina la diapositiva actual en el menú. Mi recomendación es utilizar algún color que tenga un alto contraste (mínimo 4.5:1).

Opciones de Colores y Efectos del reproductor moderno. Se señala el color de acento configurado, que es verde azulado.
En este ejemplo se ha escogido verde azulado y en la imagen se aprecia el contraste con el fondo negro del menú

5. Texto alternativo en el logo

Con el reproductor moderno podemos establecer un texto alternativo para nuestro logo u ocultarlo a las tecnologías de accesibilidad. Con el reproductor clásico, el logo siempre se anuncia incorrectamente a las tecnologías asistivas y no existen estas opciones.

Configuración de texto alternativo para el logo del reproductor moderno de Storyline.

Mi recomendación general es ocultar el logo a las herramientas de accesibilidad, ya que éste no suele tener funcionalidad alguna.

6. Zoom del navegador más accesible

Algunas personas necesitamos ampliar el tamaño de los elementos que vemos en pantalla por encima de los valores que hay por defecto. Esto puede ser debido al tipo o circunstancias de la pantalla que utilizamos y/o por algún tipo de problema visual.

Con el reproductor clásico de Storyline podemos ampliar la diapositiva, pero se pierde la funcionalidad de los controles del reproductor, que desaparecen de la pantalla:

Dispositiva de contenido eLearning en Stoyline en la que se ha hecho zoom para ampliar una parte (reproductor clásico).
Se observa que hemos perdido completamente el menú y los controles de avance y retroceso al hacer zoom.

En cambio, si utilizamos el reproductor moderno, encontramos una nueva opción que nos permite ampliar la pantalla sin perder los controles del reproductor. Si la activa el usuario (o la dejamos activada mediante variables del proyecto), podremos ampliar la diapositiva sin perder las funciones de navegación:

Dispositiva de contenido eLearning en Stoyline. Se ha aplicado zoom y está desplegado el menú de accesibilidad con la opción "Habilitar zoom del navegador" activada.
Se observa que se mantienen los controles de navegación y el acceso al menú.

7. La barra lateral se puede esconder

La presencia permanente de una barra lateral con información (acceso a glosario, notas, menú, etc.) es algo que puede distraer a cualquier aprendiz. Aún puede ser más acusado el problema para cualquier usuario que tenga algún problema cognitivo (Entre el 5% y el 10% de la población mundial tiene dislexia).

Sin embargo, el reproductor clásico de Storyline no tiene medio de ocultar la barra lateral. Y esto supone una sobrecarga cognitiva innecesaria para los usuarios.

Actividad de drag and drop. en Storyline. El menú de todo el contenido aparece a la izquierda y no hay controles para ocultarlo.
Ejemplo de contenido no accesible en el que el menú fijo puede suponer un problema añadido.

En contraste, el reproductor moderno incorpora un control que permite esconder la barra lateral, facilitando la concentración en el contenido eLearning. Aunque no responde a un criterio específico de WCAG, retirar elementos superfluos puede impactar muy positivamente para facilitar la concentración de cualquier aprendiz.

Reproductor moderno de Storyline con menú, glosario y notas en barra lateral. Señalo un icono de "hamburguesa".
El icono marcado tiene la función de ocultar toda la barra lateral, facilitando el aprovechamiento del contenido fundamental.

8. Mejora la configuración de la barra de búsqueda arrastrable

Por último, en Storyline es habitual utilizar diapositivas que cuentan con una narraciones y/o animaciones en una línea de tiempo. Para que este tipo de contenidos sean accesibles, entre otras prácticas, es recomendable incluir la posibilidad de que el usuario pueda controlar el tiempo y reproducir el contenido desde diferentes puntos.

Barra de búsqueda. Incluye controles de iniciar reproducción, línea de tiempo arrastrable y reiniciar reproducción.

Sin embargo, puede darse el caso de que necesitemos que nuestros alumnos no se salten ninguna parte de la animación. Es decir, establecer la visualización de toda la línea temporal como requisito de avance por el contenido.

Para conseguir esta restricción con el reproductor clásico, establecemos la barra de búsqueda como de «sólo lectura», pero al hacerlo impedimos completamente que el usuario pueda revisar el contenido desde diferentes puntos temporales.

Configuración de la barra de búsqueda en Storyline para reproductor clásico. Hay dos opciones: "Permitir que el usuario arrastre la barra de búsqueda" y "La barra de búsqueda es de sólo lectura". Indico la segunda.
En el reproductor clásico sólo podemos escoger «sólo lectura»

En cambio, el reproductor moderno incluye una nueva opción: «permitir la navegación manual tras finalizar». Al usar esta nueva opción la primera reproducción será de recorrido completo obligatorio, pero a partir de la segunda ya el usuario tendrá libertad para recorrer el contenido como prefiera.

Configuración de la barra de búsqueda en Storyline para reproductor moderno. Tiene las misma opciones que el reproductor clásico más la mencionada en el párrafo anterior, que es la señalada.
Mediante esta opción, el aprendiz puede pausar la reproducción, pero sólo podrá arrastrarla tras una primera reproducción completa.

Resumen

Y hasta aquí los motivos principales que hacen de la elección del reproductor moderno un «must have» si utilizamos Storyline y queremos que nuestros contenidos sean accesibles.

Como has podido comprobar, la elección del reproductor es independiente de la decisión que vayas a tomar acerca de utilizar o no el sistema de navegación nativo de Storyline. También repercute en elementos de programación visibles (ej: foco de teclado) y no visibles (ej: nombres accesibles que interpretan los lectores de pantalla).

Además, si incrustas videos en tus diapositivas las mejoras son notables, ya que el reproductor moderno está a «años luz» del clásico en cuanto a accesibilidad y usabilidad.

Así y todo, Storyline sigue contando con algunas limitaciones en accesibilidad. Algunas de ellas remediables y otras insalvables de las que es importante informar a nuestros alumnos o proporcionarles alternativas. En cualquier caso, te invito a contactar conmigo si buscas ayuda para su diseño y adaptación a criterios de accesibilidad.

¿Conoces alguna otra ventaja del reproductor moderno que tenga impacto en la accesibilidad? ¡Déjala en la caja de comentarios! 😀

Mario G. Almonte es consultor y diseñador instruccional de e-Learning. Master en Educación y Nuevas Tecnologías por la UDIMA, lleva 18 años asesorando a emprendedores y organizaciones en el desarrollo de proyectos digitales. Desde 2012 comparte en el blog aprendizajeenred.es experiencias y análisis sobre e-Learning.

También interesante:

2 comentarios en «Accesibilidad en Articulate Storyline: motivos para utilizar el reproductor moderno»

    • Gracias por tu comentario, Alejandro. Hay que tener en cuenta que tampoco es la panacea de la accesibilidad pero lo que está claro es que Articulate ha abandonado el clásico y cualquier nueva mejora de accesibilidad también la incorporará al reproductor moderno.
      Un saludo.

      Responder

Deja un comentario

Pulsa aquí para ver la información fundamental sobre protección de datos
Responsable: Mario Almonte.
Finalidad: Moderar y responder a los comentarios enviados desde la web.
Legitimación: Tu consentimiento.
Destinatarios: Hosting: Cubenode System S.L. Almacena los datos de esta web de forma segura.
Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir tus datos.