This post outlines lessons learned from creating an accessible Qualtrics survey involving media players. While we were excited to learn about general user impressions of sounds to help guide our sonification design, we learned a good deal in the creation of an accessible Qualtrics survey involving audio. We wanted to share our lessons learned. Feel free to jump down to the Lessons list based on our iterative design process at the bottom of this post or continue reading.
Our initial work on developing accessible questions and embedding audio into our Sonic Foundations Survey became problematic for screen readers. For example, we struggled to make specific questions screen-reader accessible, and we had to work through the Qualtrics manual to find the most accessible and best question fit. Jessica held a few co-design meetings with Amy and her JAWS screen reader to determine a working structure for our survey. Our solution involved the segmentation of questions using a Qualtric media player placed inside a multiple-choice radio button question. The modular design provided an accessible solution for questions involving media in our survey.
Yet, we still encountered issues with the Qualtrics .mp3 media spitting back too much information about the media file in the screen reader. So we sought out other solutions. We reached out to the Sonification World Chat (SWC) group, members of our advisory board, and Dr. Brett Fieldler, who is part of the PhET Interactive Simulations team and who has a deep understanding of the accessibility of Qualtrics.
Based on suggestions from SWC, we compared a version of our survey using a Qualtrics media player and an external audio player (YouTube video) embedded in Qualtrics. When we kept quick keys enabled, the .mp3 Qualtrics media players worked the best with our screen reader tests for our format. We understand that this may not be for every case, and could be specific to Qualtrics. Next is the example code of our audio player we embedded in our multiple-choice text block using the HTML view.
<audio class="qmedia" controls="true" height="40" preload="auto" width="320"><source src="https://url-to-our-survey-audio" type="audio/wav" /></audio>
Dr. Fieldler reviewed our work using an NVDA reader. While the Qualtrics media player wasn’t optimal still, the quick keys provided navigational pathways. He recommended maintaining the consistency of our structure for each content block throughout the survey. For example, placing any question immediately following the media player (no text in between) is more accessible as the proximity of elements matters.
We also want to highlight two added suggestions by Dr. Fieldler. First, place an estimated duration for the survey on the landing page. Second, place progress markers throughout the survey. Note: the Qualtrics progress bar is not accessible. Accessible progress markers can be basic text (for example, “Sound 1 of 6”).
We did create warning text before each question group specifically to signal to screen reader users about the upcoming media and the types of questions they would encounter. We received a positive feedback review on this accessible design element. Next is an example of our text which read,
“SCREEN READER USERS: This survey embeds media controls for each sound, including clip durations and extra buttons. After you play the sound, you can skip down to the radio buttons below to rate the sound.”
Because we were reviewing comments on audio but not from a controlled environment, we asked users to wear headphones throughout the survey, and we surveyed participants if they participated in the survey wearing headphones.
Lastly, Amy reviewed the survey using JAWS and we received another external NVDA test green light before we made the survey public.
While we still ran into an issue with one participant not being able to load a media file on their browser, we found the accessible design process improved the overall accessibility and therefore the survey's success.
A huge thank you to Dr. Fieldler at the University of Colorado, Boulder for their help and guidance.
Takeaways for creating accessible media on a Qualtrics survey include:
- Structure the survey around accessible question types. This will involve consulting the Qualtrics manual to select the accessible question types to fit the survey.
- It is ok to include a Qualtrics media player. Media players are ubiquitous. However, the media player isn’t optimized for screen readers. There may exist better options for the survey and a review of media players and methods may be warranted.
- Create and include warning text before questions to indicate to screen reader users about the upcoming media and the types of questions. Signaling content and structure increases accessibility.
- The proximity of elements matters. If asking a question about the media, place questions immediately following a media player (no text in between).
- Include an estimated duration for the survey on the landing page. This good design practice is not automatically added to your survey.
- Place accessible progress markers throughout the survey. Note, at the time of our writing, the Qualtrics progress bar is not accessible.
- Include a review of your survey with a screen reader (JAWS, NVDA, etc) before going public.
by Jon Bellona