Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Universal design

Hi,

We are doing a MaxDiff-survey for travelers with different types of disabilities like blindness. I am wondering if anybody knows a custom javascript that I could use to insert HTML script into existing questions, on order to make screen-readers.

Unless this is a very tricky thing to, I would appreciate any type of input.

Thank you,

Best, Line
asked Feb 3 by Linebje (200 points)
Do you know what HTML changes you would want to satisfy your screen reading needs?
Not sure how to answer your question. I got a tip that I could use H1-H6 tags or HTML5 WAI-ARIA tags in order to define such properties. But I am very new to coding, so I am not sure how to go about this.

1 Answer

0 votes
Please try adding this script to your MaxDiff:

<style>
.hiddenLabel {
    display: none;
}
</style>

<script>
$(document).ready(function(){
    // Parameters
    var list = [% ListLabelsArray(list1) %];
    
    // Run
    var bestText = $('#[% QuestionName() %]_div .best_header').html().replace(/<[^>]*>/g, ' ');
    var worstText = $('#[% QuestionName() %]_div .worst_header').html().replace(/<[^>]*>/g, ' ');
    
    $('#[% QuestionName() %]_div .graphical_select').each(function(){
        var id = this.id;
        var match = id.match(/^[% QuestionName() %]_(b|w)_(\d+)_graphical$/);
        var isBest = match[1] == 'b';
        var item = Number(match[2]);
        var label = 'Select ' + list[item - 1] + ' as ' + (isBest ? bestText : worstText);
        $(this).append('<label class="hiddenLabel" for="' + id + '">' + label + '</label>');
    });
})
</script>


"list1" must be replaced with the name of the MaxDiff's list.

I don't have screen reading software, though, so be sure to test thoroughly.
answered Feb 3 by Zachary Platinum Sawtooth Software, Inc. (143,925 points)
Great, I will try this. Thank you very much Zachary! :)
...