Desatar el poder de la accesibilidad con JavaScript en Articulate Storyline

La accesibilidad en eLearning es un aspecto crucial en el diseño y desarrollo de experiencias de aprendizaje en línea. Con la creciente popularidad de la educación en línea, es imperativo garantizar que todas las personas, incluidas aquellas con discapacidades, puedan participar y beneficiarse de estos cursos.

Sin embargo, a pesar de que la creación de un curso accesible aumentará el alcance y la cantidad de personas que potencialmente pueden acceder a él, las empresas a menudo pasan por alto la importancia de la accesibilidad. Esto plantea la pregunta de por qué las empresas ignoran este aspecto clave en eLearning.

Para entender esto mejor, tomemos el ejemplo de la “accesibilidad para daltónicos”. Esta función requiere agregar tres opciones para discapacidades de daltonismo, como daltonismo, debilidad verde y debilidad roja. Cada modo requiere cambiar los colores de fondo, texto e íconos, lo que puede resultar en un aumento significativo en la cantidad de diapositivas. Por ejemplo, un curso de 100 diapositivas con esta función agregada se convertiría en un curso de 400 diapositivas.

El aumento de la carga de trabajo y la complejidad de agregar funciones de accesibilidad puede ser abrumador para las empresas, ya que puede generar tamaños de archivo más grandes y dificultar la edición. También puede llevar mucho tiempo, por lo que las empresas pueden pasar por alto la accesibilidad en el aprendizaje electrónico.

Sin embargo, esto no significa que la accesibilidad deba ser ignorada. En cambio, es importante encontrar un equilibrio entre la accesibilidad y la facilidad de edición para crear cursos de aprendizaje electrónico inclusivos y fáciles de usar para todos los alumnos.

A través de este artículo, mostraré mi solución para la característica anterior (accesibilidad para daltónicos) con el código JS y la historia de Articulate, este código se puede ejecutar en cualquier herramienta de creación.

requisitos previos:-

• Buen conocimiento de Articulate Storyline 360
• Familiaridad con HTML/CSS/JS (preferido)

1. Declare una función setColor que tome tres parámetros: newBackgroundColor, newTextColor y newSvgColor, para establecer el nuevo color de fondo, el color del texto y el color de la ruta svg, respectivamente.

function setColor(newBackgroundColor,newTextColor,newSvgColor){

}

function setColor(newBackgroundColor,newTextColor,newSvgColor){
    const slideLayer = document.querySelector('.slide-layer');
    const textElements = document.querySelectorAll('text');
    const svgPaths = document.querySelectorAll('svg path');
}

2. Selecciona todos los elementos con la etiqueta 'texto' usando el método querySelectorAll y guárdalos en una constante llamada textElements:
3. Seleccione todos los elementos de ruta dentro de un svg usando el método querySelectorAll y almacénelos en una constante llamada svgPaths:

function setColor(newBackgroundColor,newTextColor,newSvgColor){
    const slideLayer = document.querySelector('.slide-layer');
    const textElements = document.querySelectorAll('text');
    const svgPaths = document.querySelectorAll('svg path');
   if (slideLayer) {
    slideLayer.style.backgroundColor = newBackgroundColor;
}}

Cambiemos el color del texto también: -

function setColor(newBackgroundColor,newTextColor,newSvgColor){
    const slideLayer = document.querySelector('.slide-layer');
    const textElements = document.querySelectorAll('text');
    const svgPaths = document.querySelectorAll('svg path');
   if (slideLayer) {
    slideLayer.style.backgroundColor = newBackgroundColor;
}
if (textElements.length > 0) {
    textElements.forEach(text => {
        text.setAttribute('fill', newTextColor);
    });
}
}

function setColor(newBackgroundColor,newTextColor,newSvgColor){
    const slideLayer = document.querySelector('.slide-layer');
    const textElements = document.querySelectorAll('text');
    const svgPaths = document.querySelectorAll('svg path');
   if (slideLayer) {
    slideLayer.style.backgroundColor = newBackgroundColor;
}
if (textElements.length > 0) {
    textElements.forEach(text => {
        text.setAttribute('fill', newTextColor);
    });
}
if (svgPaths.length > 0) {
    svgPaths.forEach(path => {
        if (path.getAttribute('fill') =="color")   {
            path.setAttribute('fill', newSvgColor);
        }
    });
}
}

Finalmente, terminamos la parte en Javascript, comencemos a crear un proyecto simple en la historia de Articulate y agreguemos texto, fondo y algunas formas.

• Cree una diapositiva simple con fondo y texto blancos y algunas formas.

• Pongamos un disparador “Ejecutar JS”

setColor("#444654","white","#6200EE")

En conclusión, el uso de JavaScript en Articulate Storyline para agregar funciones de accesibilidad es una herramienta poderosa que puede ayudar a garantizar que todos los alumnos, incluidos aquellos con discapacidades, puedan acceder y comprender el contenido del curso. Con un poco de conocimiento y creatividad, los desarrolladores pueden crear scripts personalizados que pueden mejorar la accesibilidad de varias maneras.

Y recuerda: la accesibilidad no es una opción. es un derecho Por lo tanto, intente encontrar la mejor manera que reduzca el tiempo y haga que su curso sea accesible.