Storyline 360: Cómo diseñar un curso accesible

En los cursos de e-learning, la accesibilidad garantiza que el contenido esté diseñado para todos los alumnos, independientemente de sus capacidades. Crear un curso accesible no es solo algo que deba hacer para cumplir con estándares como las Pautas de accesibilidad del contenido web (WCAG) y la Sección 508. Cuando mejoras la accesibilidad de tu contenido, todos se benefician.

Este artículo te enseña formas específicas de ayudar a los alumnos a interactuar plenamente con tus cursos de Storyline 360.

• Diseña tu curso teniendo en cuenta la accesibilidad
• Haga que el contenido sea accesible para lectores de pantalla y teclados
• Haga que las imágenes sean accesibles
• Haga que el contenido de audio y vídeo sea accesible
• Haga que el texto sea accesible
• Haga que el contenido interactivo sea accesible
• Obtenga ayuda cuando la necesite

Diseñe su curso teniendo en cuenta la accesibilidad

Desea que todos los alumnos, incluidos aquellos con discapacidades visuales, motoras, auditivas, del habla o cognitivas, entiendan, naveguen e interactúen con su curso. Haga que los alumnos se sientan inmediatamente cómodos con la maquetación y el diseño proporcionando instrucciones de accesibilidad al principio del curso.

Estas son algunas de las mejores prácticas en las que puede apoyarse al diseñar su curso.

• Usa un diseño coherente. Un diseño coherente hace que un sitio web sea más fácil de navegar y entender. Dé formato a los estilos de texto y a las diapositivas maestras para que tengan el aspecto que desee y, a continuación, reutilícelos en todo el curso.
• Elimine las distracciones. Los diseños ajetreados pueden provocar que las personas con discapacidades cognitivas pasen por alto información importante. Querrá evitar el desorden, mantener los objetos animados al mínimo, habilitar el reproductor para cambiar a pantalla completa y usar espacios en blanco para mejorar la legibilidad y la legibilidad.
• Usa un lenguaje sencillo. Un lenguaje claro y directo apropiado para tu contenido ayuda a tu audiencia a leer y comprender la información.
• Usa fuentes accesibles. Da formato al diseño para aumentar la legibilidad con fuentes simples y rectas, como las fuentes sans serif. No utilices el formato en mayúsculas, ya que es difícil de leer.
• Usa enlaces descriptivos. Proporcione a los alumnos hipervínculos con el contexto adecuado del lugar al que irán dirigidos al hacer clic en el enlace. Por ejemplo, «haz clic aquí» no indica a los alumnos qué hace el enlace. En su lugar, hipervínculo con una frase específica: «Lea nuestra declaración de política».
• Ofrezca a los alumnos comentarios claros. Los alumnos deben recibir una confirmación cuando completen una acción y los mensajes de error deben proporcionar instrucciones claras.
• Ofrezca alternativas basadas en texto. Usa texto para comunicar detalles importantes. Si utiliza imágenes o animaciones para proporcionar un contexto esencial, ofrezca alternativas basadas en texto para los alumnos con ceguera o visión limitada. Por ejemplo, usa texto alternativo (alt) para describir las imágenes. O bien, puede agregar un enlace opcional a una diapositiva animada que abra una capa estática basada en texto con la misma información para los alumnos que utilizan lectores de pantalla.
• No utilices contenido intermitente. En el caso de la epilepsia fotosensible, el parpadeo puede desencadenar convulsiones. Las animaciones, los GIF y los vídeos no deben parpadear, parpadear ni parpadear más de tres veces por segundo.

Storyline 360 le permite crear cursos que admiten el nivel AA de las WCAG 2.1. Los detalles específicos sobre los criterios de éxito se describen en nuestra plantilla voluntaria de accesibilidad de los productos (VPAT). Excepciones: Storyline 360 no es compatible con la versión 1.3.5 Identificar el propósito de entrada para los campos de entrada de datos ni la 3.1.2 El idioma de las partes para varios idiomas de lectores de pantalla del mismo curso.

Haz que el contenido sea accesible para los lectores de pantalla y los teclados

Los estudiantes con ceguera o visión limitada suelen utilizar lectores de pantalla para navegar por los cursos de e-learning. Storyline 360 es compatible con los lectores de pantalla JAWS, NVDA, VoiceOver y TalkBack con nuestros navegadores compatibles. Otros alumnos pueden confiar únicamente en los teclados o en las alternativas de teclado para navegar por el contenido en línea. Haz clic aquí para obtener información sobre cómo tus alumnos navegan por el contenido de las diapositivas con un teclado o un lector de pantalla.

