Unleashing the Power of Accessibility with JavaScript in Articulate Storyline

Accessibility in eLearning is a crucial aspect in the design and development of online learning experiences. With the growing popularity of online education, it is imperative to ensure that all individuals, including those with disabilities, are able to participate and benefit from these courses.

However, despite the fact that creating an accessible course will increase the reach and number of people who can potentially access it, companies often overlook the importance of accessibility. This raises the question of why companies ignore this key aspect in eLearning.

To understand this better, let us take the example of "color blind accessibility." This feature requires adding three options for color blind disabilities, such as color blind, green weakness, and red weakness. Each mode requires changing the background, text, and icon colors, which can result in a significant increase in the number of slides. For instance, a 100-slide course with this feature added would become a 400-slide course.

The increased workload and complexity in adding accessibility features can be overwhelming for companies, as it can lead to larger file sizes and make editing more difficult. It can also be time-consuming, which is why companies may overlook accessibility in eLearning.

However, this does not mean that accessibility should be ignored. Instead, it is important to find a balance between accessibility and ease of editing to create inclusive and user-friendly eLearning courses for all learners.

Through this article, I will show my solution for the feature above(color blind accessibility) with JS code and Articulate storyline, this code can be executed into any Authoring tool.

Prerequisites:-

• Good knowledge of Articulate Storyline 360
• Familiarity with HTML/CSS/JS (preferred)

Let's start with write all lines of code first:-

1. Declare a function setColor that takes in three parameters - newBackgroundColor, newTextColor, and newSvgColor - to set the new background color, text color, and svg path color respectively.

function setColor(newBackgroundColor,newTextColor,newSvgColor){

}        

Side note: Any Storyline file published is contained within a HTML 'div'(as a container) element and is assigned a class name 'slide-layer.

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

1. Select the first element with the class '.slide-layer' using the querySelector method and store it in a constant named slideLayer:
2. Select all elements with the tag 'text' using the querySelectorAll method and store them in a constant named textElements:
3. Select all path elements within an svg using the querySelectorAll method and store them in a constant named svgPaths:

Side note: All shapes in Storyline are created as SVG elements.

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;
}

}        

1. if (slideLayer) {...}: This block checks if the slideLayer variable exists, meaning that an element with the class .slide-layer was found on the page(Storyline file is exisits or not ?). If it exists, the code inside the block sets the background color of the element by updating the backgroundColor property of its style object.

Let's change the text color also:-

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);
    });
}

}        

1. if (textElements.length > 0) {...}: This block checks if the textElements variable has a length greater than 0, meaning that at least one element with the tag text was found on the page. If it exists, the code inside the block uses the forEach(Loop for all texts in the screen) method to iterate through each text element and sets its fill color by updating the fill attribute with the newTextColor parameter.

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);
        }
    });
}
}        

1. if (svgPaths.length > 0) {...}: This block checks if the svgPaths variable has a length greater than 0, meaning that at least one path element within an svg was found on the page. If it exists, the code inside the block uses the forEach method to iterate through each path element and sets its fill color to newSvgColor if its fill attribute is equal to "color"(don't forget add the color that you will change ).

Finally we finished the part in Javascript let's start create a simple project in Articulate storyline and add text,background and some shapes.

• Create a simple slide with white background and text and some shapes.

We will start with one mode only, and you can apply it in the same way.

• Let's put a trigger "Execute JS"

we put the code above and add to it the following.

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

the result:

In conclusion, using JavaScript in Articulate Storyline to add accessibility features is a powerful tool that can help ensure that all learners, including those with disabilities, can access and understand course content. With a little knowledge and creativity, developers can create custom scripts that can improve accessibility in various ways.

And Remember: Accessibility is not an option. It is a right. So, try to find the best way that will reduce the time consuming and will make your course accessible.