Creating expandable/collapsible buttons that are fully accessible to individuals who use the "tab" button on the keyboard to navigate the survey. | XM Community
Skip to main content

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

 

Instead of button and toggle JS, we can simply use ‘details’ tag of HTML which does the same functionality and also works with ‘tab’ button of keyboard.

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

 

0

Instead of button and toggle JS, we can simply use ‘details’ tag of HTML which does the same functionality and also works with ‘tab’ button of keyboard.

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

Thanks, @rondev! I’ve applied this to my survey text preamble and it looks great, but for some reason, the keyboard enter to expand/collapse isn’t working, although I’m told it should be working. I have had someone more experienced with HTML check the code and they said it looks fine and I applied as per your recommendation. Do you have any suggestions as to why this might not be working - e.g. - something about the Qualtrics environment? 

 

Thanks again for your assistance!

 

Instead of button and toggle JS, we can simply use ‘details’ tag of HTML which does the same functionality and also works with ‘tab’ button of keyboard.

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

 

@rondev , thanks for your assistance on this post. I’ll mark it as ‘Best Answer’.

Instead of button and toggle JS, we can simply use ‘details’ tag of HTML which does the same functionality and also works with ‘tab’ button of keyboard.

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

 

@rondev , thanks for your assistance on this post. I’ll mark it as ‘Best Answer’.

Hello @AlonsoC - it was great help, but I am still running into the same issue, where the “tab + enter” accessibility feature does not expand the text when using this new code. If anyone is able to assist further with this issue, that would be greatly appreciated!

Instead of button and toggle JS, we can simply use ‘details’ tag of HTML which does the same functionality and also works with ‘tab’ button of keyboard.

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

 

@rondev , thanks for your assistance on this post. I’ll mark it as ‘Best Answer’.

Hello @AlonsoC - it was great help, but I am still running into the same issue, where the “tab + enter” accessibility feature does not expand the text when using this new code. If anyone is able to assist further with this issue, that would be greatly appreciated!

Tab + Space works for details tag by default. To make enter key also work, we can use below script:

 

var detailsElements = document.querySelectorAll('details');

detailsElements.forEach(function(details) {
    // Add keydown event listener to each <details> element
    details.addEventListener('keydown', function(event) {
        if (event.key === 'Enter' || event.key === ' ') { // If Enter or Space is pressed
            event.preventDefault(); // Prevent default behavior
            this.open = !this.open; // Toggle the 'open' attribute
        }
    });
});

 

Thanks for this, this is great. Does this code work in the new simple layout? I know some JavaScript that works in other layouts doesn’t work in this new layout. Also, if it’s not too much trouble, can you please share a screenshot of what the end result is supposed to look like?

Yes this works in Simple Layout as well since it does not uses JS. Check the steps here.

Leave a Reply


Terms & Conditions