samigo: Accessibility issues with selecting radio button/checkbox answer options during take

Description

Issue: In Sakai 11.2 and greater, when selecting answers for a Multiple Choice, Single Selection OR Survey question, the ONLY item you can use to select an answer is the radio button for that answer option. (Screencasts of behavior linked in steps to reproduce below - note that the Screencast is from UVA's local instance and the bgcolor/highlight behavior for these question types is NOT present on nightly2.)

NOTE:

  • The behavior of only being able to click the radio button for Multiple Choice, Single Selection and Survey questions differs from Sakai 10.2 where you could, correctly, also click the answer text to select the answer.

The following 4 question types SHOULD have a consistent look/feel to the user:

  1. Multiple Choice, Single Selection

  2. Survey (simple survey NOT matrix of choices)

  3. Multiple Choice, Multiple Selection

  4. True False

Desired behavior of ALL 4 question types above:

  • Highlight the text of the answer option on FOCUS (EITHER keyboard OR mouse/pointer device focus).

  • Make the highlight have appropriate contrast with black text.

  • For each answer option, allow BOTH answer text and radio button to be clickable.

Steps to reproduce:

  1. Create and publish an assessment with the following 4 question types:

    • Multiple Choice, Single Selection

    • Survey (simple survey NOT matrix of choices)

    • Multiple Choice, Multiple Selection

    • True False

  2. As a student, take the test and note the following incorrect behavior for the question types:

    1. Multiple Choice, Single Selection questions, you cannot click the answer text to select it.
      https://www.screencast.com/t/3yDumGq5

    2. Survey questions, you cannot click the answer text to select it.
      https://www.screencast.com/t/xhC5deJB

  3. Note correct behavior for Multiple Choice, Multiple Selection and True False questions - they allow selection of answer by clicking answer text.
    https://www.screencast.com/t/wfrVlXdecR
    https://www.screencast.com/t/fhcdkGgyXM2

Activity

Show:

Mark Golbeck September 4, 2024 at 7:27 PM

We're closing this Jira issue for now. We can reopen it, if need be. Thank you.

Jose Cebe December 11, 2018 at 6:18 AM

So this seems to be already fixed in SAM-2610. This issue should be closed.

Matthew Jones June 12, 2017 at 11:56 AM

It looks like the webaim suggestion (http://webaim.org/techniques/forms/controls) is to use labels to make the checkboxes clickable from the label.

<input id="ham" type="checkbox" name="toppings" value="ham"> <label for="ham">Ham</label><br>

It looks like these were removed in 11 in https://sakaiproject.atlassian.net/browse/SAM-2721#icft=SAM-2721 but kind of re-added in https://sakaiproject.atlassian.net/browse/SAM-2610#icft=SAM-2610 (in 12). However there's this empty label that is in the "for" in 12 from https://sakaiproject.atlassian.net/browse/SAM-2610#icft=SAM-2610 which was mentioned there so maybe this is incomplete.

<li class="samigo-question-answer"> <input type="radio" name="takeAssessmentForm:j_id_jsp_1255670694_138:0:j_id_jsp_1255670694_198:0:deliverMultipleChoiceSingleCorrect:samigo-mc-select-one" id="takeAssessmentForm:j_id_jsp_1255670694_138:0:j_id_jsp_1255670694_198:0:deliverMultipleChoiceSingleCorrect:samigo-mc-select-one:0" value="133"><label for="takeAssessmentForm:j_id_jsp_1255670694_138:0:j_id_jsp_1255670694_198:0:deliverMultipleChoiceSingleCorrect:samigo-mc-select-one:0"> </label> <div class="mcAnswerText"> <span class="samigo-answer-label strong" aria-hidden="true"> A. </span> <label for="takeAssessmentForm:j_id_jsp_1255670694_138:0:j_id_jsp_1255670694_198:0:deliverMultipleChoiceSingleCorrect:samigo-mc-select-one"> test a</label></div></li>
Won't Fix

Details

Priority

Affects versions

Assignee

Reporter

Environment

* https://trunk-mysql.nightly.sakaiproject.org * https://qa11-mysql.nightly.sakaiproject.org/

Created June 12, 2017 at 11:24 AM
Updated September 4, 2024 at 7:27 PM
Resolved September 4, 2024 at 7:27 PM

Flag notifications