Help My ARIA Labels contain variable name versus value

Forum|Forum|3 years ago
January 19, 2023
4 replies
848 views

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

Advanced

This topic has been closed for replies.

OH_CP_Lover_&_Hacker

Inspiring

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

D

defaultuhm2zocidbyb

New Participant

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!!

D

defaultuhm2zocidbyb

New Participant

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

S

Seufer DesignsAuthor

Participating Frequently

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

}

S

Seufer DesignsAuthor

Participating Frequently

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

Lilybiri

Brainiac

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

S

Seufer DesignsAuthor

Participating Frequently

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.