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

Artículo actualizado el

Este artículo se aplica a:

En el 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 debes hacer para cumplir con los estándares, como las Pautas de accesibilidad al contenido web (WCAG) y la Sección 508. Cuando mejoras la accesibilidad de tu contenido, todos se benefician.

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

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, comprendan, naveguen e interactúen con su curso. Haga que los alumnos se sientan cómodos de inmediato con la distribución y el diseño proporcionando instrucciones de accesibilidad al principio del curso.

Estas son algunas de las prácticas recomendadas en las que puedes apoyarte mientras diseñas tu curso.

  • Utilice un diseño coherente. Un diseño coherente hace que un sitio web sea más fácil de navegar y entender. Da formato a los estilos de texto y a los patrones de diapositiva para que tengan el aspecto que desees y, luego, vuelve a usarlos en
  • Elimine las distracciones. Los diseños ocupados pueden hacer que las personas con discapacidades cognitivas pierdan información importante. Querrás evitar el desorden, mantener los objetos animados al mínimo y usar los espacios en blanco para mejorar la legibilidad y la legibilidad.
  • Usa un lenguaje sencillo. Un lenguaje claro y sencillo apropiado para tu contenido ayuda a tu audiencia a leer y entender la información.
  • Usa fuentes accesibles. Da formato a tu diseño para aumentar la legibilidad mediante el uso de fuentes simples y rectas, como las fuentes sans serif. No utilices el formato en mayúsculas, ya que es difícil de leer.
  • Utilice enlaces descriptivos. Proporcione a los alumnos hipervínculos con el contexto adecuado de adónde los llevará al hacer clic en el enlace. Por ejemplo, «hacer clic aquí» no indica a los alumnos qué hace el enlace. En su lugar, haga un hipervínculo con una frase específica: «lea nuestra declaración de política».
  • Proporcione a los alumnos comentarios claros. Los alumnos deben recibir confirmación cuando completan una acción y los mensajes de error deben proporcionar instrucciones claras.
  • Proporcione alternativas basadas en texto. Usa texto para comunicar detalles importantes. Si utilizas imágenes o animaciones para proporcionar un contexto esencial, ofrece alternativas basadas en texto para los alumnos con discapacidades visuales. Por ejemplo, usa texto alternativo (alt) para describir las imágenes. O bien, 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 usan lectores de pantalla.
  • No utilices contenido intermitente. En el caso de la epilepsia fotosensible, el parpadeo puede accionador convulsiones. Las animaciones, los GIF y los vídeos no deben parpadear, parpadear ni parpadear más de tres veces por segundo.

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

Los alumnos con discapacidades visuales suelen utilizar lectores de pantalla para navegar por los cursos de e-learning. Storyline 3 es compatible con los lectores de pantalla JAWS, NVDA, VoiceOver y TalkBack con nuestros navegadores compatibles. Otros alumnos pueden confiar únicamente en teclados o alternativas de teclado para navegar por el contenido en línea.

Las deficiencias visuales cubren un amplio espectro, que incluye baja visión, daltonismo y 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.

Personalizar el orden de enfoque para proporcionar un contexto significativo

El orden de enfoque que definas para cada diapositiva en Storyline 3 controla el orden de lectura de los lectores de pantalla y el orden de tabulación de los elementos interactivos, como botones, zonas activas y campos de entrada de datos. Personalice el orden de enfoque de cada diapositiva para que tenga más sentido.

Identificar el idioma del curso

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

Personalizar 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 3.

Permitir a los alumnos omitir los elementos de navegación del reproductor

Permite que los alumnos se salten la navegación repetitiva a lo largo del curso. Cuando los usuarios que solo usan teclado y lectores de pantalla pasan tabulando el último objeto de una diapositiva, tienen la opción de volver a la parte superior de la diapositiva, sin pasar por alto todos los controles del reproductor. Pueden pulsar la barra espaciadora o la tecla Intro para activar el acceso directo de omisión de navegación y volver a la parte superior de la diapositiva. O bien, pueden pulsar la tecla Tabulador para pasar a los controles del reproductor.

Consejo: El acceso directo de omisión de navegación está habilitado 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 desactivar el acceso directo de omisión de navegación.

Elija los colores del indicador de enfoque visible

Cuando los alumnos navegan con un teclado, un esquema, denominado indicador de enfoque, resalta el objeto seleccionado actualmente. 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 3, puedes cambiar el color del indicador de enfoque para complementar el diseño del curso.

Hacer accesibles las imágenes

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 3.

Solo necesitas agregar texto alternativo a los objetos que transmitan significado o contexto al alumno. Oculta 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 sentirán cansados por anuncios innecesarios.

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

  • Transmita el mismo contenido e información que presenta el objeto o la imagen, sin necesidad de incluir ningún texto en pantalla.
  • Sea conciso sin escatimar en información relevante.
  • No incluyas «imagen de» y «gráfico de» y solo proporciona la información necesaria.
  • No utilices abreviaturas ni signos de puntuación excesivos como ***, que los lectores de pantalla leerán como «asterisco, asterisco, asterisco».

