I asked Support, this is their answer:

Option 1- Screen reader

From an accessibility standpoint most of the time when users that need the survey to be read out loud for visually impaired respondents they will use screen readers. This screen reading software is a 3rd party applications such as JAWS but these programs will work with Qualtrics. This is typically when a user already has screen reader installed on the computer and they can use this software with many different programs,

When you have respondents who use third-party screen readers (like JAWS) and you need to meet accessibility standards, it’s important to make sure your survey is as accessible as possible. Our ExpertReview feature diagnoses your survey, indicates which questions are inaccessible, and gives other recommendations for increased accessibility to help you work towards WCAG 2.0 AA (and Section 508) compliant surveys.

This link will go over how you can create a survey that works with screen reading software! 

Option 2- Insert audio

In Qualtrics you have the ability to upload a mp3 file directly to a question. This support page goes over exactly how you can add an mp3 file to your survey questions! You can add you audio file if the question being read out loud right above the question text and all users will need to do is click on the play button and the audio file will play. By default we do not have a read out loud option for questions so media will need to be inserted for this.

Option 3 - Custom code

Looking at the screenshot you included it looks like this Question may have been created using custom code. You can upload a mp3 file to Qualtrics so users can play audio but it might not look exactly how it look compared to the screenshot you attached. 

Qualtrics Support is not trained on custom coding, so we cannot help you with implementing this functionality. However, if you can accomplish the same goal using the functionality currently available in the Qualtrics platform, I would be happy to assist you further. If you would like to use custom code, I do have the following resources to help you out: 

• Qualtrics XM Community: You can post your question in the Developer Corner of the Qualtrics XM Community to see if other users know how to implement this with custom code. For help with creating a community account and logging in, check out this support page. 
• If you’re interested in our custom solutions offered by our professional services, reach out to your Qualtrics Account Executive. You can also request a quote from our team here. 
• For help implementing your custom code with some tips and tricks for using JavaScript in Qualtrics, see this support page. 

Since ScreenReader compatibility is not enough for us, I see two options:

1. API to third-party service: For this kind of feature, we might need to integrate with an external service. Since Qualtrics does not inherently support this functionality, you could consider using Qualtrics API to integrate with a third-party service. We could develop or employ a script which reads out the text when a button is pressed. 

2. Adaptive font resizing: Qualtrics supports basic customization of font sizes in the "Look & Feel" section of the survey, but there's no built-in option to allow respondents to adjust the font size themselves within the survey. But we could use custom JS or CSS to create buttons that adjust the text size.

Here's an attempt for option 2, just to increase/decrease the size of the text in one question:

HTML/CSS (goes in the question's Rich Editor):

<div class="button-container"><button class="button-small">Small Text</button><button class="button-default">Default Text</button><button class="button-large">Large Text</button></div>

<div class="question-content">
<p>This is a test question. Please select the text size that you prefer. The default tect is 15px. Small reduces the default font size to 10px, Large changes it to 24px.</p>
</div>
<style type="text/css">.button-container {
    text-align: right;
  }

.button-small, .button-default, .button-large {
  margin: 10px;
  padding: 10px 15px;
  border: none;
  background-color: #F0F0F0;
  color: #192743;
  cursor: pointer;
  border-radius: 50px;
}
.button-small:hover, .button-default:hover, .button-large:hover {
  background-color: #E3E3E3;
}
  .button-small.selected, .button-default.selected, .button-large.selected {
    background-color: #30B3AF;
  }
</style>

JS (goes in the question's JS editor):

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
    var smallButton = this.getQuestionContainer().querySelector('.button-small');
    var defaultButton = this.getQuestionContainer().querySelector('.button-default');
    var largeButton = this.getQuestionContainer().querySelector('.button-large');
    var questionContent = this.getQuestionContainer().querySelector('.question-content');

    smallButton.addEventListener('click', function() {
      questionContent.style.fontSize = '10px';
      smallButton.classList.add('selected');
      defaultButton.classList.remove('selected');
      largeButton.classList.remove('selected');
    });

    defaultButton.addEventListener('click', function() {
      questionContent.style.fontSize = '15px';
      smallButton.classList.remove('selected');
      defaultButton.classList.add('selected');
      largeButton.classList.remove('selected');
    });

    largeButton.addEventListener('click', function() {
      questionContent.style.fontSize = '25px';
      largeButton.classList.add('selected');
      defaultButton.classList.remove('selected');
      smallButton.classList.remove('selected');
    });
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

Result:

https://customeyes.qualtrics.com/jfe/preview/previewId/25becbe1-82e4-428b-9c70-1624fcfc952e/SV_d0jlyLFr3q1XnrE?Q_CHL=preview&Q_SurveyVersionID=current

The problem is that I couldn't find a way to apply this to all text in the survey at once.

Can anyone correct, propose alternatives, or give feedback?

Hi, great write up on survey accessibility approaches and nicely done on the coding solutions. It looks like some of the font size buttons get cut off on Mobile though.

When it comes to fonts, I've recently tackled some posts that touch on that. font family and increasing/decreasing font sizes for text entry. I combined them so that each page loads the font family and font size that gets saved to an Embedded Data field and uses jQuery("*") to set the styling for all the elements on the page. This lets font family/size selections be kept in place throughout the survey.

To give it a try, first create the Embedded Data fields of "font" and "fontsize" and put them at the top of the Survey Flow. Set the values to "Roboto" and "14px".

Then add the below to the survey's Header using the HTML/Source view "<>":

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Comic+Neue" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" />

<script>
//set font size
var fontsize = Qualtrics.SurveyEngine.getEmbeddedData('fontsize');
jQuery("*").css("font-size",fontsize);

jQuery("#Header").after("<input type='button' id='increase' value='font+' name='+' />");
jQuery("#Header").after("<input type='button' id='decrease' value='font-' name='-' />");

jQuery("#increase").on('click',function(){

var txt = document.getElementById("Header");
var fstyle = window.getComputedStyle(txt, null).getPropertyValue('font-size');
var currentSize = parseFloat(fstyle);
var newSize = (currentSize + 5) + 'px'
jQuery("*").css("font-size",newSize);
Qualtrics.SurveyEngine.setEmbeddedData("fontsize",newSize);

});

jQuery("#decrease").on('click',function(){

var txt = document.getElementById("Header");
var fstyle = window.getComputedStyle(txt, null).getPropertyValue('font-size');
var currentSize = parseFloat(fstyle);
var newSize = (currentSize - 5) + 'px'
jQuery("*").css("font-size",newSize);
Qualtrics.SurveyEngine.setEmbeddedData("fontsize",newSize);

});

</script>
<script>
Qualtrics.SurveyEngine.addOnload(function() {

var values =  "Roboto", "Comic Neue", "Open Sans", "Montserrat", "Noto Serif"];

    var select = document.createElement("select");
    select.name = "font";
    select.id = "font"

    for (const val of values)
    {
        var option = document.createElement("option");
        option.value = val;
        option.text = val.charAt(0) + val.slice(1);
        select.appendChild(option);
    }

    var label = document.createElement("label");
    label.innerHTML = "Choose your font: "
    label.htmlFor = "font";

    document.getElementById("HeaderContainer").appendChild(label).appendChild(select);

//set fonts
var font = Qualtrics.SurveyEngine.getEmbeddedData('font');
jQuery("#font").val(font);

jQuery("*").css({"font-family":font});

select.addEventListener('input', function (event) {

selected = select.optionssselect.selectedIndex].text;
jQuery("*").css({"font-family":selected});
Qualtrics.SurveyEngine.setEmbeddedData("font",selected);
}, false); 	   });    </script>

Thanks @Tom_1842, that works great!

@Tom_1842 - Brilliant suggestions, my team has often looked to improve accessibility of our surveys so these additions are great.  I hope to see some of these options integrated into Qualtrics platform by default one day 

The code for resizing the font works best in the Header, but for the people looking to add recordings to each question:

HTML in the question:

<div style="float: right; clear: right;">
<table style="background-color: transparent; display: inline-block;">
	<tbody>
		<tr>
			<td>
			<div class="audio-controls"><button class="button-play">►</button><button class="button-pause">❚❚</button><button class="button-stop">◼</button></div>
			</td>
		</tr>
	</tbody>
</table>
</div>

JS applied to the question: 

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

    var audio = new Audio('https://customeyes.qualtrics.com/ControlPanel/File.php?F=F_bjdyYSsZzFm8a7I'); // replace with the URL to your mp3 file

    var playButton = this.getQuestionContainer().querySelector('.button-play');
    var pauseButton = this.getQuestionContainer().querySelector('.button-pause');
    var stopButton = this.getQuestionContainer().querySelector('.button-stop');

    playButton.addEventListener('click', function() {
      audio.play();
      playButton.classList.add('selected');
      pauseButton.classList.remove('selected');
      stopButton.classList.remove('selected');
    });

    pauseButton.addEventListener('click', function() {
      audio.pause();
      pauseButton.classList.add('selected');
      playButton.classList.remove('selected');
      stopButton.classList.remove('selected');
    });

    stopButton.addEventListener('click', function() {
      audio.pause();
      audio.currentTime = 0;
      stopButton.classList.add('selected');
      playButton.classList.remove('selected');
      pauseButton.classList.remove('selected');
    });
});

I'm still looking for a way to integrage a text-to-speech service here.