Help My ARIA Labels contain variable name versus value

Report · Jan 19, 2023

I am hoping someone in the community can help me out as I have been fighting this for a while now. I have a custom quiz that in the remediation page displays all the user inputed answers through their assigned variable. The on screen functions of this work perfectly, but when I review the slide with a screen reader the ARIA label for each of these items is only reading the variable name not the variable value. So for instance it will say "dollar sign dollar sign variable dollar sign dollar sign" instead of "Red".

I have seen another post with someone asking a similar question and someone provided a sample project that seems to have fixed this issue, but they have not provided any information on how they accomplished this. I have even tried contacting the OP of that sample and no response.

This is really detrimental to my project and there is really no other way to gather and display this information beyond what I have programmed already.

I am a serious beginner when I comes to javascript and have been reading a lot trying to figure this out. What I have come up with so far is below, but it doesn't work, or I am putting it in the wrong place. Any help that could be provided would be really appreciated as this is driving me crazy.

var answer = interfaceObj.getVariableValue("Q1Answer");
document.getElementById("Q1Answer_589").setAttribute("aria-label", answer);

Report · Jan 19, 2023

I forgot to add a link to the sample project that is working on the other post.

https://iti.cscc.edu/0_508_Testing/CPVarScanReplaceTest105Demo/index.html

Report · Jan 20, 2023

For others that are having this issue. I did find a solution so far that will update the item with the variable. I have used a line of javascript and the CPExtra widget (scmndLoadJSFromAction) to update the inline code on the page. A new problem is that I have to declare each variable and element the variable is located, which with over 100 variables across multiple slides, is making the code add up quickly. In case someone is able to offer a solution to the new hurdle, my working code is below.

if(document.getElementById("SLabel_18")){
var slideLabel = window.cpAPIInterface.getVariableValue("cpInfoCurrentSlideLabel");
document.getElementById("SLabel_18").setAttribute("aria-label", slideLabel);

Report · Jan 20, 2023

100 variables? Are you sure it is not possible to reuse some of them?

Report · Jan 20, 2023

Unfortunately, there is not. It is a custom quiz, and each variable correlates to a learner-inputted answer. Once the learner inputs the response, the variable is displayed on the results page and the remediation page, which would have two different object IDs but the same variable value.

Report · Jan 20, 2023

I was just wondering, because in the past I had to debug projects for clients that were choking due to a big amount of variables and/or duplicate advanced actions. Reducing both amounts by a slightly different approach (think shared actions and reused variables) in those cases solved not only the problems but had the project run much smoother. But I will not insist, you are just looking for a JS solution in this thread.

Report · Jan 20, 2023

I have around 100 variables in one project that are displayed multiple times in different objects. So as you can imagine the code is very long, and while it works, I know this is not the best way to accomplish this. My javascript abilities are fairly low and really only center around how to trigger items within Captivate, so to figure out how to automate this is above my abilities at this time. Would someone be willing to assist me with automating this code? Below is a sample of how the HTML would look and the javascript code that updates the variables.

<!DOCTYPE html>

<html>

<body>

<div id="slidecounter_589" class="cp-frameset" area-label="$$var_currentslide$$ of $$var_totalslides">

<h1>My First Heading</h1>

</div>

<div id="SLabel_1" class="cp-frameset" area-label="$$cpInfoCurrentSlideLabel">

<p>Information</p>

</div>

<div id="VAR_Text_1" class="cp-frameset" area-label="$$someValue$$">

<p>Information</p>

</div>

<div id="VAR_Text_2" class="cp-frameset" area-label="$$PurpleValue$$">

<p>Information</p>

</div>

<div id="VAR_Text_3" class="cp-frameset" area-label="$$GreenValue$$">

<p>Information</p>

</div>

<div id="slidecounter_589" class="cp-frameset" area-label="$$var_currentslide$$ of $$var_totalslides">

<h1>My First Heading</h1>

</div>

<div id="SLabel_1" class="cp-frameset" area-label="$$cpInfoCurrentSlideLabel">

<p>Information</p>

</div>

<div id="VAR_Text_4" class="cp-frameset" area-label="$$someValue$$">

<p>Information</p>

</div>

<div id="VAR_Text_5" class="cp-frameset" area-label="$$PurpleValue$$">

<p>Information</p>

</div>

<div id="VAR_Text_6" class="cp-frameset" area-label="$$GreenValue$$">

<p>Information</p>

</div>

</body>

</html>

//Script called in Captivate

//Update slide numbering

if(document.getElementById("slidecounter_589")){

var slidenum = window.cpAPIInterface.getVariableValue("var_currentslide");

var totalslides = window.cpAPIInterface.getVariableValue("var_totalslides");

document.getElementById("slidecounter_589").setAttribute("aria-label", slidenum + " of " + totalslides);

console.log("Slide number");

}

//Update Slide Label

if(document.getElementById("SLabel_1")){

var slideLabel = window.cpAPIInterface.getVariableValue("cpInfoCurrentSlideLabel");

document.getElementById("SLabel_1").setAttribute("aria-label", slideLabel);

console.log("Slide Title");

}

//Update first instance

if(document.getElementById("VAR_Text_1")){

var answer1 = window.cpAPIInterface.getVariableValue("someValue");

var answer2 = window.cpAPIInterface.getVariableValue("PurpleValue");

var answer3 = window.cpAPIInterface.getVariableValue("GreenValue");

document.getElementById("VAR_Text_1").setAttribute("aria-label", answer1);

document.getElementById("VAR_Text_2").setAttribute("aria-label", answer2);

document.getElementById("VAR_Text_3").setAttribute("aria-label", answer3);

console.log("Variable 1");

}

//Update Second instance

if(document.getElementById("VAR_Text_4")){

var answer1 = window.cpAPIInterface.getVariableValue("someValue");

var answer2 = window.cpAPIInterface.getVariableValue("PurpleValue");

var answer3 = window.cpAPIInterface.getVariableValue("GreenValue");

document.getElementById("VAR_Text_4").setAttribute("aria-label", answer1);

document.getElementById("VAR_Text_5").setAttribute("aria-label", answer2);

document.getElementById("VAR_Text_6").setAttribute("aria-label", answer3);

console.log("Variable 2");

}

Report · Jan 24, 2023

Hey there Seufer Designs, I just wanted to let you know I just sent you a private message. Hope your day is going well.

Report · Jan 06, 2024

Hi there - I am running into the same problem as Seufer Designs. I saw your other post and tested out your demo. I would be super grateful for any info you could send my way! @Seufer Designs @OH_CP_Lover_&_Hacker

Thank you!!

Report · Jan 06, 2024

I think I actually just figured it out! Combined some of the ideas from several responses and got it to work!

Adobe Community

Help My ARIA Labels contain variable name versus value