Las limitaciones visuales abarcan un amplio espectro, como la baja visión, el daltonismo y la ceguera total. También incluye a los alumnos que tienen dificultades para leer el texto en pantalla debido a problemas de aprendizaje o porque el idioma del curso es un segundo idioma para ellos. Afortunadamente, hay varias formas de hacer que tu contenido visual sea accesible, como se describe a continuación.

Personalice el orden de enfoque para proporcionar un contexto significativo

El orden de enfoque que defina para cada diapositiva en Storyline 360 controla el orden de lectura de los lectores de pantalla y el orden de las pestañas de los elementos interactivos, como botones, zonas activas y campos de entrada de datos. Personaliza el orden de enfoque de cada diapositiva para que tenga más sentido.

Identifique el idioma del curso

Storyline 360 añade un código de idioma para los lectores de pantalla al archivo story.html publicado en función del idioma que seleccione para las etiquetas de texto. Puedes cambiar fácilmente a otro idioma o a un conjunto diferente de etiquetas de texto personalizadas.

Personaliza las etiquetas de texto

Los lectores de pantalla utilizan etiquetas de texto para describir botones, mensajes, instrucciones del lector de pantalla y otros controles del reproductor. Aquí encontrarás todo lo que necesitas saber sobre cómo trabajar con etiquetas de texto en Storyline 360.

Permita que los alumnos se salten los elementos de navegación del reproductor

Deja que los alumnos se salten la navegación repetitiva a lo largo del curso. Cuando los usuarios que solo utilizan el teclado y los usuarios de lectores de pantalla pasan junto al último objeto de una diapositiva, pueden volver a la parte superior de la diapositiva y pasar por alto todos los controles del reproductor. Pueden pulsar la barra espaciadora o la tecla Entrar para activar el atajo de navegación por omisión y volver a la parte superior de la diapositiva. O bien, pueden pulsar la tecla Tab para ir a los controles del reproductor.

Consejo: El atajo de navegación por omisión está activado de forma predeterminada, por lo que los alumnos no tienen que navegar por todas las funciones del reproductor para volver a escuchar el contenido de la diapositiva. Si necesitas desactivarlo, puedes deshabilitar el atajo de navegación para saltar.

Elija los colores del indicador de enfoque visible

Cuando los alumnos navegan con el teclado, un contorno, denominado indicador de enfoque, resalta el objeto actualmente seleccionado. Sin un indicador de enfoque, estos alumnos no sabrán en qué parte de la página se encuentran, por lo que es fundamental.

En Storyline 360, puedes elegir dos colores de enfoque. Un indicador de enfoque de dos colores ayuda a los alumnos a ver el rectángulo de enfoque en fondos oscuros y claros.

Aumente el tamaño de fuente del reproductor

Como autor del curso, tiene control total sobre el tamaño del texto de la diapositiva, pero ¿qué pasa con los elementos del reproductor, como los botones, las pestañas de la barra lateral y los mensajes emergentes? Es fácil establecer el tamaño de fuente a partir de cualquier porcentaje entre el 75% y el 200% en la configuración del reproductor.

Haz que las imágenes sean accesibles

Añadir texto alternativo

El contenido no textual necesita texto alternativo (texto alternativo) para describir su significado a los alumnos que utilizan tecnologías de asistencia, como los lectores de pantalla. La buena noticia es que es fácil agregar texto alternativo en Storyline 360.

Solo necesita agregar texto alternativo a los objetos que transmitan significado o contexto al alumno. Oculta las imágenes y formas puramente decorativas de las herramientas de accesibilidad cuando no contribuyan al propósito del contenido. De lo contrario, los usuarios de lectores de pantalla se cansarán de recibir anuncios innecesarios.

Consulta estos consejos para escribir un buen texto alternativo (extraídos de la página 8 de nuestro libro electrónico sobre accesibilidad):

• Transmite el mismo contenido e información que presentan el objeto o la imagen, sin necesidad de incluir ningún texto en pantalla.
• Sé conciso sin escatimar en información relevante.
• No incluya «imagen de» ni «gráfico de» y simplemente proporcione la información necesaria.
• No utilices abreviaturas ni signos de puntuación excesivos, como ***, que los lectores de pantalla leerán de forma molesta como «asterisco, asterisco, asterisco».

Haga que el contenido de audio y vídeo sea accesible

No se reproduzca automáticamente

Las personas que usan lectores de pantalla navegan escuchando, así que no permitas que el contenido de audio o video comience a reproducirse automáticamente. Deja que tus alumnos controlen la reproducción. A continuación, te explicamos cómo ajustar las propiedades del vídeo.

Aproveche los controles de vídeo accesibles

Habilita los controles de vídeo accesibles de Storyline 360 en el reproductor moderno para ofrecer una experiencia más inclusiva a todos los alumnos.

Agrega subtítulos opcionales

Los subtítulos son una versión textual del audio necesaria para comprender el contenido. Importa subtítulos opcionales o crea subtítulos opcionales directamente en Storyline 360 con el editor integrado. Es fácil de hacer y produce grandes dividendos.

Además, los subtítulos opcionales no son solo para alumnos sordos o con problemas de audición. Si el curso es un segundo idioma para los alumnos, los subtítulos pueden ayudarlos a comprender completamente el contenido. Y los alumnos que se encuentren en entornos ruidosos también apreciarán los subtítulos.

Proporcione una transcripción

Las transcripciones son audio convertido a texto escrito. Son diferentes de los subtítulos opcionales, que son fotogramas codificados en el tiempo. Genere automáticamente transcripciones de vídeo sincronizadas a partir de subtítulos opcionales.

Haga que el texto sea accesible

Utilice una relación de contraste de 4. 5:1

Algunos alumnos tienen baja visión en lugar de ceguera total. Para que el curso sea accesible para los alumnos con problemas de visión, utilice texto en pantalla con una relación de contraste de 4, 5:1 o superior con respecto al color de fondo.

Si superpone texto en una imagen de fondo, reduzca el brillo y el contraste de la imagen para facilitar la lectura del texto. O bien, coloca una forma semitransparente entre la imagen y el texto para aumentar la relación de contraste.

Para determinar rápidamente la relación de contraste, prueba este comprobador de contraste basado en la web o descarga esta herramienta de comprobación de contraste.

Ofrezca una alternativa de audio para el texto en pantalla

Es posible que algunos alumnos puedan ver su curso, pero prefieran escuchar en lugar de leer. Es posible que tengan problemas de aprendizaje, como dislexia, que no lean bien o que se encuentren en un entorno ajetreado en el que no puedan concentrarse en la pantalla. O quizás el idioma del curso sea un segundo idioma para ellos. Considere la posibilidad de ofrecer una versión en audio de las diapositivas basadas en texto para estos alumnos. Por ejemplo, puede reproducir una narración opcional cuando los alumnos hagan clic en el icono de un altavoz o presionen un método abreviado de teclado.

Deja que Storyline 360 convierta rápidamente tu texto en voz si grabar una narración te parece abrumador. Incluso puedes elegir la voz y el idioma para asegurarte de que cada palabra suene bien.

Usa texto accesible, estilos de texto y autoajuste de texto

El texto accesible de Storyline 360 permite a los alumnos personalizar el tamaño y el estilo del texto mediante hojas de estilo personalizadas o extensiones de navegador, lo que lo hace más legible y accesible que nunca.

Los estilos de texto accesibles en Storyline 360 crean una mayor coherencia en el diseño y ayudan a los lectores de pantalla. Esto se debe a que los estilos de texto comparten la jerarquía de información con los lectores de pantalla para que puedan identificar y anunciar encabezados, hipervínculos, citas y párrafos.

Otro aspecto fundamental a tener en cuenta es el tamaño del texto. Después de todo, si el texto es demasiado pequeño, los alumnos podrían tener problemas para leerlo. Con las mejoras en el ajuste automático del texto, puedes configurar los cuadros de texto para que tengan un tamaño fijo sin reducir el tamaño del texto si se desborda, de forma que tus alumnos podrán leerlo fácilmente.

Activa los controles de accesibilidad

Permita a los alumnos personalizar su experiencia activando los controles de accesibilidad en el reproductor del curso. Estos controles permiten a los alumnos cambiar el modo de zoom, activar o desactivar el texto accesible y mostrar los atajos de teclado.

Haga que el contenido interactivo sea accesible

La creación de contenido interactivo mantiene el interés de sus alumnos. Los dos elementos interactivos más comunes son las funciones de navegación y los cuestionarios. Además, Storyline 360 tiene muchos objetos interactivos, como botones y campos de entrada de datos, para que puedas crear diapositivas interactivas.

No confíes solo en el color para transmitir significado

Si utilizas el color para proporcionar un contexto o significado importante, ofrece equivalentes de texto, audio o imagen para los alumnos daltónicos. Por ejemplo, si utilizas el verde para indicar una respuesta correcta y el rojo para indicar una respuesta incorrecta, incluye audio o texto en pantalla para transmitir la misma información a los alumnos que no puedan distinguir entre verde y rojo.

Del mismo modo, no se base únicamente en el color para identificar los hipervínculos. Por ejemplo, subraya el texto con un enlace y proporciona instrucciones para las imágenes con enlaces para que los alumnos sepan que son interactivas.

Lo ideal es trabajar con alguien daltónico para garantizar la mejor experiencia posible. Color Oracle es un simulador de daltonismo gratuito si esa no es una opción. Elimina las conjeturas a la hora de diseñar para daltónicos al mostrarte lo que la gente verá en tiempo real.

No confíe únicamente en los estados de desplazamiento para mostrar los detalles

Si bien los estados de desplazamiento (es decir, los efectos de giro que requieren el uso del ratón) son excelentes para transmitir interactividad, no confíe en ellos para mostrar información importante. Considere la posibilidad de ofrecer una alternativa accesible desde el teclado si utiliza los estados de desplazamiento para mostrar texto o imágenes. Por ejemplo, está bien cambiar el color de un botón cuando se pasa el ratón sobre él para indicar que se trata de un objeto en el que se puede hacer clic. Aun así, no querrás mostrar el texto de los comentarios al pasar el ratón sin proporcionar otra forma de acceder a la información. Una alternativa para este ejemplo sería un método abreviado de teclado que reproduzca una versión en audio de los comentarios para quienes no usen el ratón.

No pongas límites de tiempo

Los temporizadores pueden impedir que el alumno utilice las alternativas accesibles que has agregado o pueden crear un obstáculo para concentrarse. Evite los temporizadores de los cuestionarios y evite usar activadores para crear interacciones cronometradas siempre que sea posible.

Ofrezca consejos sobre las preguntas del cuestionario

Cuando una pregunta del cuestionario acepte más de una opción de respuesta, incluya instrucciones para los usuarios del lector de pantalla. Algunos ejemplos de consejos son: Es posible dar varias respuestas, seleccionar todas las que correspondan y rellenar los espacios en blanco.

Cree diapositivas de resultados de cuestionarios accesibles

Storyline 360 incluye plantillas de diapositivas de resultados de cuestionarios accesibles con diseños frescos que cumplen con las pautas de color, contraste y enfoque, y la opción de definir colores de tema personalizados para los elementos correctos e incorrectos del cuestionario. Utilice las nuevas plantillas de diapositiva de resultados para crear rápidamente los resultados del cuestionario a los que se pueda acceder de forma predeterminada.

Ofrezca alternativas para las interacciones de arrastrar y soltar

Las interacciones de arrastrar y soltar requieren un ratón para navegar, lo que las hace difíciles o imposibles para los alumnos con problemas de movilidad. Si los va a agregar al curso, proporcione alternativas basadas en texto o controladas por teclado. Por ejemplo, puede utilizar una interacción accesible desde el teclado, como una pregunta coincidente o una interacción con un control deslizante. También puedes dar a los alumnos una descripción textual detallada de la información que necesitan saber de la interacción.

¿Quieres diseñar una interacción de arrastrar y soltar accesible desde el teclado? Consulta el ejemplo descargable de Sarah Hodge y el seminario web gratuito en el que explica cómo crearla.

Añada accesibilidad a las imágenes de 360°

Una imagen de 360° es una fotografía panorámica que crea experiencias de aprendizaje envolventes, como visitas virtuales y actividades exploratorias.

Añada texto alternativo a los archivos multimedia, botones, marcadores y etiquetas de puntos clave en interacciones de 360° para que todos los alumnos puedan disfrutar de la misma experiencia atractiva. Hemos incorporado una navegación accesible para que tus alumnos puedan usar un teclado o un lector de pantalla.

Utilice capas de diálogo

Convierta una capa estándar en una capa de diálogo para que las interacciones sean aún más intuitivas e inclusivas. Cuando los alumnos encuentran una capa de diálogo, el foco del teclado permanece en el diálogo modal y su contenido, atenuando todo lo demás en la ventana del navegador para que los alumnos no puedan interactuar con ninguna otra cosa del curso mientras la capa esté abierta.

Los alumnos pueden navegar por las capas de diálogo con un lector de pantalla o un teclado. Mejore la experiencia de lectura de pantalla de las capas de diálogo definiendo los atributos de accesibilidad para un título y una descripción alternativos.

Obtenga ayuda cuando la necesite

¿Quieres profundizar? Consulte nuestra plantilla voluntaria de accesibilidad de productos Storyline 360 (VPAT®), el índice de accesibilidad, el libro electrónico gratuito sobre el diseño de cursos de e-learning accesibles y los seminarios web sobre accesibilidad.

Además, visite https://webaim.org para obtener soluciones integrales de accesibilidad web, que incluyen capacitación, herramientas y soporte técnico de la comunidad.

Y cuando necesites ayuda, simplemente publica una pregunta en E-Learning Heroes, la comunidad de cursos de e-learning más grande y participativa del mundo. Hay más de 1 000 000 de miembros deseosos de ayudar. Lo más probable es que alguien ya haya resuelto un problema que estás experimentando y tenga la sabiduría necesaria para compartirlo.