Creating expandable/collapsible buttons that are fully accessible to individuals who use the "tab" button on the keyboard to navigate the survey.

Hello, 

I’ve created a survey that uses custom code from this forum (thank you!) to create buttons that expand/collapse to provide respondents with the option to view more information/definitions as needed. I’ve successfully applied the code to: (1) Survey introductory text that contains multiple buttons on the same page; (2) survey questions (e.g., multiple choice); and (3) survey response options that contain one button for a number of the response options in a multiple choice question. 

Although these buttons work well on desktop (mouse) and mobile devices (tap/touchscreen), they do not work for individuals who use the “tab” button on their desktop keyboard to navigate each survey page. I’m wondering if there is code that I can add to my current code that will enable this level of accessibility? If not, are there other options for adding additional optional content if needed (e.g., further definition of a term) that can be widely accessible to diverse audiences with different accessibility requirements AND translate well across desktop and mobile versions of Qualtrics?

Here is example of the code I’m using that currently works, but does allow collapse/expand of text for those who use the “tab” button on their computer keyboard to navigate the elements of the question:

Javascript for Question that includes response option buttons:

Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#button1").click(function() {
jQuery("#infodiv1").toggle();
});

jQuery("#button2").click(function() {
jQuery("#infodiv2").toggle();
});
    
jQuery("#button3").click(function() {
jQuery("#infodiv3").toggle();
});
    
jQuery("#button4").click(function() {
jQuery("#infodiv4").toggle();
});
});
 

Example code that’s included within the response option source code:

Program 1 Name <button id="button1">Definition<br />
</button>
<div id="infodiv1" style="display:none;">Definition of Program 1</div>

Program 2 Name <button id="button2">Definition<br />
</button>
<div id="infodiv2" style="display:none;">Definition of Program 2</div>

….and so on for the 4 response options with optional additional definitions

Many thanks very much in advance for your help with this!

Rebecca