Aumentar 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 la fuente desde cualquier porcentaje entre el 75% y el 200% en la configuración del reproductor.

Hacer accesible el contenido de audio y vídeo

No reproducir 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 mostramos cómo ajustar las propiedades del video.

Añadir subtítulos opcionales

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

Además, los subtítulos opcionales no son solo para alumnos con discapacidades auditivas. Si el curso es un segundo idioma para los alumnos, los subtítulos pueden ayudarlos a entender completamente el contenido. Y los alumnos en entornos ruidosos también apreciarán los subtítulos.

Proporcionar una transcripción

Las transcripciones son audio convertidas en texto escrito. Son diferentes de los subtítulos opcionales, que son fotogramas codificados por tiempo. Considera agregar una transcripción a través del panel de notas del reproductor para cada diapositiva o un archivo adjunto descargable para todo el curso. Asegúrese de incluir los detalles necesarios en la transcripción escrita que se transmite visualmente en las imágenes y los videos para que los alumnos tengan toda la información.

Hacer accesible el texto

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 el 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, coloque 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, pruebe este comprobador de contraste basado en la web o descargue esta herramienta de verificación de contraste.

Ofrezca una alternativa de audio para el texto en pantalla

Es posible que algunos alumnos puedan ver el curso, pero prefieren escuchar en lugar de leer. Es posible que tengan problemas de aprendizaje, como dislexia, que no sean buenos lectores 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. Considera ofrecer una versión de audio de diapositivas basadas en texto para estos alumnos. Por ejemplo, puede reproducir una narración opcional cuando los alumnos hacen clic en el icono de un altavoz o presionan un atajo de teclado.

Usar texto y estilos de texto accesibles

El texto accesible de Storyline 3 permite a los alumnos personalizar el tamaño y el estilo del texto mediante el uso de 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 3 crean más 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 la información con los lectores de pantalla para que puedan identificar y anunciar encabezados, hipervínculos, citas y párrafos.

Otro aspecto vital 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.

Activar los controles de accesibilidad

Permita que los alumnos personalicen 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 métodos abreviados de teclado.

Haga que el contenido interactivo sea accesible

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

No confíe 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 a los alumnos con daltonismo. Por ejemplo, si usas 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 confíe solo 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, de modo que los alumnos sepan que son interactivas.

Lo ideal es trabajar con alguien que tenga daltonismo para garantizar la mejor experiencia posible. Color Oracle es un simulador de daltonismo gratuito si no es una opción. Elimina las conjeturas al diseñar para el daltonismo al mostrarte lo que las personas con problemas comunes de visión cromática verán en tiempo real.

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

Si bien los estados de desplazamiento (es decir, los efectos de rollover que requieren un mouse) son excelentes para transmitir interactividad, no confíe en ellos para mostrar información importante. Considera ofrecer una alternativa accesible desde el teclado si usas estados de desplazamiento para mostrar texto o imágenes. Por ejemplo, está bien cambiar el color de un botón cuando 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 en estado de desplazamiento sin proporcionar otra forma de acceder a la información. Una alternativa para este ejemplo sería un atajo de teclado que reprodujera una versión de audio de la retroalimentación para quienes no usen el ratón.

No establecer límites de tiempo

Los temporizadores pueden prohibir la capacidad del alumno para usar las alternativas accesibles que has agregado o pueden crear un obstáculo para concentrarse. Evite los temporizadores de las pruebas y absténgase de usar disparadores para crear interacciones cronometradas cuando sea posible.

Ofrezca consejos sobre las preguntas del cuestionario

Cuando una pregunta de cuestionario acepte más de una opción de respuesta, incluye instrucciones para los usuarios de lectores de pantalla. Algunos consejos de ejemplo incluyen: Es posible obtener varias respuestas, seleccionar todas las que correspondan y rellenar el espacio en blanco.

Proporcionar alternativas para las interacciones de arrastrar y soltar

Las interacciones de arrastrar y soltar requieren un ratón para navegar, lo que dificulta o imposibilita su uso para los alumnos con problemas de movilidad. Si los agregar a su curso, proporcione alternativas basadas en texto o controladas por el teclado. Por ejemplo, puede usar una interacción accesible con el teclado, como una pregunta coincidente o una interacción con el 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.

Obtenga ayuda cuando la necesite

¿Quieres ir más profundo? Echa un vistazo a Storyline 3 Voluntary Product Accessibility Template® (VPAT®) y a nuestro libro electrónico gratuito sobre el diseño del cursos de e-learning accesible.

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, solo tienes que publicar una pregunta en E-Learning Heroes, la comunidad de cursos de e-learning más grande y comprometida 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 tendrá la sabiduría de compartir.