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>

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’.

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

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

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded