Liberando o poder da acessibilidade com JavaScript no enredo articulado

Acessibilidade em eLearning é um aspecto crucial na concepção e desenvolvimento de experiências de aprendizagem online. Com a crescente popularidade da educação on-line, é imperativo garantir que todos os indivíduos, incluindo aqueles com deficiência, possam participar e se beneficiar desses cursos.

No entanto, apesar de a criação de um curso acessível aumentar o alcance e o número de pessoas que podem acessá-lo, as empresas geralmente negligenciam a importância da acessibilidade. Isso levanta a questão de por que as empresas ignoram esse aspecto fundamental do eLearning.

Para entender isso melhor, vamos pegar o exemplo de “acessibilidade daltônica”. Esse recurso requer a adição de três opções para deficiências daltônicas, como daltonismo, deficiência de verde e deficiência de vermelho. Cada modo requer a alteração das cores de plano de fundo, texto e ícone, o que pode resultar em um aumento significativo no número de slides. Por exemplo, um curso de 100 slides com esse recurso adicionado se tornaria um curso de 400 slides.

O aumento da carga de trabalho e da complexidade na adição de recursos de acessibilidade pode ser opressor para as empresas, pois pode levar a tamanhos de arquivo maiores e dificultar a edição. Também pode ser demorado, e é por isso que as empresas podem ignorar a acessibilidade no eLearning.

No entanto, isso não significa que a acessibilidade deva ser ignorada. Em vez disso, é importante encontrar um equilíbrio entre acessibilidade e facilidade de edição para criar cursos de eLearning inclusivos e fáceis de usar para todos os alunos.

Através deste artigo, mostrarei minha solução para o recurso acima (acessibilidade daltônica) com código JS e storyline Articulate, esse código pode ser executado em qualquer ferramenta de autoria.

Pré-requisitos:-

• Bons conhecimentos de Articulate Storyline 360
• Familiaridade com HTML/CSS/JS (preferencial)

1. Declare uma função setColor que receba três parâmetros — newBackgroundColor, newTextColor e newSvgColor — para definir a nova cor de fundo, cor do texto e cor do caminho 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. Selecione todos os elementos com a tag 'text' usando o método querySelectorAll e armazene-os em uma constante chamada textElements:
3. Selecione todos os elementos de caminho em um svg usando o método querySelectorAll e armazene-os em uma constante chamada 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;
}}

Vamos mudar a cor do texto também:-

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 a parte em Javascript, vamos começar a criar um projeto simples no enredo do Articulate e adicionar texto, plano de fundo e algumas formas.

• Crie um slide simples com fundo branco e texto e algumas formas.

• Vamos colocar uma trigger “Execute JS”

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

Em conclusão, usar JavaScript no Articulate Storyline para adicionar recursos de acessibilidade é uma ferramenta poderosa que pode ajudar a garantir que todos os alunos, incluindo aqueles com deficiências, possam acessar e entender o conteúdo do curso. Com um pouco de conhecimento e criatividade, os desenvolvedores podem criar scripts personalizados que podem melhorar a acessibilidade de várias maneiras.

E lembre-se: acessibilidade não é uma opção. É um direito. Portanto, procure encontrar a melhor forma que reduza o tempo gasto e torne seu curso acessível.