Have an idea?

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

Grid / Table formatting

Hey all. I am, yet again, working on a questionnaire where there is need for low vision / blind respondents to be able to use it.  I would say that it is working at about 90+%, but the issue is with grid questions.  

I think the easiest way to get what I'm after is to link to the page on the JAWS website that describes how to format tables properly.  Can anyone tell me if the grid questions as are in Lighthouse will work? Or do we need to do something to bring them up to par?

https://www.freedomscientific.com/SurfsUp/Tables.htm
asked Oct 15 by Nwiggin Bronze (855 points)
I appreciate the shared link, but noticed that it did not include any examples of tables with input elements similar to our grid questions.  I'd be happy to help write some script to improve our grid question behavior, but I don't feel qualified to say for sure what behavior would be satisfactory.  Should each input have a label like "input for row (row label), column (column label)" or something like that?
Hey Zachary,

I figured the easiest way to explain things was to take a video of what it's like taking a survey using screen reading software.  So, I took a video and uploaded it to OneDrive.

https://comengageus-my.sharepoint.com/:v:/g/personal/nathan_comengage_us/Ef8qzNaGkq1LgGxIaALw_yoBzLsSbRQSuCMC2jkzGMyWcw?e=8Fbxnn

1 Answer

0 votes
Thanks for the footage.  Let me go through what you mentioned.

Disabling graphical radio buttons and checkboxes definitely seems advisable.  I have some ideas as to how it might be possible to have the non-graphical inputs for blind users while keeping the customizable graphical ones for non-blind users, but I haven't tried them out.  If you're good with just disabling this setting, that's great.

I'm quite surprised that JAWS would do that "1 of 25" behavior, especially considering it works better for the grid questions.  The radio buttons of each question share a name attribute that is different from the other radio buttons, which is the standard HTML practice for grouping radio buttons.  So I'm left scratching my head as to how JAWS tries to assume grouping.  Just a shot in the dark, but could you try adding this script to that page and see how JAWS responds?

<style>
fieldset {
    border: none;
}
</style>

<script>
$(document).ready(function(){
    $('.select.question').each(function(){
        $(this).find('.response_body').wrap('<fieldset id="' + $(this).attr('id') + '_fieldset"></fieldset>');
    });
})
</script>


As for your grid question, please try adding this to the question.  I expect it to read out the column label for each radio button.

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

<script>
$(document).ready(function(){
    var innerTable = $('#[% QuestionName() %]_div .inner_table');
    if (innerTable.length) {
        var rows = $('input[name="hid_row_list_[% QuestionName() %]"]').val().split(',');
        var columns = $('input[name="hid_col_list_[% QuestionName() %]"]').val().split(',');
        columns.forEach(function(column){
            var label = $(innerTable).find('.[% QuestionName() %]_c' + column).text();
            rows.forEach(function(row){
                var id = '[% QuestionName() %]_r' + row + '_' + column;
                $('#' + id).after('<label class="hiddenLabel" for="' + id + '">' + label + '</label>');
            });
        });
    }
})
</script>
answered 5 days ago by Zachary Platinum Sawtooth Software, Inc. (153,700 points)
The first set, fixing the "1 of 25" behavior works wonderfully.
The second set does not read out the column label. It still does the "radio button not checked, 1 of 9".
A question....Would exploring this whole accessibility thing be a worthwhile topic for the Sawtooth conference happening in April?
Glad to hear that the fieldset workaround has resolved one of the problems, but a bummer to hear that the hidden labels not working out.  If anything, I would have expected vice versa results.  I'm curious if it is the labels being hidden that stops JAWS from respecting them.  Deleting lines 1-5 of my grid question code will make the question not look great, but can you give it a try and see how JAWS responds?

I know our conferences and workshops often include both methodological and technical presentations.  I would imagine accessibility would be an interesting topic for the latter group.  One of our conference committee members could probably offer more insight than me on that.
Removing lines 1-5 worked, but yeah, it is ugly.

I'm thinking there are two ways to try and resolve this.
1) Keep noodling with the code to see if there is a way we can "trick" jaws.

2) Make the display code conditional. For example, I can ask a question about low vision/screen readers at the beginning (e.g. BLIND) so if BLIND ==  1 then the style script does not run so the labels do not appear.
Sorry for serial thinking, but another question.

Can I take the top script "1 of 25" behavior and paste it in the HTML <head> Tag box under the Advanced settings? Would doing so make it work on all pages?

Or should I just copy/paste the code on pages with multiple questions?
The conditional option would be easier, but it would be nice to find a way to consistently trick JAWS.  Using "visibility: hidden;" rather than "display: none;" might be screen readable, but it will also result in some tacky whitespace.  "font-size: 0px;" could work, but I don't know if there are any browsers out there that wouldn't play nice with that.  Maybe we just position the text out of sight with a combination like this:

.hiddenLabel {
    position: fixed;
    left: 100%;
}


Again, we'd want to test these against a few different browsers to make sure none of them try to "fix" our hack.
I imagine placing my "fieldset" code into your HTML head tag should be fine, but you may want to test it a little to be sure.  Specifically, the two questions that come to my mind would be:

1.  Is it compatible with all three select question input types (radio, checkbox, dropdown)?
2.  Does it mess with any visual settings (e.g., multiple columns, images in item labels)?

If you have any select question where you are doing something special beyond the ones I've seen so far, it'd be good to just make sure that they're still doing good after this code.
By George, I think we have it.  I tested it in Edge and it works flawlessly from what i can tell.  I also tested it in Chrome and it appears to work there (however, there may be an odd/minor hiccup).  I'm sending the link to one of our vendors and she will run though it as well.
...