Have an idea?

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

Surveys for Blind / Low vision respondents

We have a survey programmed and the client just stated they want it to be accessible to blind / low vision respondents through the use of a screen reader.

The survey has a variety of questions including several grid questions. The client states that the screen reader does not work on grid questions (I am unable to replicate this issue using MS Edge's built-in screen reader).

Has anyone programmed a survey to work with screen readers? Are there any tricks?  Do grid questions work/not work?
asked Feb 24 by Nwiggin (255 points)
Has your client specified any details about what changes he would need to improve the grid question in this regard?  A script could handle adding "<label>" elements and such if I knew exactly what was needed.
No, that's the biggest problem I'm facing at the moment is I can't replicate the issue the client is facing.  I have a meeting on Wednesday and am going to force the issue then and hopefully have an answer for you.

In the meantime, I'm not sure where  to add the "<label>" elements.
For a simple page with checkboxes, I believe the HTML would look something like this repeated for each checkbox:

<div>
    <input type="checkbox" id="mycheckbox1"/>
    <label for="mycheckbox1">Item 1</label>
</div>


This becomes a bit trickier with a grid question, as each each input relates to one row label and one column label.  I'm hoping that one workaround would be to put invisible labels on the page for each grid input.  So something like:

<input type="checkbox" id="mycheckbox1"/>
<label for="mycheckbox1" style="display: none;">Row 1 text... column 1 text...</label>


But I don't have the screen reader experience to know whether or not this would be satisfactory.  If your client can provide some more information about this or give an example of how they want the HTML to look, I'd be eager to hear it.
Hey Zachary,  It's been a long while, and we are still banging our head against this issue, but have found a sort-of solution.  We have programmed a separate version of the survey for blind/low vision respondents and have gotten rid of all grids.

NOW the problem is that our respondent gets no feedback on which (if any) selection she has made.  So, her software will read the question and read the answers, but it does not indicate (or say), "pigeons selected" or "dogs selected" etc.

I wonder if there is a way for this to be accomplished using Java?  Do you think so?  If so, can you help me out?

BTW: our tester is using a program called JAWS from Freedom Scientific
JAWS seems to be a popular screen reader, but I don't have access to it to do any testing myself.  It also seems like some blind users use tabbing to get around a page while others use the mouse to "look" for text and images on the screen, but perhaps I'm mistaken and one of those is the more common practice.

Perhaps one option for your current situation would be to use JavaScript to dynamically change the labels of your items to reflect their state.  So a radio label could either say "Item 1" or "Item 1 - Selected" or a checkbox label could either say "Item 1 - Unchecked" or "Item 1 - Checked."  Would something like that work for your client?
I think the java script is a good solution.  It is at least worth a shot.  So let's try that.

I want to toss an optional curve ball at you too (cause I just love curveballs).
In an attempt to maintain some semblance of sanity I have one .ssi file.  At the beginning there is a question (BLIND) where respondents can select if they want a version tailored to blind/low vision respondents.  That executes a skip pattern.

Most of the questions are the exact same, same variables, etc.  Only the grid questions are different. Where BLIND = 1 they skip the grid questions and instead "see" a single select question.  So, for example, everyone sees the question "what is your gender".  

In the ideal world i would only want the JavaScript to dynamically change the labels of the text if BLIND=1.  It may confuse people where BLIND <> 1 to suddenly see the label change.  How is THAT for a curveball?

And, one more potential curveball...can this happen at a global level or will the JavaScript need to be inserted everywhere?
What questions is this meant to be applied to?  All non-combobox select questions?

What label changes do you have in mind for the selected and non-selected states?
This should apply to all select type questions.  Nearly all of them are single response radio button questions,  but there are a few multiple response check boxes and even one dropdown that a few people may get.

I am perfectly fine with the dynamic change being "Item 1- Selected"

1 Answer

+1 vote
 
Best answer
Try this:

<script>
$(document).ready(updateLabelsForScreenReading);
function SSI_CustomGraphicalRadiobox() { updateLabelsForScreenReading(); }
function SSI_CustomGraphicalCheckbox() { updateLabelsForScreenReading(); }

function updateLabelsForScreenReading() {
    // Parameters
    var isBlind = [% 1 %];
    var selectedText = 'Selected';

    // Run
    $('.blindSpan').remove();
    if (isBlind) {
        $('.select.question').each(function(){
            var qdiv = this;
            var question = qdiv.id.replace(/_div$/, '');
            
            // Radio
            if ($(qdiv).find('input[type="radio"]').length) {
                $('#' + question + '_' + SSI_GetValue(question)).closest('.clickable').find('label').append('<span class="blindSpan"> ' + selectedText + '</span>');
            }
            
            // Checkbox
            else if ($(qdiv).find('input[type="checkbox"]').length) {
                var list = $('input[name="hid_list_' + question + '"]').val().split(',');
                list.forEach(function(item){
                    if (SSI_GetValue(question + '_' + item)) {
                        $('#' + question + '_' + item).closest('.clickable').find('label').append('<span class="blindSpan"> ' + selectedText + '</span>');
                    }
                });
            }
        });
    }
}
</script>


Line 8 can be updated to reflect the criteria as to whether the current respondent is blind.
answered May 21 by Zachary Platinum Sawtooth Software, Inc. (144,125 points)
selected May 21 by Nwiggin
You, sir, are a god among men.  I owe you (several) beer(s) by now...or caffeine free Mtn Dew's (you are in Provo after all).
Haha, you know the Utah area well.  We actually have a whole two bars in Provo now - a few more decades and we might start looking like a normal city.
OK, so I have more feedback from our tester. In fact, she sent a video.

https://www.dropbox.com/s/vfwm7nw1zc1tilv/Sound%20transit%20Screen%20Reader%20Demo.mp4?dl=0

Granted, the video was uploaded before your spiffy piece of JavaScript, but it does a good job of illustrating the difficulty of taking the survey using a screen reader as well as how a "proper" accessibility survey is set up.

Also, if you want to see the current survey you can click through it.

https://STCustSat.sawtoothsoftware.com/cgi-bin/ciwweb.pl?studyname=STCustSat&SOURCE=1
Thanks for the information.

In your survey settings, there is an option about using graphical radio buttons and checkboxes.  If you deselect this option, the survey will instead use the normal HTML radio buttons and checkboxes.  I suspect that these may offer a better screen reader experience than their graphical equivalents.

I'd also love to hear their thoughts on whether this JavaScript hack improved their experience.  Of course, it would be easy to change the exact text (or order of the texts) if there is a standard we should aim for.
...